Question

I’m having a very hard time understanding the jQuery Form Plugin. I’ve read through and studied many similar questions on stackoverflow, but I still can’t figure out what I need to do to get it working.

My goal is the following:

1. Create a contact form on an HTML page
2. Send the contents of the form to a separate PHP script to be validated and emailed.
3. Show an AJAX auto-response on the HTML page containing the contact form without the page having to refresh.

I have set up an example at http://evanwebdesign.com/ajax-submit-test/ where you can view the HTML form and my jQuery/javascript. (Don’t mind the fact that the form is ugly/unstyled and contains no front-end validation. I will handle that stuff later on my own.)

Below is the PHP code for contact-process.php:

<?php
  $first_name = $_REQUEST['First_Name'] ;
  $last_name = $_REQUEST['Last_Name'] ;
  $email = $_REQUEST['Email'] ;
  $phone = $_REQUEST['Phone'] ;
  $message = $_REQUEST['Message'] ;

   $body =  "Submitted Information:\n";
   $body .= "   First Name: $first_name\n";
   $body .= "   Last Name: $last_name\n";
   $body .= "   Email: $email\n";
   $body .= "   Phone: $phone\n";
   $body .= "   message: $message\n";


  if ( preg_match( "/[\r\n]/", $name ) || preg_match( "/[\r\n]/", $email ) ) {
    header("Location: http://www.google.com/");
    }


  mail( "[e-mail]", "AJAX Form Submission",
    $body, "From: $email" );
?>

What’s happening is the the form is being processed, but upon clicking submit I am taken to the contact-process.php in my browser instead of loading a success notification in the HTML file.

Maybe the problem lies in my PHP script? I’m more of a front-end guy so that could be entirely possible.

Any help in this matter would be greatly appreciated. Thank you!

Answer 1

The following two errors in Firebug shed some light:

“NetworkError: 404 Not Found –
http://www.evanwebdesign.com/ajax-submit-test/js/jquery.form.js”
jquery.form.js

$(“#contact_form”).ajaxForm is not a function

You need to properly include the AJAXForm plugin for it to function correctly.