一次提交两份表格

Question

我想在点击第二个表单的提交按钮后提交两个表单。
最困难的部分是操作指向一个php文件，通过该文件向客户端发送电子邮件。我不想收到两封电子邮件。

两个表单数据应该同时到达php文件

这是第一种形式:

<form class="generalForm" id="form1" action="reservationSend.php" method="post">
    <input id="datepicker-example3" type="text" name="datepicker-example3" value="Check In">
    <input id="datepicker-example2" type="text" name="check_out" value="Choose Out">
    <select name="RoomType">
        <option selected="selected" value="0">Room Type</option>
        <option value="Deluxe">Deluxe</option>
        <option value="Family">Executive</option>
        <option value="Conference">Conference</option>
    </select>
</form>

这是第二种形式:

<form id="form2" class="generalForm" method="post" action="reservationSend.php" onsubmit="return submitForm()">
    <input type="text" name="name" placeholder="Your Name" />
    <input type="text" name="email" placeholder="Your email" />
    <input type="text" name="tp" placeholder="Your Phone Number" />
    <input type="text" name="Country" placeholder="Your Country" />
    <textarea name="message" placeholder="Your Message"></textarea>
    <input type="submit" name="submit" value="submit">
</form>

My javascript, myjscript.js:

function submitForm() {
    document.getElementById("form1").submit();
    document.getElementById("form2").submit();
}

Answer 1

使用AJAX提交表单的示例&jQuery .

$('#formID')
.on('submit', function(e){
    e.preventDefault(); //disable default submit action
    var postData = {
        'name' : $('input[name="name"]').val(),
        'email' : $('input[name="email"]').val()
        //etcetera
    };
    $.post(
        'reservationSend.php',
        postData,
        callBack(returnData){
            doStuffWith(returnData);
            //add callback functionality
        },
        'json' //or any other datatype. In this case postData is a JS object, which gets submitted as JSON string
    );
    //You could even trigger the submission of another form here:
    $('#otherForm')
    .trigger('submit');
    //This will trigger the submission of #otherForm
});
$('#otherForm')
.on('submit', function(e){
    e.preventDefault();
    //logic for form submission.
});

您可以在这里找到关于jQuery AJAX方法的文档。你也会在这里找到serialize()和serializeArray()。2 .将表单转换为JSON字符串的方法