防止在提交联系表单上打开 php 页面

Question

我在我的 html 页面中创建了一个联系表单，一旦提交，就会通过 php 页面发送一封电子邮件。目前，一旦我提交表单，页面就会重新加载，我用来发送电子邮件的 .php 页面就会打开。我想确保没有打开 php 页面，并且表单所在的页面保持打开状态。 进行搜索后，我尝试使用 ajax 编写一个 .js 文件，但问题没有解决。 我把我当前的代码放在那里：

HTML

<form class="input-form-container" action="php/emailHandler.php" method="POST">
<!-- Some input there -->
<div class="input-line">
<div class="input-button">
<input id="submit" type="submit" value="Invia">
</div>
</div>
<div class="validationAlert"></div>
</form>

JS

$(document).ready(function () {
    $('.input-form-container').submit(function(event) {
        console.log('Test sent debug');
        event.preventDefault();

        var name = $('#name').val();
        var company = $('#company').val();
        var phone = $('#phone').val();
        var email = $('#email').val();
        var message = $('#message').val();
        var validationAlert = $('.validationAlert');
        validationAlert.empty();

        if (!email.includes('@') && !email.includes('.')) {
            //event.preventDefault();
            validationAlert.append('<div>Email not valid</div>');
        }

        $.ajax({
            type : "POST",  //type of method
            url  : "php/emailHandler.php",  //your page
            data : { name : name, company: company, phone: phone, email : email, message : message },
            success: function(res){
                alert('MESSAGE SENT!');
            }
        });
    })
})

.php 页面是一个用于通过 PHPMailer 发送电子邮件的简单页面。在这里你可以找到一个简单的结构示例：https://github.com/PHPMailer/PHPMailer/blob/master/examples/smtp.phps

我尝试在我的 js 中选择一个表单 $(document).ready(function () {$('form').submit(function(event){，但结果没有改变。 如果电子邮件字段不正确，则脚本的警报 div 输入正确（因此这是 los crypt 加载正确的证明），但正如我之前写的，当我提交表单时，.php 页面被打开。

你能告诉我哪里错了吗？

Answer 1

如果您使用 ajax 提交表单，则您的 HTML 中不需要以下代码：

<form class="input-form-container" action="php/emailHandler.php" method="POST">

对于您的情况，也请考虑使用“按钮”而不是“提交”。请在下面找到一个工作版本：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>    
<!-- Some input there -->

<input id=name name=name value='TEST'><br>
<input id=company name=company><br>
<input id=phone name=phone><br>
<input id=email name=email value="testemail@ok.com"><br>
<textarea id=message name=message></textarea>

<input id="button" type="button" value="Invia" onclick='javascript:trigger();'>

<script>

function trigger()
{
        
        var name = $('#name').val();
        var company = $('#company').val();
        var phone = $('#phone').val();
        var email = $('#email').val();
        var message = $('#message').val();
       
        
$.ajax({
  method: "POST",
  url: "2.php",
  data: { 
  name : name, company: company, phone: phone, email : email, message : message
  }
})
  .done(function( msg ) {
  if (msg!="OK")
{
    alert(msg);
}
else
{   

alert("Done ! Email sent ! ....");

}

}); 
        
    }

</script>

对于 php，这是一个示例：

<?php

// just to trigger a test to check that the ajax works

echo $_REQUEST["email"];



/// codes to send email
/// after sending email, please echo "OK";
////
?>