Non refreshing page on form submit

alexwdesigns

09-02-2008, 01:21 AM

hi guys I'm new to the forum. Anyway, I need help on this little problem. I have my form and validation set up with js, and a form submit through php. What I want to do is have the page NOT refresh on submit, and instead pop up a hidden field saying thank you, and I do realize the PHP will need to be replaced. Can anyone guide me to a tutorial, or walk me through it? Here's the code for the form validation and php.

<?php

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

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

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>

[/PHP]

A1ien51

09-02-2008, 04:55 PM

Submit the form to a hidden iframe by setting the form's target or look into the 1000's of examples of Ajax form submissions online.

Eric

ohgod

09-02-2008, 08:05 PM

http://www.prototypejs.org/api/ajax/updater

hinch

09-02-2008, 10:23 PM

I've litterally just worked out some very basic ajax stuff myself tonight.

It consists of 2 pages an index.php and an xml.php page.

You should be able to use these as a basis of your registration form.

index.php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>Ajax test</title>
<script type="text/javascript" src="js/prototype.js"></script>
<script>
function dbadd() {
var inputtext = $F('inputtext');
var url = './xml.php';
var pars = 'action=add&input=' + inputtext;
var myAjax = new Ajax.Updater({success: 'result'},url,
{
method:'post',
parameters: pars,
onFailure: reportError
});
}
function dbget() {
var url = './xml.php';
var pars = 'action=get';
var myAjax = new Ajax.Updater({success: 'retrieved'},url,
{
method:'post',
parameters: pars,
onFailure: reportError
});
}
function dbupdate() {
var updatetext = $F('updatetext');
var updateid = $F('updateid');
var url = './xml.php';
var pars = 'action=update&input=' + updatetext + '&id=' + updateid;
var myAjax = new Ajax.Updater({success: 'confirmupdate'},url,
{
method:'post',
parameters: pars,
onFailure: reportError
});
}
function reportError(request)
{
alert('Sorry. There was an error.');
}
</script>
</head>
<body>

<div id="myDiv">
<p><input type="text" value="" id="inputtext" /></p>
</div>
<div id="myOtherDiv">
<p id="result"></p>
</div>
<input type="button" value="Add to DB" onclick="dbadd();"/><br/>
<br/><br/><br/>
<div id="myOtherDiv">
<p id="retrieved"></p>
</div>
<input type="button" value="Retrieve DB" onclick="dbget();"/><br/>
<br/>
<br/><br/><br/>
<div id="myDiv">
<p>ID <input type="text" value="" id="updateid" /></p>
<p>New Text<input type="text" value="" id="updatetext" /></p>
</div>
<div id="myOtherDiv">
<p id="confirmupdate"></p>
</div>
<input type="button" value="Update DB Entry" onclick="dbupdate();"/><br/>
<br/>
</body>
</html>

xml.php
<?php
// Setup Databse Connection
$serverAddress = "localhost";
$databaseToUse = "ajaxtest";
$databaseUsername = "root";
$databasePassword = "";

// DB Connection String
$database = mysql_pconnect($serverAddress, $databaseUsername, $databasePassword);
mysql_select_db($databaseToUse,$database);

if ($_POST['action']=="add") {
$insertsql = "insert into `testing` (inputText) values ('".mysql_real_escape_string($_POST['input'])."')";
$result = mysql_query($insertsql);
if (!$result) {
die('Invalid query: ' . mysql_error());
} else {
echo 'Successfully added <strong>'.$_POST['input'].'</strong> to the database';
}
}
if ($_POST['action']=="get") {
$insertsql = "SELECT * FROM `testing` order by ID ASC";
$result = mysql_query($insertsql);
if (!$result) {
die('Invalid query: ' . mysql_error());
} else {
while ($resultlist = mysql_fetch_array($result)) {
echo $resultlist[0].",".$resultlist[1]."<br />";
}
}
}
if ($_POST['action']=="update") {
$updatesql = "update `testing` set inputText='".mysql_real_escape_string($_POST['input'])."' where ID=".$_POST['id'];
$result = mysql_query($updatesql);
if (!$result) {
die('Invalid query: ' . mysql_error());
} else {
echo 'Successfully updated DB entry <strong>'.$_POST['id'].'</strong> with the data <strong>'.$_POST['input'].'</strong>';
}
}
?>