Submit Form With Ajax to MySQL

Question

I wonder whether someone may be able to help me please.

For sometime I've been searching for a tutorial/article that shows me how to set up a form and submit the user input to a mySQL database using AJAX.

Although this doesn't show me how to send the data to the database, this article provided me with a good starting pointing and it also gave me the 'look and feel' in respect of online messages which I would like to incorporate into my form.

I've now started to adapt the example script but I'm having difficulty in submitting the data to my database.

In the form I've changed this section:

   $.ajax( {
          url: contactForm.attr( 'action' ) + "?ajax=true",
          type: contactForm.attr( 'method' ),
          data: contactForm.serialize(),
          success: submitFinished
        } );

  }

to

 $.ajax( {
      url: contactForm.attr( 'savecontact.php' ) + "?ajax=true",
      type: contactForm.attr( 'post' ),
      data: contactForm.serialize(),
      success: submitFinished
    } );
  }

and in the PHP script, I've changed this to now read:

<?php

// Read the form values
$success = false;
$senderName = isset( $_POST['senderName']);
$senderEmail = isset( $_POST['senderEmail']);
$message = isset( $_POST['message']);


if ( $senderName && $senderEmail && $message ) {

    $query = "INSERT INTO `contact` (senderName, senderEmail, message) VALUES ('$senderName', '$senderEmail', '$message')";  
mysql_query($query) or die(mysql_error());
}           
// 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 problem I'm having, is that upon sending the form, the sending message appears on screen and continues to be stuck on this message and non of the data is sent to my database and I must admit I'm really not sure why.

I appreciate that because of my lack of experience there may be an easier way to achieve the results I would like and I may be looking at this too simplistically, but I just wondered whether someone could perhaps have a look at this please and let me know where I'm going wrong.

Many thanks and kind regards

There's no such attribute as savecontact.php on a form. You should rollback your JavaScript code. — Madara's Ghost
– Madara's Ghost, Commented Jun 25, 2012 at 15:12
Hi @Truth, thank you for this. I've made the changes, as highlighted in my post below. Kind regards — IRHM
– IRHM, Commented Jun 25, 2012 at 15:25
You need to post more of your php - i.e. where do the variables $senderName, $senderEmail and $message get set? — bcmcfc
– bcmcfc, Commented Jun 25, 2012 at 15:50
Hi @bcmcfc, thank you for taking a look at my post. I've added my full PHP script o my original post. Kind regards — IRHM
– IRHM, Commented Jun 25, 2012 at 17:06

Blaster · Accepted Answer · 2012-06-25 15:11:54Z

1

Change:

contactForm.attr( 'savecontact.php' )

To:

contactForm.attr( 'action' )

And

type: contactForm.attr( 'post' ),

To

type: contactForm.attr( 'method' ),

Since attr is used to read tag attributes. The action attribute of your form tag in this case.

Depending on your form's method attribute, you will have to use $_POST or $_GET arrays to get values submitted through AJAX or you may also want to use $_REQUEST (not recommended way though)

answered Jun 25, 2012 at 15:11

Blaster

9,0801 gold badge30 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

IRHM Over a year ago

Hi @Blaster, thank you for taking the time to help me with this. As I said in my original post, I'm relatively new to this, so my inexperience had clearly led to these initial errors. I have made the changes you suggest, and although the screen is no longer stuck on the sending message, I now receive There was a problem... message, unfortunately meaning that the data hasn't been transferred to my database, Could you tell me please, have you any ideas where I'm going wrong? Kind regards

bcmcfc · Accepted Answer · 2012-06-26 09:04:46Z

0

In addition to Blaster's answer, your php code also needs some fixing:

$senderName = isset( $_POST['senderName']);
$senderEmail = isset( $_POST['senderEmail']);
$message = isset( $_POST['message']);

Here you're setting those variables to a boolean value of whether or not the POST variable was set, and not the actual value.

$senderName = mysql_real_escape_string($_POST['senderName']);
$senderEmail = mysql_real_escape_string($_POST['senderEmail']);
$message = mysql_real_escape_string($_POST['message']);

That should get things working, but is vulnerable to SQL injection. The mysql_* functions have been deprecated and it is recommended to learn PDO or MySQLi and prepared statements. Please see this page in the PHP manual for more information.

answered Jun 26, 2012 at 9:04

bcmcfc

27k30 gold badges115 silver badges183 bronze badges

1 Comment

IRHM Over a year ago

Hi @bcmcfc, thank you very much for your help. The data now saves into my database which is great. However, even though this happening, I momentarily receive the Sending message before receiving the There has been a problem. This means the form doesn't disappear from screen. I've done some testing and the problem lies around the lines above that were changed. i.e. As soon as this $senderName = isset( $_POST['senderName'] ) ? preg_replace( "/[^\.\-\' a-zA-Z0-9]/", "", $_POST['senderName'] ) : ""; is changed the functionality fails to work correctly.Have you any ideas please? Kind regards

Collectives™ on Stack Overflow

Submit Form With Ajax to MySQL

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related