Ajax php contact form without redirect

Question

i have a page where i use a contact Form. Now when i click on "submit" the form redirect me to the next page.

But i want that the page dont redirect but show the success message in my Form or load the page new and bring the message. But i dont want that it redirect to a second page..

my page: http://bit.ly/1PLbZcL

This is my html code:

 <form name="htmlform" method="post" action="contact.php">
 <div class="large-6 columns">
   <input class="textfield" type="text" name="last_name" id="name" placeholder="Name" />
   <input type="text" name="email" id="email" placeholder="E-Mail Adresse" value="" />
   </div>
   <div class="large-6 columns">
   <input type="text" name="first_name" id="vorname" placeholder="Vorname" />
   <input type="text" name="termin" id="wunschtermin" placeholder="Wunschtermin" />
</div>

    <ul>
      <input id="checkbox1" type="checkbox"> 
      <p style="float:left;">Ja, ich möchte den<br> 
<b>we</b>learning-Newsletter abonnieren<br> und immer auf dem Laufenden<br> bleiben.<br></p>
      <input type="submit" class="submit" class="button" id="submit" value="Absenden" />

    </ul>

  </div> 
  </div>
</form>

And this is my php code:

<?php
if(isset($_POST['email'])) {

// CHANGE THE TWO LINES BELOW
$email_to = "dierig@be-virtual.org";

$email_subject = "website html form submissions";


function died($error) {
    // your error code can go here
    echo "We are very sorry, but there were error(s) found with the  form you submitted. ";
    echo "These errors appear below.<br /><br />";
    echo $error."<br /><br />";
    echo "Please go back and fix these errors.<br /><br />";
    die();
}

// validation expected data exists
if(!isset($_POST['first_name']) ||
    !isset($_POST['last_name']) ||
    !isset($_POST['email']) ||
    !isset($_POST['termin'])) {
    died('We are sorry, but there appears to be a problem with the form you submitted.');       
}

$first_name = $_POST['first_name']; // required
$last_name = $_POST['last_name']; // required
$email_from = $_POST['email']; // required
$termin = $_POST['termin']; // not required

$error_message = "";
$email_exp = '/^[A-Za-z0-9._%-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,4}$/';
 if(!preg_match($email_exp,$email_from)) {
$error_message .= 'The Email Address you entered does not appear to be valid.<br />';
  }
 $string_exp = "/^[A-Za-z .'-]+$/";
 if(!preg_match($string_exp,$first_name)) {
 $error_message .= 'The First Name you entered does not appear to be    
valid.<br />';
}
if(!preg_match($string_exp,$last_name)) {
$error_message .= 'The Last Name you entered does not appear to be  valid.<br />';
}
 if(strlen($error_message) > 0) {
died($error_message);
}
 $email_message = "Form details below.\n\n";

function clean_string($string) {
  $bad = array("content-type","bcc:","to:","cc:","href");
  return str_replace($bad,"",$string);
}

$email_message .= "First Name: ".clean_string($first_name)."\n";
$email_message .= "Last Name: ".clean_string($last_name)."\n";
$email_message .= "Email: ".clean_string($email_from)."\n";
$email_message .= "termin: ".clean_string($termin)."\n";


 // create email headers
 $headers = 'From: '.$email_from."\r\n".
 'Reply-To: '.$email_from."\r\n" .
 'X-Mailer: PHP/' . phpversion();
 @mail($email_to, $email_subject, $email_message, $headers);  
 ?>

<div class="thankyou">
Vielen Dank! Wir werden uns umgehend mit Ihnen in Verbindung setzen.
Sie werden jeden Moment weitergeleitet.
</div>



<?php
header("refresh:1;index.html");
}
die();
?>

Can anyone explain me how i can realize my idea?

Answer 1

AJAX is what you would be looking for. I usually let the server handle data parsing and validations. This would do what you want. Just pass the form data to the requested page

function submitComment(formData)
{
    var form = $("#comment_form"),
    message = $("#message");

      $.ajax({
        url: form.attr('action'),
        type: 'post',
        dataType: 'json',
        data: formData,
        success: function(data, status, xhr) {
            if(data.error)
            {
                ...
                Error on page requested
                ...
            }
            else
            {
                ...
                No error on page requested
                ...
            }
        },
        error: function(xhr, status, errorThrown) {
            message.removeClass().addClass('error').html("There was an error processing the form! Error: " + status + " " + errorThrown + "<br>").fadeIn();
        }
    });
}

Answer 2

with ajax, something like this, but i dont tested it, so there can be some mistakes, anyway, take look at this: http://www.w3schools.com/jquery/jquery_ajax_get_post.asp

$('form').submit(function(e)){
  e.preventDwfault();
  $.post('contact.php',{
    last_name : $('#name').val(),
    email : $('#email').val(),
    firstname : $('#vorname').val(),
    termin : $('#wunschtermin').val()
  },function(data){
    $('#your_alert_span_in_form').html(data);
  })
})