Solved

Ajax Jquery PHP form sending and error warning...

Posted on 2010-11-21
4
274 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

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

OverviewThis article demonstrates a simple search form using AJAX. The purpose of the article is to demonstrate how to use the same code to render a page and javascript (JQuery) and AJAX to make subsequent calls to refine the results. The princip…
Introduction This article is intended for those who are new to PHP error handling (https://www.experts-exchange.com/articles/11769/And-by-the-way-I-am-New-to-PHP.html).  It addresses one of the most common problems that plague beginning PHP develop…
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

829 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