javascript - 合并两个表单值并发送

Question

我在提交此合并表单时遇到问题。如果我现在使用mainForm.submit()注释掉的 which ，它会提交，但是当我使用 submit 时，$.ajax它不会到达success. 我也试过mainForm[0].submit(function() {...}没有任何运气。有人可以帮我吗？

$(function() {
  var mainForm = $('#mainForm'),
        modalForm = $('#modalForm');


  $('#submitBtn').on('click', function() {
    //mainForm.submit();
    
    console.log($('#mainForm, #modalForm').serialize());

    mainForm.submit(function() {
      var action = $(this).attr('action');

      $.ajax({
        url: action,
        type: 'POST',
        data: $('#mainForm, #modalForm').serialize(),
        success: function() {
          console.log('success');
          //window.location.replace(action);
        }
      });
      return false;
    });
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<form id="mainForm" action="/page/2" method="post">
  <input type="hidden" name="amount" value="1" />
  <input type="hidden" name="currency" value="USD" />
  <input type="hidden" name="recurring" value="true" />
</form>

<div class="modal">
  <form id="modalForm">
    <input type="text" name="firstName" value="Foo" />
    <input type="text" name="lastName" value="Bar" />
    <input type="text" name="emailAddress" value="[e-mail]" />
  </form>
  
  <button type="button" id="submitBtn">Send</button>
</div>

标签： javascriptjqueryajaxformsform-submit

Answer 1

我认为没有必要使用提交，只需使用ajax点击按钮功能：

$(function() {
  $('#submitBtn').on('click', function() {
      var action = $('#mainForm').attr('action');

      $.ajax({
        url: action,
        type: 'POST',
        data: $('#mainForm, #modalForm').serialize(),
        success: function() {
          console.log('success');
          //window.location.replace(action);
          return true;
        }
      });
      return false;
  });
});