ブートストラップ・モーダル・ウィンドウに動的にロードされたajaxフォーム・ポストを提出するにはどうすればいいですか？

Question

私はこれを可能な限り簡潔にするつもりです。私はこのフォームをブートストラップのモーダルウィンドウに動的にロードしています。しかし、私がそれを提出すると、... ajaxを介して投稿する代わりに、ページ全体が提出されます。ページの状態を保存しながらAJAX経由で（バックグラウンドで）送信するにはどうすればよいですか？ここでは、モーダルdiv要素にロードするコードは次のとおりです。

<script> 
 
    $(function(){ 
 
     $('.modal form').on('submit', function(e){ 
 
      e.preventDefault(); 
 
      $.ajax({ 
 
       url: "index2.html", 
 
       type: "POST", 
 
       data: $("multiform").serialize(), 
 
       success: function(data){ 
 
        alert("Successfully submitted.") 
 
       } 
 
      }); 
 
     }); 
 
    }); 
 
</script>

<form name="multiform" id="multiform" action="index2.html" method="POST" > 
 
    Name: <input type="text" name="name" value="Ravi"/> <br/> 
 
    Age :<input type="text" name="age" value="1" /> <br/> 
 
    <input type="submit" value="Save" name="save" class="btn btn-primary" style="margin-top: 2px; height: 27px; width: 89px;" ></input> 
 
</form>

Answer 1

私はそれを考え出しました。 $（document）.ready（）でコードを囲む必要があり、 '.modalフォーム'を使ってシリアル化するためにデータを参照する必要がありました。一度それをしたら、すべてうまくいった。私はハードコードモーダルウィンドウ内のフォームとは、AJAXを経由して提出する場合

\t $(document).ready(function() { 
 
     $('.modal form').on('submit', function(e){ 
 
      e.preventDefault(); 
 
      $.ajax({ 
 
       url: "index2.html", 
 
       type: "POST", 
 
       data: $('.modal form').serialize(), 
 
       success: function(data){ 
 
        alert(data); 
 
       } 
 
      }); 
 
     }); 
 
    });