Non refreshing form

[alexwdesign]

I have a form right now with js validation and php submit. My question is, how do I make it so that when the data is submitted the page doesn't refresh, like my php tells it to. I'd also like to make it so that the form disappears and displays a thank you message instead, but that's much later. Thanks for any help!


$name = $_REQUEST['name'] ;
$email = $_REQUEST['email'] ;
$message = $_REQUEST['message'] ;

mail( "awedderien@gmail.com", "Portfolio Contact Form",
$message, "From: $email" );
header( "Location: http://www.example.com/thankyou.html" );


function checkForm() {

name = document.getElementById("name").value;
email = document.getElementById("email").value;
message = document.getElementById("message").value;

if (name == "") {
hideAllErrors();
document.getElementById("nameError").style.display = "inline";
document.getElementById("name").select();
return false;
} else if (email == "") {
hideAllErrors();
document.getElementById("emailError").style.display = "inline";
document.getElementById("email").select();
return false;
} else if (email.indexOf("@") < 1) { // must contain @, and it must not be the first character
hideAllErrors();
document.getElementById("emailError").style.display = "inline";
document.getElementById("email").select();
return false;
} else if (email.lastIndexOf(".") <= email.indexOf("@")) { // last dot must be after the @
hideAllErrors();
document.getElementById("emailError").style.display = "inline";
document.getElementById("email").select();
return false;
} else if (email.indexOf("@") == email.length) { // @ must not be the last character
hideAllErrors();
document.getElementById("emailError").style.display = "inline";
document.getElementById("email").select();
return false;
} else if (email.indexOf("..") >=0) { // two periods in a row is not valid
hideAllErrors();
document.getElementById("emailError").style.display = "inline";
document.getElementById("email").select();
return false;
} else if (email.indexOf(".") == email.length) { // . must not be the last character
hideAllErrors();
document.getElementById("emailError").style.display = "inline";
document.getElementById("email").select();
return false;
} else if (message == "") {
hideAllErrors();
document.getElementById("messageError").style.display = "inline";
document.getElementById("message").select();
document.getElementById("message").focus();
return false;
}

return true;
}

function hideAllErrors() {
document.getElementById("nameError").style.display = "none"
document.getElementById("emailError").style.display = "none"
document.getElementById("messageError").style.display = "none"

}


<form name="contact_form" method="post" onsubmit="return checkForm();" action="Scripts/mail.php">

<label for="name">Name</label><h5>(required)</h5>
<input id="name" name="name" type="text" /><br />
<div class="error" id="nameError">Required: Please enter your name.<br /></div><br />


<label for="email">Email</label><h5>(required)</h5>
<input id="email" name="email" type="text" /><br />
<div class="error" id="emailError">Required: Please enter a valid email address.<br /></div><br />

<label for="message">Message</label><h5>(required)</h5>
<textarea name="message" id="message"</textarea><br />
<div class="error" id="messageError">Required: Please enter a message.<br /></div><br />

<button type="submit" id="submit_btn" value="Submit">Send</button><br />
</form>

[magicyte]

I'm sorry, but what you are trying to do is impossible (unless someone else on these forums says elsewise). You cannot NOT REFRESH a form. It must be refreshed. If you don't want it to refresh, use AJAX, PHP, and XML.

-magicyte

[alexwdesign]

That's what I was trying to do actually. I want to use ajax, but I'm not entirely sure how.

[clueful]

I have a form right now with js validation and php submit. My question is, how do I make it so that when the data is submitted the page doesn't refresh, like my php tells it to. I'd also like to make it so that the form disappears and displays a thank you message instead, but that's much later. Thanks for any help!
You can use the onsubmit handler to copy all the data to another form within a hidden iframe, submit that form, hide the current form then return false. If JS is unavailable, the visible form just submits conventionally.

[magicyte]

But something STILL has to be submitted, either refreshing or going to a new page.

By the way, nothing in your code example displays AJAX.

Try using an AJAX tutorial at http://www.w3schools.com/. It teaches you how to parse AJAX and XML, plus all of this other JavaScripty, (X)HTMLy stuff.

-magicyte