Home : Forums : Authoring and Programming : Slick Ajax Contact Form with jQuery and PHP

Slick Ajax Contact Form with jQuery and PHP

You are currently not logged in. You can view the forums, but cannot post messages.

28-Jun-12 10:47

Delete

Edit

hobbiton73

No stars yet

Posts: 2

Hi, firstly many thanks for the article, it's the best by far that I've seen.

Secondly I apologise in advance to the more seasoned programmer who may feel that is a basic question, but I'm relatively new to this so please bear with me.

I'm wanting to adapt this to use as a form submission script, but just so I understand how everything works I've kept the HTML form as per the example only changing the PHP script as shown below.


<?php

	include("admin/link.php");
	include("admin/opendb.php");
	
// Read the form values
$success = false;
$senderName = isset( $_POST['senderName'] ) ? preg_replace( "/[^\.\-\' a-zA-Z0-9]/", "", $_POST['senderName'] ) : "";
$senderEmail = isset( $_POST['senderEmail'] ) ? preg_replace( "/[^\.\-\_\@a-zA-Z0-9]/", "", $_POST['senderEmail'] ) : "";
$message = isset( $_POST['message'] ) ? preg_replace( "/(From:|To:|BCC:|CC:|Subject:|Content-Type:)/", "", $_POST['message'] ) : "";

$query = "INSERT INTO `contact` (senderName, senderEmail, message) VALUES ('$senderName', '$senderEmail', '$message')";  
$result = mysql_query($query);  //query executes  

// Return an appropriate response to the browser
if ( isset($_GET["ajax"]) ) 
{
  echo $success ? "success" : "error";
  
} else {
?>
<html>
  <head>
    <title>Thanks!</title>
  </head>
  <body>
  <?php if ( $success ) echo "<p>Thanks for sending your message! We'll get back to you shortly.</p>" ?>
  <?php if ( !$success ) echo "<p>There was a problem sending your message. Please try again.</p>" ?>
  <p>Click your browser's Back button to return to the page.</p>
  </body>
</html>
<?php
}
?>

The code correctly saves the data to a mySQL database. But the problem I'm having is that upon clicking 'Send email' I, for a fraction of a second, receive the 'Sending mail' message, before receiving the 'There was a problem...' error message. Because of this, the fields in the form are not cleared and I do not receive the final 'Thank you' message.

I've been working on this for a few days now and I just can't seem to get the process to work correctly.

I just wondered whether someone could possibly please take a look at this and let me know where i'm going wrong.

Many thanks and kind regards

13-Jul-12 02:38

Delete

Edit

matt

Gold

Posts: 3328

From: Southern Highlands, NSW, Australia

@hobbiton73: First try sending your form with JavaScript disabled in the browser. This will use the non-Ajax send method and you can see exactly what your PHP script is doing.

You could also try adding ?ajax=true to your form action (with JS still disabled):

<form id="contactForm" action="processForm.php?ajax=true" method="post">

This will make the PHP think it's an Ajax request and you can see what it returns in that situation.

Also check your PHP/server error log for any error messages.

--
Matt Doyle, Elated
3rd Edition of my jQuery Mobile book out now! Learn to build mobile web apps. Free sample chapter: http://store.elated.com/

17-Jul-12 09:41

Delete

Edit

hobbiton73

No stars yet

Posts: 2

Hi, thank you for replying to my post.

With a little work, I've now managed to solve the problems I was having and have managed to get this to work.

Many thanks and kind regards