Javascript PHP/Ajax表单Sumission

我用PhP/Ajax设计了一个侧栏浮动表单，它可以工作并向我的目标电子邮件发送提交。这里是链接：但是当访问者成功填写并提交表单时，它会将他发送到另一个页面进行确认

这不应该是这样的，必须按照我的编码粘贴到带有弹出消息的主页上：

<div id="sendingMMessage" class="statusMessage">    <p>Sending your message. Please wait...</p>  </div>
  <div id="successMMessage" class="statusMessage">    <p>Thanks for sending your message! We'll get back to you shortly.</p>  </div>

---

首先，您必须避免此表单的正常表单提交，您可以使用“正常”按钮而不是“提交”按钮来完成此操作

<input type="button" id="sendMMessage" name="sendMMessage" value="Submit">

如果你对此还不清楚，我将向你解释更多细节

---

谢谢。

下面是简单的ajax表单提交。希望它能帮助你的需要

<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
<script>
$(function () {
    $('form#consultationForm').on('submit', function(e) {
        $.ajax({
            type: 'post',
            url: 'receivedConfirmation.php',
            data: $(this).serialize(),
            success: function (result) {
                console.log(result);
                $('#receivedStatus').attr('style','display:block');
                $('#receivedStatus').html(result);
            }
        });
        e.preventDefault();
    });
});     
</script>
<form id="consultationForm" method="post">
    Firstname: <input name="fname" />
    Lastname: <input name="lname" />
    <div style='clear:both;'></div>
    <input type="submit" name="submit" value="save"/>
    <input type="reset" name="cancel" value="cancel"/>
</form>
<div id='receivedStatus' style='display:none;'></div>

$（函数（）{
$（'form#consultationForm'）。关于（'submit'，函数（e）{
$.ajax({
键入：“post”，
url:“receivedConfiguration.php”，
数据：$（this）.serialize（），
成功：功能（结果）{
控制台日志（结果）；
$（'receivedStatus'）.attr（'style'，'display:block'）；
$（'#receivedStatus'）.html（结果）；
}
});
e、 预防默认值（）；
});
});     
名字：
姓氏：

receivedConfirmation.php

<?php
 echo "<PRE>";
 print_r($_POST);
 echo "</PRE><br>";

 //do your DB stuffs here and finally echo your response based on success or failure

 echo "Thanks for sending your message! We'll get back to you shortly.";
 echo "<br>Click your browser's Back button to return to the page."
?>

---

在$.ajax中，您已经编写了
ssucess
。它不应该是
success
？而且，您需要在
submitform（）
中写入
event.preventDefault（）
，以防止表单提交。了解如何在
submitform（）
中传递事件对象引用实际上我正在尝试在同一页上使用两个表单。。。第一个表单是可点击按钮表单，第二个表单是此滑块。。。为了避免任何冲突，我在第二个表单中使用了“SSACCESS”，我刚刚将{SSACCESS}更改为{success}，但没有成功第一个要点是将输入类型更改为按钮$（“#sendmessage”）。单击（函数（）{//将ajax表单提交代码放在此处}）；好了，现在添加以下ajax submit$（“#目标”）的javascript代码。单击（函数（）{//将您的ajax表单提交代码放在这里$。ajax（{type:“POST”，url:''，数据：$（“#contact#form”）。serialize（），//序列化表单的元素。成功：函数（数据）{alert（数据）；//显示来自php脚本的响应。}}}；}）；实际上，我对ajax的掌握较少，可能不知道该把什么放在哪里。。你能给我写完整的代码，这样我就可以试着替换现有的。首先感谢你的更新。。。但它仍然不清楚，因为您希望我用所提到的代码替换任何代码，或者您希望我将此代码添加到带有脚本标记的输入按钮下面
<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
<script>
$(function () {
    $('form#consultationForm').on('submit', function(e) {
        $.ajax({
            type: 'post',
            url: 'receivedConfirmation.php',
            data: $(this).serialize(),
            success: function (result) {
                console.log(result);
                $('#receivedStatus').attr('style','display:block');
                $('#receivedStatus').html(result);
            }
        });
        e.preventDefault();
    });
});     
</script>
<form id="consultationForm" method="post">
    Firstname: <input name="fname" />
    Lastname: <input name="lname" />
    <div style='clear:both;'></div>
    <input type="submit" name="submit" value="save"/>
    <input type="reset" name="cancel" value="cancel"/>
</form>
<div id='receivedStatus' style='display:none;'></div>

<?php
 echo "<PRE>";
 print_r($_POST);
 echo "</PRE><br>";

 //do your DB stuffs here and finally echo your response based on success or failure

 echo "Thanks for sending your message! We'll get back to you shortly.";
 echo "<br>Click your browser's Back button to return to the page."
?>