CODEWITHSUNDEEP
javascriptphphtmlajaxforms
Jerry Crews
Jerry Crews

Reputation: 47

How to stay on page after submission of form

I've looked for days to try and find an answer to my specific problem, but I am unable to do so. Please help.

I have a form on my website that once clicked, should send an email. I want to do this while staying on the same page and changing the div from a form to an image.

This is the code I've managed to scavenge from the internet.

Please give advice if you can in the most Barney style possible.
Thank you in advance to anyone that may be able to assist. 

jQuery(document).ready(function(){

    jQuery('.contact').submit( function() {

$.ajax({
      type: "POST",
      url: "contact-form-handler.php",
      data: dataString,
      success: function() {
        $('#contact_form').html("<div id='message'></div>");
        $('#message').html("<img src='thankyou.jpg' style='width:100%'/>")
        .append("<p>We will be in touch soon.</p>")
        .hide();
        });
      }
    });
        return false;

});
<form method="post" action="" name="contact" id="contact" class="w3-container w3-light-grey w3-margin">

  <div class="w3-row w3-section">
    <div class="w3-col" style="width:50px"><i class="w3-xxlarge fa fa-user"></i></div>
    <div class="w3-rest">
      <input class="w3-input w3-border" required name="name" id="name" type="text" placeholder="Name">

    </div>
  </div>

  <div class="w3-row w3-section">
    <div class="w3-col" style="width:50px"><i class="w3-xxlarge fa fa-envelope-o"></i></div>
    <div class="w3-rest">
      <input class="w3-input w3-border" required name="email" id="email" type="text" placeholder="Email">

    </div>
  </div>

  <div class="w3-row w3-section">
    <div class="w3-col" style="width:50px"><i class="w3-xxlarge fa fa-pencil"></i></div>
    <div class="w3-rest">
      <input id="message" class="w3-input w3-border" required name="message" type="text" placeholder="Message">

    </div>
  </div>

  <p class="w3-center">
    <input type="submit" name="submit" class="button w3-section w3-black w3-ripple" id="submit_btn" value="Send" />
  </p>


</form>

`

<?php
$errors = '';
$myemail = '[email protected]';//<-----Put Your email address here.
if(empty($_POST['name'])  || 
   empty($_POST['email']) || 
   empty($_POST['message']))
{
    $errors .= "\n Error: all fields are required";
}

$name = $_POST['name']; 
$email_address = $_POST['email']; 
$message = $_POST['message']; 

if (!preg_match(
"/^[_a-z0-9-]+(\.[_a-z0-9-]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,3})$/i", 
$email_address))
{
    $errors .= "\n Error: Invalid email address";
}

if( empty($errors))
{
	$to = $myemail; 
	$email_subject = "Contact form submission: $name";
	$email_body = "You have received a new message. ".
	" Here are the details:\n Name: $name \n Email: $email_address \n Message: \n $message"; 
	
	$headers = "From: $myemail\n"; 
	$headers .= "Reply-To: $email_address";
	
	mail($to,$email_subject,$email_body,$headers);
   
    
} 
?>

Upvotes: 1

Views: 661

Answers (3)

Zolt&#225;n Fekete
Zolt&#225;n Fekete

Reputation: 594

The <form> has it as a default behaviour, to redirect the user to the URL on submit. The URL taken from action attribute.

In order to prevent this redirection, you have to tell the browser to: "DO NOT redirect".

Short: e.preventDefault()

Long: In the submit callback, your function take a parameter. Simply name it like: e. This is an object, and it has a function preventDefault. This function prevents the default behaviour: redirect. Do this call in the first row of the callback function.

Upvotes: 2

Nadir Latif
Nadir Latif

Reputation: 3763

Well you can attach the event handler to your submit button and change the submit button to a simple button, so it will not submit the form when it is clicked. The button code can be changed to:

<input type="button" name="submit" class="button w3-section w3-black w3-ripple" id="submit_btn" value="Send" />

The event handling code can be changed to:

jQuery('#submit_btn').submit( function() {

};

Upvotes: 0

user6247920
user6247920

Reputation:

If I understand your question, You need to use preventDefault() when you call the AJAX In order to prevent the submission (by default), so you can do something like this:

jQuery(document).ready(function(){
    jQuery('.contact').submit( function($e) {

        $e.preventDefault();
        $.ajax({
            type: "POST",
            url: "contact-form-handler.php",
            data: dataString,
            success: function() {
                $('#contact_form').html("<div id='message'></div>");
                $('#message').html("<img src='thankyou.jpg' style='width:100%'/>")
                .append("<p>We will be in touch soon.</p>")
                .hide();
            });
        }
    });
    return false;

});

Learn more about preventDefault(), and also about defaultPrevented on MDN.

Upvotes: 0

Related Questions