preventDefault（）メソッドを使用してjqueryを使用してフォームを送信する

Jqueryを使用してフォームを送信しようとしています。私の目標は、.ajaxを使用してフォームをサーバーに送信することです。投稿後、フォームの内容はページがリロードされずにページに移動します（これを実現するe.preventDefault（）があります）。コードは以下のとおりです。preventDefault（）メソッドを使用してjqueryを使用してフォームを送信する

送信をクリックすると、フォームが再読み込みされているようです。私のコードで何が間違っていますか？

<!DOCTYPE html> 
<html> 
<head> 

<script src="http:////code.jquery.com/jquery-1.10.2.js"></script>  
<script type='text/javascript'> 

     $("#submitForm").submit(function(e){ 

      e.preventDefault(); 
     // some ajax code to submit the form 

      var container = document.getElementById("div2"); 
      var node = document.createTextNode("put form contents here");   
      container.appendChild(node);   

     }); 

</script> 

</head> 

<body> 
<h1>edit form here</h1> 

<div id = "div1"> 
<form id = "submitForm"> 
    <input type = "text"/> 
    <input type = "submit" value = "submit"/> 
</form> 
</div> 

<h1>show form contents here</h1> 

<div id = "div2"> 

</div> 

</body> 
</html>

出典

2016-12-09 Zhuo

とき、これはあなたのコードを実行します：このコードは私のために動作します。ボディーセクションの後に置いてください。

$("#submitForm").submit(function(e){ 
     e.preventDefault(); 
     var container = document.getElementById("div2"); 
     var node = document.createTextNode("put form contents here");   
     container.appendChild(node);  
    });

出典

2016-12-09 18:38:50

または、本体のセクションの下にjavascriptファイルを入れてください... –

まだ私のために動作しません。それを試しましたか？ – Zhuo

私は自分の答えを更新しました。このスクリプトはbodyの後に置く必要があります。そうすれば、要素がレンダリングされていることを確認できます。 –

フォームがドキュメントに表示される前にスクリプトが実行されています。

修正：

$(document).ready(function() { 
     $("#submitForm").submit(function(e){ 

      e.preventDefault(); 
     // some ajax code to submit the form 

      var container = document.getElementById("div2"); 
      var node = document.createTextNode("put form contents here");   
      container.appendChild(node);   

     }); 
});

[EDITED] DOMContentLoadedイベントが発生

出典

2016-12-09 18:36:50

私が提案したコードを変更します。それでも動作しません。奇妙な。 – Zhuo

それは変です。 ctrl + rでページをリロードしようとしましたか？ –

準備完了機能の最初の行にいくつかのconsole.log呼び出しを追加します。すべてが実行されていることを確認してください –

preventDefault（）メソッドを使用してjqueryを使用してフォームを送信する

答えて

関連する問題