jquery 使用 AJAX 在表单标签外重用一个按钮来提交两个单独的表单

a5g8bdjr  于 2023-06-22  发布在  jQuery
关注(0)|答案(1)|浏览(110)

我正在尝试用一个按钮提交两个表单,
这就是我现在所拥有的

<form name="form1" id="form1" class="pclass">
<input type="text" name="name">
</form>

<form name="form2" id="form2" class="pclass">
<input type="text" name="name">
</form>

the button is here 
<button type="button" class="btn btn-primary">Check</button>

想这样利用它

<script type="text/javascript">
    $(".pclass").click(function (e) {
        e.preventDefault();
        var formData = $("#form1, #form2").serialize();;

        console.log(formData);
        $.ajax({
          type: "POST",
          url: "proceed.php",
          data: formData
        }).done(function (data) {
          console.log(data);
        });
    });
</script>

尝试如上但不工作,它发送空表单到结束页

wko9yo5t

wko9yo5t1#

让我们构建一个工作代码段。现在我们可以看到类pclass位于输入端,而不是您想要的button

$(".pclass").click(function(e) {
  e.preventDefault();
  var formData = $("#form1, #form2").serialize();

  console.log(formData);
  
  $.ajax({
    type: "POST",
    url: "proceed.php",
    data: formData
  }).done(function(data) {
    console.log(data);
  });
  
});
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>

<form name="form1" id="form1" class="~pclass">
  <input type="text" name="name" value="foo">
</form>

<form name="form2" id="form2" class="~pclass">
  <input type="text" name="name" value="bar">
</form>

the button is here
<button type="button" class="btn btn-primary pclass">Check</button> trying to use it like this

相关问题