javascript - 1 つの送信ボタンで 3 つのフォームを送信する方法

Question

1 つのボタンで送信したい 3 つのフォームがあります。

<form id="#formEditUsername">
//Code
</form>

<form id="#formEdituseremail">
//Code
</form>

<form id="#new_password_form">
//Code
</from>

<button type="submit" class="btn btn-success" id="btnUpdate">Save</button>

これを行う最善の方法はおそらく Ajax であることは理解していますが、どうすればよいかわかりません。最初の 2 つのフォームに対して 2 つの AJAX 関数を作成し、3 番目のフォームが送信されたときに関数を呼び出しますか?

Answer 1

@Jari が述べたように、最初の 2 つのフォームからデータを収集し、それらをまとめて送信するだけです。

注: このアプローチでは、入力name属性が3 つのフォームすべてで一意である必要があります。

AJAX 呼び出しの簡単な例:

var firstFormData = $("#formEditUsername").serialize();
var secondFormData = $("#formEdituseremail").serialize();
var thirdFormData = $("#new_password_form").serialize();

$.post(
    URL,              // target URL of your choice 
    firstFormData + secondFormData + thirdFormData
);

Answer 2

これを試して

 $(document).ready(function() {
        $("#btnUpdate").click(function() {
            $.post($("#formEditUsername").attr("action"), $("#formEditUsername").serialize(),
              function() {
                $.post($("#formEdituseremail").attr("action"), $("#formEdituseremail").serialize(),
                  function() {
                    $.post($("#new_password_form").attr("action"), $("#new_password_form").serialize(),
                       function() {
                        alert('All forms submitted');
                      });                
                  });
              });
          });
      });