Jump to content
Sign in to follow this  
Spunky

Redirect after form submit

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');

?>

 

Share this post


Link to post
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.

Share this post


Link to post
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?

Share this post


Link to post
Share on other sites

If you don't cancel the default behavior then the form submits, the page refreshes, and your code doesn't run.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

×
×
  • Create New...