javascript - How to submit three forms with one submit button

Question

I have 3 forms I would like to submit with one button:

<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>

I understand that the best way to do this is probably Ajax, but am unsure how I would do this; create two AJAX functions for the first two forms and then call the functions when the third is submitted?

Answer 1

<form id="#formEditUsername" class="frmToSubmit" method="post">
//Code
</form>

<form id="#formEdituseremail" class="frmToSubmit" method="post">
//Code
<form>

<form id="#new_password_form" class="frmToSubmit" method="post">
//Code
</from>

<script type="text/javascript">
$(document).ready(function() {
    $("#btnUpdate").click(function() {
        $(".frmToSubmit").submit();
    });
});
</script>

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');
                      });                
                  });
              });
          });
      });

Answer 3

正如@Jari 提到的，您可以简单地从前两个表单中收集数据并将它们一起提交。

注意：这种方法要求输入name属性在所有三种形式中都是唯一的。

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
);