合并两个表单值并发送

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

我觉得没必要用submit，直接用ajax on clicked button function:

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