Problems with redirect on contact form

Question

I cant figure out why this wont redirect when everything looks in place.

I have used Location /path but just doesn't move from the main page.

Email sends and form is fine but cant get to redirect to thank you page or errors to show up.

Here is my code JS / PHP/ HTML below

Thanks in advance and hopefully you can spot something

JS:

/* ==================================
       Hero Form Validation
    =====================================*/
$('#hero-submit').click(function(e) {

  // Stop form submission & check the validation
  e.preventDefault();

  // Variable declaration
  var error = false;
  var fname = $('#hero-fname').val();
  var email = $('#hero-email').val();
  var username = $('#hero-username').val();

  // Form field validation
  if (fname.length == 0) {
    var error = true;
    $('#hero-fname').parent('div').addClass('field-error');
  } else {
    $('#hero-fname').parent('div').removeClass('field-error');
  }
  if (email.length == 0 || email.indexOf('@') == '-1') {
    var error = true;
    $('#hero-email').parent('div').addClass('field-error');
  } else {
    $('#hero-email').parent('div').removeClass('field-error');
  }
  if (username.length == 0) {
    var error = true;
    $('#hero-username').parent('div').addClass('field-error');
  } else {
    $('#hero-username').parent('div').removeClass('field-error');
  }

  if (error == true) {
    $('#hero-error-notification').addClass('show-up');
  } else {
    $('#hero-error-notification').removeClass('show-up');
  }

  if (error == false) {
    $.post("hero-form.php", $("#register-form").serialize(), function(result) {
      if (result == 'sent') {
        $('#hero-success-notification').addClass('show-up');
        $('#hero-submit').addClass('disabled');
      }
    });
  }
});


// Function to close the Notification
$('a.notification-close').click(function() {
  $(this).parent('div').fadeOut(200);
});

PHP:

<?php 
$subject='Register New Account on Urip Landing Page'; // Subject of your email
$to='adam@test.com'; //Recipient's or Your E-mail
$headers='MIME-Version: 1.0' . "\r\n";
$headers .="From: " . $_POST['heroEmail'] . "\r\n"; // Sender's E-mail
$headers .='Content-type: text/html; charset=iso-8859-1' . "\r\n";
$message .='ACCOUNT DETAILS: ' . "<br>";
$message .='Username: ' . $_POST['heroUsername'] . "<br>";
$message .='First Name: ' . $_POST['heroFname'] . "<br>";
$message .='Last Name: ' . $_POST['heroLname'] . "<br>";
$message .='Email Address: ' . $_POST['heroEmail'] . "<br>";
$message .='Phone Number: ' . $_POST['heroPhone'];
if (mail($to, $subject, $message, $headers)) {
  header('location: /page2.html');
}

else {
  header('location: /page3.html');
}

?>

HTML

<form class="register-form margin-top-32 margin-bot-5" id="register-form" method="post">
  <div class="row">

    <div class="col-lg-6 col-md-6">
      <div class="required-field">
        <input name="heroFname" id="hero-fname" class="hero-input" type="text" placeholder="First Name">
      </div>
      <!--/ .required-field -->
    </div>

    <div class="col-lg-6 col-md-6">
      <input name="heroLname" id="hero-lname" class="hero-input" type="text" placeholder="Last Name">
    </div>

    <div class="col-lg-12 col-md-12">
      <div class="required-field">
        <input name="heroUsername" id="hero-username" class="hero-input" type="text" placeholder="Choose Username">
      </div>
      <!--/ .required-field -->
    </div>

    <div class="col-lg-12 col-md-12">
      <div class="required-field">
        <input name="heroEmail" id="hero-email" class="hero-input" type="text" placeholder="Email Address">
      </div>
      <!--/ .required-field -->
    </div>

    <div class="col-lg-8 col-md-8">
      <input name="heroPhone" id="hero-phone" class="hero-input" type="text" placeholder="Phone Number">
    </div>

    <div class="col-lg-4 col-md-4">
      <button id="hero-submit" type="submit" class="submit-btn">Create</button>
    </div>

  </div>
</form>
<!--/ .register-form -->

Answer 1

The problem is your php header redirect:

header("Location: $redirect_thankyou"); 

This causes the browser to load the redirected page in your ajax call:

$.post("hero-form.php", $("#register-form").serialize(),function(result){

So result will contain the html contents of the page you have redirect to and not just the word sent.

You need to remove the header() redirects in php and instead send the content back that your ajax call in jQuery is expecting. Json would be better suited for this, but a single string should work as well.

Answer 2

php

if (mail($to, $subject, $message, $headers)) {
    echo $redirect_thankyou; 
    die(); 
} 
else 
{ 
    echo $redirect_error"; 
    die(); 
} 

javascript

$.post("hero-form.php", $("#register-form").serialize(),function(result){
    if(result){
       location.replace(result);
       $('#hero-success-notification').addClass('show-up');
       $('#hero-submit').addClass('disabled');
    }
});