送信ボタン付きJavaScript jQueryの問題

Question

問題があります。私はそれがレンダリングのためだと思うが、そのトピックは私には新しかったので知らない。

さて、私は簡単なフォームを持っている：今、私はそれが同じようにjQueryを使用して提出キャッチしたい

<form method="post" action="/send-mail"> 
<input type="text" name="msg" value=""> 
<input type="submit" value="send that fancy mail"> 
</form> 

：

$('[type=submit]').submit(function(e) { 
    e.preventDefault(); 
    var formHtml = $(this).parent().html(); 

    $.ajax({ 
     ..all these options.., 
     beforeSend: function(xhr) { 
      $('form').html("sending mail"); 
     }, 
     success: function(data) { 
      $('form').html(formHtml); // I think here's the problem... 
     }  
    }); 
}); 

大丈夫、そのコードは、本当に良い作品。それは何をすべきかをします。しかし、2番目のリクエストを送信したい場合、送信ボタンは意図した通りには動かない。私はそれを前にしていましたが、デフォルトアクションを使ってフォームを送信しようとしました - 少なくとも私はそれを考えました。

私はgoogleを使用しましたが、私は自分の問題を説明する方法がわかりません。

うまくいけば、誰かが私を助けることができたら、ありがとう！

Greetz

Answer 1

代わりのの.html（）あなたが使用することができます。

.clone(true)：マッチした要素の集合のディープコピーを作成します。

.replaceWith()：一致する要素のセット内の各要素を、指定された新しい内容に置き換え、削除された要素のセットを返します。ボタンを提出したり、フォームに添付場合を提出する添付場合

イベントがクリックでなければなりません。

スニペット：

$('[type=submit]').on('click', function (e) { 
 
    e.preventDefault(); 
 
    var formHtml = $(this).closest('form').clone(true); 
 
    $.ajax({ 
 
     dataType: "json", 
 
     url: 'https://api.github.com/repos/octocat/Hello-World', 
 
     beforeSend: function (xhr) { 
 
      $('form').html("sending mail"); 
 
     }, 
 
     success: function (data) { 
 
      console.log('Success'); 
 
      $('form').replaceWith(formHtml); // I think here's the problem... 
 
     } 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 

 
<form method="post" action="/send-mail"> 
 
    <input type="text" name="msg" value=""> 
 
    <input type="submit" value="send that fancy mail"> 
 
</form>

Answer 2

代わり$('[type=submit]').submit(function(e) {

Answer 3

利用<input type="button">代わりの<input type="submit">の動的に作成ekementsのための使用$(document).on("click", "[type=submit]", function (e) {と、このようonclick機能追加：

<input type="button" onclick="_submitForm()" value="send that fancy mail"> 

をそしてあなたのjsは次のようになります。

function _submitForm(){ 
var formHtml = $(this).parent().html(); 

    $.ajax({ 
     ..all these options.., 
     beforeSend: function(xhr) { 
      $('form').html("sending mail"); 
     }, 
     success: function(data) { 
      $('form').html(formHtml); // I think here's the problem... 
     }  
    }); 
} 

私はあなたの問題を解決したことを願っています。