• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 284
  • Last Modified:

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
<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>

Open in new window


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>");
?>

Open in new window


Be gentle... i am very new to this

Thanks in advance
0
maccaj51
Asked:
maccaj51
  • 2
1 Solution
 
dsmileCommented:
There're so many tutorials out there that teach you how to do it.

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/
0
 
Justin MathewsCommented:
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"></script>

3. Add this JS script:

   <script>
    $(document).ready(function (){
         $('form[name=form]').submit(function (){
                $.post("/form.php", $('form[name=form]').serialize(), function(data){$('#msg').html(data);});
                return false;
         });
    });

 
0
 
Justin MathewsCommented:
Forgot to close <script>

<script>
    $(document).ready(function (){
         $('form[name=form]').submit(function (){
                $.post("/form.php", $('form[name=form]').serialize(), function(data){$('#msg').html(data);});
                return false;
         });
    });
</script>
0
 
maccaj51Author Commented:
Thank u
0

Featured Post

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now