合并两个表单值并发送

Question

我在提交此合并表单时遇到问题。 如果我使用现在已注释掉的mainForm.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="foo.bar@domain.com" />
  </form>
  
  <button type="button" id="submitBtn">Send</button>
</div>

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