如何防止PHP文件在提交联系表格后弹出

How do I prevent PHP file from popping up after submitting contact form?

本文关键字：表格 联系 提交 何防止 PHP 文件      更新时间：2023-09-26

现在，每当我点击网站上联系人表单上的提交按钮时，它都会将我带到www.mysite.com/php/function/email.php页面，而不是像我希望的那样在后台运行email.php。

该网站应该允许您提交联系人表格，然后按钮会逐渐消失，并在"您的消息已发送！"中淡入，然后淡入按钮。

HTML:

<form name="contact form" id='contact_form' method="post" action="php/function/email.php">
<div class="row half">
    <div class="6u">
        <input name="name" placeholder="Name" type="text" class="text" />
    </div>
    <div class="6u">
        <input name="email" placeholder="Email" type="email" class="text" />
    </div>
</div>
<div class="row half">
    <div class="12u">
        <textarea name="message" placeholder="Message"></textarea>
    </div>
</div>
<div class="row half">
    <div class="12u">
        <input id="submit" name="submit" type="submit" value="Send Message" class="button button-icon icon icon-envelope" />
    </div>
</div>
<p id="success" style="display:none">Your message has been sent! I'll get back to you soon!</p>
        <p id="error" style="display:none">Please fill in all the fields and try again!</p>

JS:

 $(document).ready(function(){
    $('#send_message').click(function(e){
        //Stop form submission & check the validation
        e.preventDefault();
        // Variable declaration
        var name = $('#name').val();
        var email = $('#email').val();
        var subject = $('#subject').val();
        var message = $('#message').val();
       // Disable submit button just after the form processed 1st time successfully.
        $('#send_message').attr({'disabled' : 'true', 'value' : 'Sending...' });
        /* Post Ajax function of jQuery to get all the data from the submission of the form as soon as the form sends the values to email.php*/
        $.post("email.php", $("#contact_form").serialize(),function(result){
            //Check the result set from email.php file.
            if(result == 'sent'){
                //If the email is sent successfully, remove the submit button
                 $('#submit').remove();
                //Display the success message
                $('#success').fadeIn(500);
            }else{
                //Display the error message
                $('#error').fadeIn(500);
                // Enable the submit button again
                $('#submit').removeAttr('disabled').attr('value', 'Send The Message');
            }
        });
    }
});    
};

PHP:

<?php
$name = $_POST['name'];
$email = $_POST['email'];
$message = $_POST['message'];
$from = 'From: Example'; 
$to = 'example@gmail.com'; 
$subject = 'Example Contact Form';
$body = "
From: $name
Email: $email
---------------
Message: 'n
$message";
if ($_POST['submit']) {              
    if (mail ($to, $subject, $body, $from)) { 
    echo 'sent';
} else { 
    echo 'failed';
}
}
?>

<input type="submit">的.click()事件实际上并不是导致重定向的原因。相反，它在<form>处变为.submit()事件。

你可以选择e.stopPropagation()，这样它就不会到达<form>。

//Stop form submission & check the validation
e.stopPropagation();

或者<form>的.submit()的preventDefault()。

$('#contact_form').submit(function (e) {
    e.preventDefault();
});

注意：您还应该考虑将代码移动到.submit()处理程序中，因为大多数浏览器支持提交<form>的其他方式，而不是实际单击<input type="submit">。

问题是您在#send_message上查找点击事件，但提交按钮的id为submit。所以点击事件永远不会发生。

相关文章：