Ad
Header ('location: Page.html'); Not Working, When Form Submitting By Ajax
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
Related Questions
- → How to update data attribute on Ajax complete
- → October CMS - Radio Button Ajax Click Twice in a Row Causes Content to disappear
- → Octobercms Component Unique id (Twig & Javascript)
- → Passing a JS var from AJAX response to Twig
- → Laravel {!! Form::open() !!} doesn't work within AngularJS
- → DropzoneJS & Laravel - Output form validation errors
- → Import statement and Babel
- → Uncaught TypeError: Cannot read property '__SECRET_DOM_DO_NOT_USE_OR_YOU_WILL_BE_FIRED' of undefined
- → React-router: Passing props to children
- → ListView.DataSource looping data for React Native
- → Can't test submit handler in React component
- → React + Flux - How to avoid global variable
- → Webpack, React & Babel, not rendering DOM
Ad