如何防止 php 联系表单重定向到另一个页面？

Question

我有一个联系表，它获取用户信息并使用 php 将该信息发送到我的电子邮件。该部分运行良好，但是当用户单击“提交”按钮时，页面将重定向到 php 页面本身。如何防止页面重定向到 php 页面，而是停留在当前页面，同时仍然提交表单？

    <div class="contact_container">
    <form id="contact" action="mailer.php" method="post" name="myemailform">
        <fieldset>
            <input placeholder="Full Name *" type="text" name="name" required autofocus>
        </fieldset>
        <fieldset>
            <input placeholder="Email Address *" type="email" name="email" required>
        </fieldset>
        <fieldset>
            <input placeholder="Phone Number" type="tel" name="phone" required>
        </fieldset>
        <fieldset>
            <button name="submit" type="submit" id="contact-submit" data-submit="...Sending">Submit</button>
        </fieldset>
    </form>
</div>

php

<?php

if(isset($_POST['submit'])) {
$to = "example@email.com";
$subject = "Business Service Inquiry";
$name_field = $_POST['name'];
$email_field = $_POST['email'];
$phone_field = $_POST['phone'];
 
$body = "From: $name_field\n E-Mail: $email_field\n Phone Number: $phone_field";
 
echo "Data has been submitted to $to!";
mail($to, $subject, $body);
} else {
echo "blarg!";
}

?>

Answer 1

查看部分：-

<div class="contact_container">
    <div class="output_message"></div>          //empty div with class output_message.
    <form method="post" class="myform" action="">
        <fieldset>
            <input placeholder="Full Name *" type="text" name="name" required autofocus>
        </fieldset>
        <fieldset>
            <input placeholder="Email Address *" type="email" name="email" required>
        </fieldset>
        <fieldset>
            <input placeholder="Phone Number" type="tel" name="phone" required>
        </fieldset>
        <fieldset>
            <button name="submit" type="submit" id="contact-submit" data-submit="...Sending">Submit</button>
        </fieldset>
    </form>
</div>

jQuery / AJAX 部分：-

  <script>
           $(document).ready(function() {         //when Document is ready.
           $('.myform').on('submit',function(){   //on form submit

           // Add text 'loading...' right after clicking on the submit button. 
           $('.output_message').text('Loading...'); 

           var form = $(this);       //target current form.
                $.ajax({           
                url: "email.php",    //URL which sents to server side.        
                method: "POST",      //method POST.
                data: form.serialize(),  // taking all form data.
                success: function(result){    //successs function
            if (result == 'success'){          //after success function. 
                $('.output_message').text('Message Sent!');  
            } else {
                $('.output_message').text('Error Sending email!');
            }
        }
    });

    // Prevents default submission of the form after clicking on the submit button. 
    return false;   
  });
  });

</script>

email.php

<?php

if(isset($_POST['submit'])) {
$to = "example@email.com";
$subject = "Business Service Inquiry";
$name_field = $_POST['name'];
$email_field = $_POST['email'];
$phone_field = $_POST['phone'];
 
$body = "From: $name_field\n E-Mail: $email_field\n Phone Number: $phone_field";
 
$send_email = mail($to, $subject, $body);

echo ($send_email) ? 'success' : 'error';
} 

?>

注意：- 有关 serialize(); 方法的更多信息。

https://api.jquery.com/serialize/

如何防止 php 联系表单重定向到另一个页面？

How to prevent php contact form from redirecting to another page?

html

php

forms

form-submit