Ad

Header ('location: Page.html'); Not Working, When Form Submitting By Ajax

- 1 answer

I'm getting no errors, but when submit is hit, form is cleared, email is sent but no redirection happens. I have also tried to redirect using script, with now luck.

Form Page

 <script>
  $(function(){
  $('#form3').submit(function(e){

      //Prevent the default form action
    e.preventDefault();

function validateEmail($email2) {
 var emailReg = /^([\w-\.][email protected]([\w-]+\.)+[\w-]{2,4})?$/;
 if( !emailReg.test( $email2 ) ) {
    return false;
   } else {
    return true;
  }
}
    var thisForm = $(this);

    $("#emailError2").hide();
    $("#firstnameError2").hide();
    $("#lastnameError2").hide();
    $("#cityError2").hide();
    $("#phoneError2").hide();
    $("#countryError2").hide();
    $("#messageError2").hide();

    var errors = false;

    var email2 = $("input[id='email2']").val();
    var firstname2 = $("input[id='firstnam2e']").val();
    var lastname2 = $("input[id='lastname2']").val();
    var phone2 = $("input[id='phone2']").val();
    var business = $("input[id='business']").val();
    var nbusiness = $("input[id='nbusiness']").val();
    var message2 = $("textarea[id='message2']").val();



    if(( !validateEmail(email2)) || (email2=="")) {
     errors = true; 
     $("#emailError2").fadeIn();

     return;

    }

    if(firstname2=="") {
     errors = true; 
     $("#firstnameError2").fadeIn();
     return;

    }

    if(lastname2=="") {
     errors = true; 
     $("#lastnameError2").fadeIn();
     return;

    }

    if(business=="") {
     errors = true; 
     $("#cityError2").fadeIn();
     return;

    }

     if(phone2=="") {
     errors = true; 
     $("#phoneError2").fadeIn();
     return;

    }

    if(errors == false){

    //Hide the form
    $(this).fadeOut(function(){
      //Display the "loading" message
      $("#loading2").fadeIn(function(){
        //Post the form to the send script
        $.ajax({
          type: 'POST',
          url: thisForm.attr("action"),
          data: thisForm.serialize(),
          //Wait for a successful response
          success: function(data){
            //Hide the "loading" message
            $("#loading2").fadeOut(function(){
              //Display the "success" message
              $("#success2").text(data).fadeIn();
            });
          }
        });
      });
    });

    }

  })
});

I have a whole whack form inputs here, followed by:

<div class="contactRow" style="height:160px; margin-top:91px;">
<textarea name='message2' id="message2" rows="8" cols="38" placeholder="Comments"></textarea>   </div>
 <div class="contactRow"><center><input type="checkbox" name="I-agree" required>I agree to the<a   target="_blank" rel="nofollow noreferrer" href="http://www.-------------.com/wp/terms-conditions" target="_blank">Terms and Conditons</a></input>  </center><div class="contactSubmit"><input type='submit' value="Submit"></div></div>

seperate.php page to send off email

<?php
if (isset($_POST['email2']))
//if "email" is filled out, send email
{
//send email
$email2 = $_POST['email2'] ;
$firstname2 = $_POST['firstname2'] ;
$lastname2 = $_POST['lastname2'] ;
$nbusiness = $_POST['nbusiness'] ;
$phone2 = $_POST['phone2'] ;
$business = $_POST['business'] ;
$message2 = $_POST['message2'] ;

$sizeof2 = $_POST['sizeof2'] ;
$whattype2 = $_POST['whattype2'] ;
$whoare2 = $_POST['whoare2'] ;
$wheredid2 = $_POST['wheredid2'] ;

$comment2 = "$message2 \n\n $firstname2 \n $lastname2 \n $phone2 \n $business \n $nbusiness \n     $email2 \n $sizeof2 \n $whattype2 \n $whoare2  \n $wheredid2 \n\n";

 /*$headers = 'From: [email protected]' . "\r\n" .
'Reply-To: [email protected]' . "\r\n" .
'X-Mailer: PHP/' . phpversion();*/

$headers2 = 'From: '.$email2."\r\n" .
    'Reply-To: '.$email2."\r\n" .
    'X-Mailer: PHP/' . phpversion();

//[email protected]
mail("[email protected]",  "-------------: ".$firstname2, $comment2, $headers2);
header ('Location: thankyou.html');
exit ();
}else{
echo "There was a problem with the registration";
}
?>
Ad

Answer

Since your form submit results in an AJAX request, you should redirect upon successful completion of that request.

$.ajax({
  type: 'POST',
  ...
  // Wait for a successful response
  success: function(data) {
      ...
      window.location.href = "thankyou.html"; // <-- REDIRECT HERE
  }
});

You can also use window.location.replace("thankyou.html"); if you do not wish put the originating page in the session history.

In you php you should probably replace the header ('Location: thankyou.html'); with code returning a message or whatever you want to the AJAX request (e.g. echo "Success!";).

Ad
source: stackoverflow.com
Ad