2017-04-02 28 views
1

私はJqueryとAjaxを使用してフォームを送信するのに問題がありますが、フォームのアクションページにリダイレクトされました。私は外部のsomethingsかどうか分かりません。 は、これは私のコードです:ページをリロードせずにajaxでフォームを送信しますか?

<form action="add-niveau" method="POST" class="ajax"> 
    <div> 
    <input type="text" name="name" placeholder="Your name"> 
    </div> 
    <div> 
    <input type="text" name="email" placeholder="Your email"> 
    </div> 
    <div> 
    <textarea rows="4" cols="20" name="comment"></textarea> 
    </div> 
    <input type="submit" value="send"> 
</form> 
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.4.min.js">  </script> 
<script> 
    $('form.ajax').on('submit', function() { 
    return false; 
    }); 
</script> 

その他のAjaxスクリプト:あなたはevent.preventDefault()を追加する必要が

var ajaxRequest; 

function ajaxFunction() { 
try { 

    // Opera 8.0+, Firefox, Safari 
    ajaxRequest = new XMLHttpRequest(); 
} catch (e) { 

    // Internet Explorer Browsers 
    try { 
     ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP"); 
    } catch (e) { 

     try { 
      ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP"); 
     } catch (e) { 

      // Something went wrong 
      alert("Your browser broke!"); 
      return false; 
     } 
    } 
} 
} 

function getForm(objButton) { 
ajaxFunction(); 
ajaxRequest.onreadystatechange = function() { 
    if (ajaxRequest.readyState == 4) { 
     document.getElementById("formTag").innerHTML = ajaxRequest.responseText; 
    } 
} 
var buttonValue = objButton.value; 
ajaxRequest.open("get", "get-form/" + buttonValue, true); 
ajaxRequest.send(null); 
} 

// Send form using ajax: 
$('form.ajax').on('submit', function(e) { 
    e.preventDefault(); 
}); 
+0

イベントを関数に渡し、 'event.preventDefault'を使用します。 – Roljhon

+1

コンソールを開き、エラーをチェックします。 jqueryが含まれていることを確認してください。 –

+0

あなたはajaxを使用するコードを投稿することができます – Akashii

答えて

0

。右クリックイベントは、デフォルトのフォーム提出を防ぐためです。

$('form.ajax').on('submit', function(event) { // pass the event to function 

    event.preventDefault(); // add this line 

    $.ajax({ 
     url: "test.php", 
     context: document.body 
    }).done(function() { 
     alert('Done!'); 
    }); 

}); 
+0

私はajaxを使って私のウェブサイトにフォームをアップロードしていますが、この時点で私は上記の問題を抱えていますが、フォームと機能を他のページでテストすると、うまく動作します。 –

関連する問題