Javascript 在不离开页面和bootstrapValidator的情况下发送联系人表单

我正在使用代码笔作为我的联系方式

我遇到的问题是，一旦单击“发送”按钮，您就可以将联系人表单到达的页面转到sendmessage.php

我想看到的是表单的正常行为：当您单击“发送”（消息成功传输）时，您停留在同一页面上，“发送”按钮消失，并被“成功”消息取代，而无需离开或重新加载表单所在的页面

知道当前代码有什么问题吗？你可以测试我的实例

非常感谢,

HTML:

sendmessage.php的内容：

<?php

require 'PHPMailer/PHPMailerAutoload.php';

$mail = new PHPMailer;
$mail->CharSet = 'utf-8';

//Enable SMTP debugging. 
$mail->SMTPDebug = false;                               
//Set PHPMailer to use SMTP.
$mail->isSMTP();            
//Set SMTP host name                          
$mail->Host = "smtp.elasticemail.com";
//Set this to true if SMTP host requires authentication to send email
$mail->SMTPAuth = true;                          
//Provide username and password     
$mail->Username = "xyz";                 
$mail->Password = "xyz";                           
//If SMTP requires TLS encryption then set it
$mail->SMTPSecure = "tls";                           
//Set TCP port to connect to 
$mail->Port = 2525;                                   

$mail->From = $_POST['email'];
$mail->FromName = $_POST['first_name'];

$mail->addAddress("xyz@gmail.com");
//CC and BCC
$mail->addCC("xyz@outlook.com");
$mail->addBCC("");

$mail->isHTML(true);

$mail->Subject = "New message from " . $_POST['first_name'] . $_POST['last_name'];
$mail->Body =  $_POST['message']."<br><br>From page: ". str_replace("http://", "", $_SERVER['HTTP_REFERER']) . "<br>" . $_SERVER ['HTTP_USER_AGENT'] ;

$response = array();
if(!$mail->send()) {
  $response = array('message'=>"Mailer Error: " . $mail->ErrorInfo, 'status'=> 0);
} else {
  $response = array('message'=>"Message has been sent successfully", 'status'=> 1);
}

/* send content type header */
header('Content-Type: application/json');

/* send response as json */
echo json_encode($response);

?>

---

您是否尝试过在提交事件中仅返回false

$('#contact_form').on('submit', function(event) {
  event.preventDefault();
  return false;
});

---

您需要将bootstrapvalidator.min.js文件0.4.5更新为最新文件

https://cdnjs.cloudflare.com/ajax/libs/jquery.bootstrapvalidator/0.5.3/js/bootstrapValidator.min.js

我已经创建了一个fiddle plz检查，但我没有添加它的ajax.php文件，但您可以在控制台中看到它当您更新bootstrapvalidator文件时，这将起作用。

$('#contact_form').bootstrapValidator({
        // To use feedback icons, ensure that you use Bootstrap v3.1.0 or later
        feedbackIcons: {
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
        },
        fields: {
            first_name: {
                validators: {
                        stringLength: {
                        min: 2,
                    },
                        notEmpty: {
                        message: 'Please supply your first name'
                    }
                }
            },
            email: {
                validators: {
                    notEmpty: {
                        message: 'Please supply your email address'
                    },
                    emailAddress: {
                        message: 'Please supply a valid email address'
                    }
                }
            },            
            message: {
                validators: {
                      stringLength: {
                        min: 10,
                        max: 200,
                        message:'Please enter at least 10 characters and no more than 200'
                    },
                    notEmpty: {
                        message: 'Please supply a description of your project'
                    }
                    }
                }
            }
        })
        .on('success.form.bv', function(e) {
            // Prevent form submission
            e.preventDefault();

            // Get the form instance
            var $form = $(e.target);

            // Get the BootstrapValidator instance
            var bv = $form.data('bootstrapValidator');

            // Use Ajax to submit form data
            $.post($form.attr('action'), $form.serialize(), function(result) {                
                $("#success_message").show();

                $('#contact_form input').val('');
            }, 'json');
        });

---

为什么标题是（'Location:page.php'）；不是上帝的选择？你可以添加onclick=“return confirm（‘你确定要发送吗？’）”功能嗨，谢谢你的建议，但这对我来说并不理想，联系人表单在我网站的每个页面底部，我不希望用户离开他们访问的页面，我只想在点击“发送”时出现一条成功消息，消息发送成功。也许这是给你的：或者这是：谢谢。我可以试试。我应该把它放在我现有的代码中的什么地方？你可以将它作为另一个“事件处理程序”上的（'success.form.bv'，function（e）{”附加到

。上（'success.form.bv'，function（e））的正上方但它破坏了代码，一定是语法错误？此代码的用途是什么？它会阻止用户在单击“发送”时离开页面吗按钮？非常感谢您必须去掉最后一个分号。
；
才能将
链接到
函数上，是的，这将阻止页面更改。谢谢。因此，现在，当我单击“发送”时，我不再离开页面，但表单不会被发送。也许再次出现语法问题？（我已经在JSFIDLE中复制/粘贴了原始代码+您添加的内容以便于查看）非常感谢！它现在部分工作了（我没有离开页面就收到了成功消息）。问题是什么？唯一剩下的问题是，即使消息实际上没有发送，它也会显示成功消息（我已经尝试删除sendmessage.php中的所有内容…但我仍然收到了成功消息）。这是否意味着sendmessage.php不会与javascript“通信”以“发出绿灯”来显示成功消息？谢谢您需要使用内联css隐藏成功消息div，并尝试此代码$.post（$form.attr（'action'）、$form.serialize（）、函数（result）{$（“#success_message”）.show（）；$（'#contact_form input'）.val（''；}，'json'）；在这里，当表单成功提交时，$（“#success_message”）.show（）//它将显示success div
https://cdnjs.cloudflare.com/ajax/libs/jquery.bootstrapvalidator/0.5.3/js/bootstrapValidator.min.js

$('#contact_form').bootstrapValidator({
        // To use feedback icons, ensure that you use Bootstrap v3.1.0 or later
        feedbackIcons: {
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
        },
        fields: {
            first_name: {
                validators: {
                        stringLength: {
                        min: 2,
                    },
                        notEmpty: {
                        message: 'Please supply your first name'
                    }
                }
            },
            email: {
                validators: {
                    notEmpty: {
                        message: 'Please supply your email address'
                    },
                    emailAddress: {
                        message: 'Please supply a valid email address'
                    }
                }
            },            
            message: {
                validators: {
                      stringLength: {
                        min: 10,
                        max: 200,
                        message:'Please enter at least 10 characters and no more than 200'
                    },
                    notEmpty: {
                        message: 'Please supply a description of your project'
                    }
                    }
                }
            }
        })
        .on('success.form.bv', function(e) {
            // Prevent form submission
            e.preventDefault();

            // Get the form instance
            var $form = $(e.target);

            // Get the BootstrapValidator instance
            var bv = $form.data('bootstrapValidator');

            // Use Ajax to submit form data
            $.post($form.attr('action'), $form.serialize(), function(result) {                
                $("#success_message").show();

                $('#contact_form input').val('');
            }, 'json');
        });