Solved

Ajax Jquery PHP form sending and error warning...

Posted on 2010-11-21
4
271 Views
Last Modified: 2012-05-10
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
Comment
Question by:maccaj51
  • 2
4 Comments
 
LVL 13

Expert Comment

by:dsmile
ID: 34185378
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
 
LVL 16

Expert Comment

by:jmatix
ID: 34194350
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
 
LVL 16

Accepted Solution

by:
jmatix earned 500 total points
ID: 34194357
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
 

Author Closing Comment

by:maccaj51
ID: 34194722
Thank u
0

Featured Post

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

Part of the Global Positioning System A geocode (https://developers.google.com/maps/documentation/geocoding/) is the major subset of a GPS coordinate (http://en.wikipedia.org/wiki/Global_Positioning_System), the other parts being the altitude and t…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The viewer will learn how to count occurrences of each item in an array.
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…

708 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

16 Experts available now in Live!

Get 1:1 Help Now