6

ページに複数のフォームがあります。フォームの送信ボタンをクリックすると、そのフォームのみのフォーム値をajax経由で送信したい。これが私が持っているものです。最初のフォームは想定どおりに機能し、2 番目のフォームは実際にフォームを送信します。各フォームを個別にターゲットにするにはどうすればよいですか。どこかで .find() を使用する必要があると感じています。

 <form id="form1" method="post">
    <input type="text" id="name1" name="value" value="">
    <input type="submit"  id="update_form"  value="Save Changes">
  </form>

 <form id="form2" method="post">
    <input type="text" id="name2" name="value" value="">
    <input type="submit"  id="update_form"  value="Save Changes">
 </form>



<script>
// this is the id of the submit button
$("#update_form").click(function() {

    $.ajax({
           type: "POST",
           url: "approve_test.php",
           data: $(this.form).serialize(), // serializes the form's elements.
           success: function(data)
           {
               alert(data); // show response from the php script.
           }
         });

    return false; // avoid to execute the actual submit of the form.
});
</script>
4

5 に答える 5

13

複数の要素に同じ ID を使用しないでください。代わりにクラスを使用してください。
コードを次のように変更します。

<form id="form1" method="post">
    <input type="text" id="name1" name="value" value="">
    <input type="submit"  class="update_form"  value="Save Changes"> <!-- changed -->
</form>

<form id="form2" method="post">
    <input type="text" id="name2" name="value" value="">
    <input type="submit"  class="update_form"  value="Save Changes"> <!-- changed -->
</form>

<script>
// this is the class of the submit button
$(".update_form").click(function() { // changed
    $.ajax({
           type: "POST",
           url: "approve_test.php",
           data: $(this).parent().serialize(), // changed
           success: function(data) {
               alert(data); // show response from the php script.
           }
    });
    return false; // avoid to execute the actual form submission.
});
</script>
于 2013-05-19T18:50:08.540 に答える
3

まず、送信ボタンでクラスを使用します。ID は一意であることに注意してください (w3c 仕様による)

次に、onclick リスナーで、最も近いものを使用してフォームを取得します (親と同じですが、特定の親を対象としています。この場合はフォーム要素です)。作業コードは次のとおりです。

 <form id="form2" method="post">
    <input type="text" id="name2" name="value" value="">
    <input type="submit"  class="update_form"  value="Save Changes">
 </form>



<script>
// this is the id of the submit button
$(".update_form").click(function() {
    var myform = $(this).closest("form"); //parent form
    $.ajax({
           type: "POST",
           url: "approve_test.php",
           data: myform.serialize(), // serializes the form's elements.
           success: function(data)
           {
               alert(data); // show response from the php script.
           }
         });

    return false; // avoid to execute the actual submit of the form.
});
</script>
于 2013-05-19T18:56:13.207 に答える
2

ここで行っていることにはいくつかの問題があります。

同じ ID を持つ複数の要素:

マークアップから、 と の両方form1がそれぞれform2の送信ボタンに対して同じであることがわかります。idこれは有効なマークアップではありません。form1-submitやなどに設定する必要がありform2-submitます。

送信するフォームの識別

AJAX リクエストの data 属性で、送信するフォームを識別するために、次を使用できます。

data: $(this).parent().serialize(),

ここで、2 つのボタンのそれぞれにハンドラーを作成してコードの繰り返しを避けるために、両方の送信ボタンに同じクラスを指定し、onclick次のようにイベント ハンドラーをそのクラスにアタッチします。

//Submit buttons
<input type="submit" id="submit1" class="submit-buttons" />
<input type="submit" id="submit2" class="submit-buttons" />

//Event handler
$('.submit-buttons').click(function(){
   //Your code here
});
于 2013-05-19T18:50:44.663 に答える