PDA

View Full Version : Non refreshing form



alexwdesign
09-01-2008, 08:23 PM
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
09-01-2008, 10:04 PM
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
09-01-2008, 11:53 PM
That's what I was trying to do actually. I want to use ajax, but I'm not entirely sure how.

clueful
09-02-2008, 12:23 AM
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
09-02-2008, 12:57 AM
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