How can I create a redirect form

Question

I have create one form, and after someone submits, that form they will be redirected to another page. And the problem that I faced now is after I submit the form goes to a blank page and just loading with black background.

I have tried with http and without http at the front of the redirect link, still fail

<?php

$errors = array();

// Check if name has been entered
if (!isset($_POST['name'])) {
    $errors['name'] = 'Please enter your name';
}
// Check if name has been entered
if (!isset($_POST['phone'])) {
    $errors['phone'] = 'Please enter your phone number';
}

// Check if email has been entered and is valid
if (!isset($_POST['email']) || !filter_var($_POST['email'], FILTER_VALIDATE_EMAIL)) {
    $errors['email'] = 'Please enter a valid email address';
}

//Check if message has been entered
if (!isset($_POST['message'])) {
    $errors['message'] = 'Please enter your message';
}

$errorOutput = '';

if(!empty($errors)){

    $errorOutput .= '<div class="alert alert-danger alert-dismissible" role="alert">';
    $errorOutput .= '<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>';

    $errorOutput  .= '<ul>';

    foreach ($errors as $key => $value) {
        $errorOutput .= '<li>'.$value.'</li>';
    }

    $errorOutput .= '</ul>';
    $errorOutput .= '</div>';

    echo $errorOutput;
    die();
}
else{
    $response = ['success' => true];
    echo json_encode($response);
    exit;
}



$name = $_POST['name'];
$phone = $_POST['phone'];
$email = $_POST['email'];
$message = $_POST['message'];
$from = $email;
$to = 'support@waveevo.com';  // please change this email id
$subject = 'Contact Enquiry from Pentair Everpure Landing Page';

$body = " From: $name\n Phone Number: $phone\n E-Mail: $email\n Message:\n $message";

$headers = "From: ".$from;


//send the email
$result = '';
if (mail ($to, $subject, $body, $headers)) {
    $result .= '<div class="alert alert-success alert-dismissible" role="alert">';
    $result .= '<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>';
    $result .= 'Contact form successfully submitted. Thank you, you will be redirected to download our brochure!';
    $result .= '</div>';

    echo $result;
    die();
}

$result = '';
$result .= '<div class="alert alert-danger alert-dismissible" role="alert">';
$result .= '<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>';
$result .= 'There was an error while submitting the form. Please try again later';
$result .= '</div>';

echo $result;
?>

My JS query code,

 $("#contactForm").submit(function (e) {

        e.preventDefault();
        var $ = jQuery;

        var postData = $(this).serializeArray(),
            formURL = $(this).attr("action"),
            $cfResponse = $('#contactFormResponse'),
            $cfsubmit = $("#cfsubmit"),
            cfsubmitText = $cfsubmit.text();

        $cfsubmit.text("Sending...");


        $.ajax(
            {
                url: formURL,
                type: "POST",
                data: postData,
                success: function (data) {
                    $cfResponse.html(data);
                    $cfsubmit.text(cfsubmitText);
                    $('#contactForm input[name=name]').val('');
                    $('#contactForm input[name=email]').val('');
                    $('#contactForm textarea[name=message]').val('');
                    window.location.replace("http://www.w3schools.com");
                },
                error: function (data) {
                    alert("Error occured! Please try again");
                }
            });

        return false;

    });

This is the result:

Answer 1

When i look at your screenshot, than i'll guess, that you submit your form with ajax. So thats nonesense to set an redirect in PHP when you submit over an ajax-request.

So the solution is, that you check your ajax response for e.g. success => true and than do an

window.location.replace("http://www.w3schools.com");

=> https://www.w3schools.com/howto/howto_js_redirect_webpage.asp

EDIT: PHP-Response: Instead of

header("Location: https://pentairasia.com/index.html");
die();

Write something like

$response = ['success' => true];
echo json_encode($response);
exit;

And your JS-Script (for jQuery) could you edit with:

$.ajax({
  method: "POST",
  url: "some.php",
  data: { name: "John", location: "Boston" }
}).done(function( json ) {
  // CHANGES START*****
  if(json.success) {
    window.location.replace("http://www.w3schools.com");
  }
  // CHANGES END*****
});