A community in which webmasters can ask for help with topics such as PHP coding , MySQL , IT jobs, web design, IT security.
Current location:homephp forumphp talk in 2008 yearjQuery Form Processing With PHP to MYSQL Database Using $.ajax Request - page 1
User InfoPosts
jQuery Form Processing With PHP to MYSQL Database Using $.ajax Request#1
Question: How can I process a form using jQuery and the $.ajax request so that the data is passed to a script which writes it to a database?

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

Any insight 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._%-]+\.[A-Z]{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>

posted date: 2008-12-12 09:32:00


Re: jQuery Form Processing With PHP to MYSQL Database Using $.ajax Request#2
I had made out the solution of this problem. click to view my topic...

hope that hepls.

posted date: 2008-12-12 09:32:01


Re: jQuery Form Processing With PHP to MYSQL Database Using $.ajax Request#3
Instead if using data: dataStr, use:data : {param: value, param2: value2}This is the proper way to do it for POST requests.Also, I recommend using a form plug-in, like this.

posted date: 2008-12-12 09:50:00


Re: jQuery Form Processing With PHP to MYSQL Database Using $.ajax Request#4
His method is the most common usage actually

posted date: 2008-12-12 09:53:00


Re: jQuery Form Processing With PHP to MYSQL Database Using $.ajax Request#5
Plus one to the form plugin, makes life much easier. I often have forms that post back to the same page. I send an extra parameter (ajax=true) which i use to alter what the page returns to the browser ie. just a page fragment that I can inject via innerHTML.

posted date: 2008-12-12 10:38:00


Re: jQuery Form Processing With PHP to MYSQL Database Using $.ajax Request#6
His method is the most common way of doing it, actually. ;)

posted date: 2008-12-12 11:38:00


Re: jQuery Form Processing With PHP to MYSQL Database Using $.ajax Request#7
check the response coming from the process.php file.echo and die the post values and alert the response because everything seams to be written correctly just matter of sending the post values to process.php.the syntax of Serialize could also be jQuery('#newsletter').formSerialize();

posted date: 2011-09-27 02:59:00


Re: jQuery Form Processing With PHP to MYSQL Database Using $.ajax Request#8
Plus one to the form plugin, makes life much easier. I often have forms that post back to the same page. I send an extra parameter (ajax=true) which i use to alter what the page returns to the browser ie. just a page fragment that I can inject via innerHTML.

posted date: 2012-04-09 23:06:00


select page: « 1 »
Copyright ©2008-2017 www.momige.com, all rights reserved.