合并两个表单值并发送

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="[e-mail]" />
</form>

<button type="button" id="submitBtn">Send</button>
</div>

Answer 1

我认为没有必要使用submit，只需使用ajaxon click button功能:

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