Jump to content

Redirect after form submit


Spunky

Recommended Posts

I have a form that appears in a modal and once the user submits it successfully, the contents get sent to an email.

I tried to use JavaScript to redirect but I realize that since there is a post-back, this JavaScript is probably not being hit. I don't even see the Thank You! text that I included. But that's OK, once I can redirect, I can handle a different way to let the user know their form was sent successfully. Looking into redirecting with PHP seemed simple enough but I can't figure out why it is not working for my scenario.

Below is my code. The result in Chrome is that all the content that the user filled out in the form end up in the URL such as https://www.example.com/?fname=Test&lname=Test&email=schoell.christine%40gmail.com&phone=&message=testing#openModal - so the modal actually stays open but the form also becomes unusable. IE the result is nearly the same except the modal doesn't appear again.

There's two things that I want to accomplish: First, I want to get rid of the stuff in the URL, originally that seemed as simple as redirecting to the same page. But now I'd like to also redirect the user somewhere else. I specify this second thing because I don't just want a solution to remove the text in the URL.

Right now, nothing different occurs with the PHP redirect I added. Can someone help me see what I am missing? I'll be honest, I wrote this code years ago so I can't even remember exactly how the text ends up in the URL as I am not savvy in the AJAX being used. If I recall, it has something to do with using the POST method. The only thing new that I have added is the header('Location: https://www.example.com') to the PHP.

 

function validateForm(){
    var x = document.forms["contact_form"]["fname"].value;
    var y = document.forms["contact_form"]["lname"].value;
    var z = document.forms["contact_form"]["email"].value;
    //var v = document.forms["contact_form"]["phone"].value;
    //var k = document.forms["contact_form"]["message"].value;
    if (x == null || x == "" || y == null || y == "" || z == null || z == "") {
        return false;
    }
    else{
        submitForm();
    }
}

$( "form" ).submit(function( event ) {
  event.preventDefault();
});

function submitForm(){
	var xmlhttp = new XMLHttpRequest();

	var fn = document.getElementById('fname').value;
	var ln = document.getElementById('lname').value;
	var e = document.getElementById('email').value;
	var p = document.getElementById('phone').value;
	var m = document.getElementById('message').value;

	var userdata = "firstname="+fn+"&lastname="+ln+"&email="+e+"&phone="+p+"&message="+m;
	//var userdata = "firstname=Christine&lastname=Schoell&email=email@email.com&phone=123&message=hi"

	xmlhttp.open("POST","submit_form.php",true);

	xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
	
	xmlhttp.onreadystatechange = function(){
		if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
			retrieve = xmlhttp.responseText;
			document.getElementById("status").innerHTML = "Thank you!";
			window.location.href='https://www.example.com';
		}
		else{
			document.getElementById("status").innerHTML = "Uh oh!"
		}
	}

    xmlhttp.send(userdata);
    document.getElementById("status").innerHTML = "processing...";

    return false;
}
<?php

$ToEmail = 'example@example.com'; 

$EmailSubject = 'Site contact form'; 

$mailheader = "From: ".$_POST["email"]."\r\n"; 

$mailheader .= "Reply-To: ".$_POST["email"]."\r\n"; 

$mailheader .= "Content-type: text/html; charset=iso-8859-1\r\n"; 

$MESSAGE_BODY = "First Name: ".$_POST["firstname"]."Last Name: ".$_POST["lastname"].""; 

$MESSAGE_BODY .= "Phone: ".$_POST["phone"]."";

$MESSAGE_BODY .= "Email: ".$_POST["email"]."";

$MESSAGE_BODY .= "Comment: ".nl2br($_POST["message"]).""; 

@mail($ToEmail, $EmailSubject, $MESSAGE_BODY, $mailheader) or die ("Failure");

header('Location: https://www.example.com');

?>

 

Link to comment
Share on other sites

It sounds like you're not canceling the form submit event, so it's defaulting to the current page and the get method.   You can verify that with an alert or console.log statement.

Redirecting the ajax request isn't going to cause the browser to automatically redirect the main page, it just redirects the ajax request.  If you want to redirect the user after the ajax response comes back then you need to redirect them using Javascript.  You can have the PHP code return the URL to redirect to if it might change, and then actually redirect using Javascript.

Link to comment
Share on other sites

On 4/2/2019 at 8:05 PM, justsomeguy said:

It sounds like you're not canceling the form submit event, so it's defaulting to the current page and the get method.   You can verify that with an alert or console.log statement.

Redirecting the ajax request isn't going to cause the browser to automatically redirect the main page, it just redirects the ajax request.  If you want to redirect the user after the ajax response comes back then you need to redirect them using Javascript.  You can have the PHP code return the URL to redirect to if it might change, and then actually redirect using Javascript.

Thanks for the reply!

I thought I am trying to do a redirect with JavaScript after the AJAX response comes back with the window.location.href line?:

xmlhttp.onreadystatechange = function(){
		if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
			retrieve = xmlhttp.responseText;
			document.getElementById("status").innerHTML = "Thank you!";
			window.location.href='https://www.example.com';
		}
		else{
			document.getElementById("status").innerHTML = "Uh oh!"
		}
	}

I figured it was because it doesn't have a chance to get to that line. But then it must have to do with what you said about canceling the form submit event. But, through some research, I am unable to determine what you mean by canceling the form submit event. Why do I want to cancel it?

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...