maccaj51
asked on
Ajax Jquery PHP form sending and error warning...
I have a form and a php file that work perfectly... echoing the error or success on the next opage... i want to try to do this with ajax and send the messages back without refreshing the page.... ive attached both files to look at...
FORM
PHP
Be gentle... i am very new to this
Thanks in advance
FORM
<form name="form" method="post" action="/form.php">
<table width="300" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>First Name</td>
</tr>
<tr>
<td><label for="first_name"></label>
<input type="text" name="first_name" id="first_name" /></td>
</tr>
<tr>
<td>Last Name</td>
</tr>
<tr>
<td><input type="text" name="last_name" id="last_name" /></td>
</tr>
<tr>
<td>Email Address</td>
</tr>
<tr>
<td><input type="text" name="email_address" id="email_address" /></td>
</tr>
<tr>
<td>Re-Type Email Address</td>
</tr>
<tr>
<td><input type="text" name="re_email_address" id="re_email_address" /></td>
</tr>
<tr>
<td>Arrival Date</td>
</tr>
<tr>
<td><input type="text" name="arrival_date" id="arrival_date" /></td>
</tr>
<tr>
<td>Departure Date</td>
</tr>
<tr>
<td><input type="text" name="departure_date" id="departure_date" /></td>
</tr>
<tr>
<td>Notes</td>
</tr>
<tr>
<td><textarea name="notes" id="notes" cols="45" rows="5"></textarea></td>
</tr>
<tr>
<td><input type="submit" name="submit_enquiry" id="submit_enquiry" value="Submit" /></td>
</tr>
</table>
</form>
PHP
<?php
// Receiving variables
@$first_name = addslashes($_POST['first_name']);
@$last_name = addslashes($_POST['last_name']);
@$email_address = addslashes($_POST['email_address']);
@$re_email_address = addslashes($_POST['re_email_address']);
@$arrival_date = addslashes($_POST['arrival_date']);
@$departure_date = addslashes($_POST['departure_date']);
@$notes = addslashes($_POST['notes']);
// Validation
if (strlen($first_name) == 0 )
{
die("<p align=\"center\"><font face=\"Vrinda\" size=\"4\"color=\"#FF0000\">first_name is empty </font></p>");
}
if (strlen($last_name) == 0 )
{
die("<p align=\"center\"><font face=\"Vrinda\" size=\"4\"color=\"#FF0000\">last_name is empty </font></p>");
}
if (! ereg('[A-Za-z0-9_-]+\@[A-Za-z0-9_-]+\.[A-Za-z0-9_-]+', $email_address))
{
die("<p align='center'><font face='Arial' size='2' color='#000000'>Please enter a valid email_address</font></p>");
}
if (strlen($email_address) == 0 )
{
die("<p align=\"center\"><font face=\"Vrinda\" size=\"4\"color=\"#FF0000\">email_address is empty </font></p>");
}
if ($re_email_address != $email_address)
{
die("<p align='center'><font face='Arial' size='2' color='#000000'>Please enter a valid re_email_address</font></p>");
}
if (strlen($re_email_address) == 0 )
{
die("<p align=\"center\"><font face=\"Vrinda\" size=\"4\"color=\"#FF0000\">re_email_address is empty </font></p>");
}
if (strlen($notes) == 0 )
{
die("<p align=\"center\"><font face=\"Vrinda\" size=\"4\"color=\"#FF0000\">notes is empty </font></p>");
}
//Sending Email to form owner
# Email to Owner
$pfw_header = "From: $email_address";
$pfw_subject = "Accommodation Enquiry";
$pfw_email_to = "contact@contact.com";
$pfw_message = "first_name: $first_name\n"
. "last_name: $last_name\n"
. "email_address: $email_address\n"
. "re_email_address: $re_email_address\n"
. "arrival_date: $arrival_date\n"
. "departure_date: $departure_date\n"
. "notes: $notes\n";
@mail($pfw_email_to, $pfw_subject ,$pfw_message ,$pfw_header ) ;
//Sending auto respond Email to user
# Email to Owner
$pfw_header = "From: contact@contact.com";
$pfw_subject = "Thank You!";
$pfw_email_to = "$email_address";
$pfw_message = "Hi $first_name \n"
. "\n"
. "";
@mail($pfw_email_to, $pfw_subject ,$pfw_message ,$pfw_header ) ;
echo("<p align='center'><font face='Arial' size='3' color='#FF0000'>Well Done Everyone!</font></p>");
?>
Be gentle... i am very new to this
Thanks in advance
Follow this:
1. Add a <div> to your html page to display the message:
<div id='msg'></div>
2. Include jquery.js (replace with your jquery.js location):
<script src="../JS/jquery.js"></sc ript>
3. Add this JS script:
<script>
$(document).ready(function (){
$('form[name=form]').submi t(function (){
$.post("/form.php", $('form[name=form]').seria lize(), function(data){$('#msg').h tml(data); });
return false;
});
});
1. Add a <div> to your html page to display the message:
<div id='msg'></div>
2. Include jquery.js (replace with your jquery.js location):
<script src="../JS/jquery.js"></sc
3. Add this JS script:
<script>
$(document).ready(function
$('form[name=form]').submi
$.post("/form.php", $('form[name=form]').seria
return false;
});
});
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Thank u
This is a nice tutorial that might step by step help you to put ajax into your current form
http://trevordavis.net/blog/ajax-forms-with-jquery/