CODEWITHSUNDEEP
phphtmlformsform-submit
mweb2020
mweb2020

Reputation: 17

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

I have a contact form that takes a user's information and sends that information to my email by using php. That part works well, but when the user clicks the Submit button the page redirects to the php page itself. How can I prevent the page from redirecting to the php page and instead stay on the current page, while still submitting the form?

    <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 = "[email protected]";
$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!";
}

?>

Upvotes: 1

Views: 209

Answers (1)

KUMAR
KUMAR

Reputation: 1995

View Part:-

<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 PART:-

  <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 = "[email protected]";
$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';
} 

?>

Note:- for more info regarding serialize(); method.

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

Upvotes: 1

Related Questions