Geek Answers Handbook

Processing jQuery form with PHP in MYSQL database using $ .ajax query

Question: How can I process a form using jQuery and a $ .ajax request so that the data is passed to a script that writes it to the database?

Problem: I have a simple email registration form that, when processing, adds an email along with the current date to a table in the MySQL database. Processing a form without jQuery works as intended, adding an email address and a date. Using jQuery, the form submits successfully and returns a success message. However, no data is added to the database.

Any understanding would be greatly appreciated!

<!-- PROCESS.PHP --> <?php // DB info $dbhost = '#'; $dbuser = '#'; $dbpass = '#'; $dbname = '#'; // Open connection to db $conn = mysql_connect($dbhost, $dbuser, $dbpass) or die ('Error connecting to mysql'); mysql_select_db($dbname); // Form variables $email = $_POST['email']; $submitted = $_POST['submitted']; // Clean up function cleanData($str) { $str = trim($str); $str = strip_tags($str); $str = strtolower($str); return $str; } $email = cleanData($email); $error = ""; if(isset($submitted)) { if($email == '') { $error .= '<p class="error">Please enter your email address.</p>' . "\n"; } else if (!eregi("^[A-Z0-9._%-] +@ [A-Z0-9._%-]+\.[AZ]{2,4}$", $email)) { $error .= '<p class="error">Please enter a valid email address.</p>' . "\n"; } if(!$error){ echo '<p id="signup-success-nojs">You have successfully subscribed!</p>'; // Add to database $add_email = "INSERT INTO subscribers (email,date) VALUES ('$email',CURDATE())"; mysql_query($add_email) or die(mysql_error()); }else{ echo $error; } } ?> <!-- SAMPLE.PHP --> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Sample</title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ // Email Signup $("form#newsletter").submit(function() { var dataStr = $("#newsletter").serialize(); alert(dataStr); $.ajax({ type: "POST", url: "process.php", data: dataStr, success: function(del){ $('form#newsletter').hide(); $('#signup-success').fadeIn(); } }); return false; }); }); </script> <style type="text/css"> #email { margin-right:2px; padding:5px; width:145px; border-top:1px solid #ccc; border-left:1px solid #ccc; border-right:1px solid #eee; border-bottom:1px solid #eee; font-size:14px; color:#9e9e9e; } #signup-success { margin-bottom:20px; padding-bottom:10px; background:url(../img/css/divider-dots.gif) repeat-x 0 100%; display:none; } #signup-success p, #signup-success-nojs { padding:5px; background:#fff; border:1px solid #dedede; text-align:center; font-weight:bold; color:#3d7da5; } </style> </head> <body> <?php include('process.php'); ?> <form id="newsletter" class="divider" name="newsletter" method="post" action=""> <fieldset> <input id="email" type="text" name="email" /> <input id="submit-button" type="image" src="<?php echo $base_url; ?>/assets/img/css/signup.gif" alt=" SIGNUP " /> <input id="submitted" type="hidden" name="submitted" value="true" /> </fieldset> </form> <div id="signup-success"><p>You have successfully subscribed!</p></div> </body> </html>
+3
source share
3 answers

Instead, using data: dataStr, use:

 data : {param: value, param2: value2}

This is the right way to do this for POST requests.

In addition, I recommend using a form plugin like this .

+3
source

Plus, the form plugin makes life a lot easier. I often have forms that are sent back to the same page. I am sending an extra parameter (ajax = true) which I use to change what the page returns to the browser, i.e. just a snippet of the page that I can enter through innerHTML.

+1
source

check the response coming from the process.php file.echo file and release the message values ​​and warn the answer, because all the seams should be spelled correctly, just sending the post values ​​to process.php. Serialize syntax can also be

 jQuery('#newsletter').formSerialize();
0
source

More articles:


All Articles