Solved

Ajax Jquery PHP form sending and error warning...

Posted on 2010-11-21
4
276 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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

Don't Cry: How Liquid Web is Ensuring Security

WannaCry is just the start. Read how Liquid Web is protecting itself and its customers against new threats.

Question has a verified solution.

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

International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery including how to code hide show and toggles. 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…

690 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