合并两个表单值并发送

Posted 2023-05-08

【中文标题】合并两个表单值并发送

【英文标题】：Merge two form values and send

【发布时间】：2021-06-07 14:59:05

【问题描述】：

我在提交此合并表单时遇到问题。 如果我使用现在已注释掉的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="[e-mail]" />
  </form>
  
  <button type="button" id="submitBtn">Send</button>
</div>

【问题讨论】：

AJAXify 这个表单

【参考方案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;
  );
);

【讨论】：

天啊，你说的太对了！我怎么能错过呢？！谢谢@Navand！

还有一个关于脚本的问题。如果 url 是由 action 属性定义的，为什么我需要 window.location.replace(action)？没有它就不会进入下一页。

据我所知，如果您不想将用户移动到新位置或刷新页面，请使用 ajax，否则您通常使用 form.submit 提交表单，该表单会发布您的数据以及将用户重定向到新地址，提交前检查this 以获取更新表单。