In this post we can learn how to insert form data to mysql table by using JQuery Ajax serialize() method with php programming code without page refresh. It generates a text string from whole form data in standard form of URL encoded notation. It can be acts on a jQuery object which has selected different form controls like input tag, textarea tag and select tag. After using this serialize() method whole form data will be converted into an associative array and user can use form data in php script by using post method. After using this method we do not required to define form data one by one. We cannot use this method with input type file. This method works on most of the browser. Here I have describe simple, if you are looking for learn in details, you can go with video which you can find on this post.
Source Code
Database Table
CREATE TABLE IF NOT EXISTS `tbl_form` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`name` text NOT NULL,
`message` text NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=23 ;
serialize.php
<!DOCTYPE html>
<html>
<head>
<title>Webslesson Tutorial | Jquery Post Form Data using Ajax serialize() method</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
</head>
<body>
<br /><br />
<div class="container" style="width:600px;">
<h3>Jquery Post Form Data using Ajax serialize() method</h3><br />
<form id="submit_form">
<label>Name</label>
<input type="text" name="name" id="name" class="form-control" />
<br />
<label>Message</label>
<textarea name="message" id="message" class="form-control"></textarea>
<br />
<input type="button" name="submit" id="submit" class="btn btn-info" value="Submit" />
</form>
<div id="response"></div>
</div>
</body>
</html>
<script>
$(document).ready(function(){
$('#submit').click(function(){
var name = $('#name').val();
var message = $('#message').val();
if(name == '' || message == '')
{
$('#response').html('<span class="text-danger">All Fields are required</span>');
}
else
{
$.ajax({
url:"insert.php",
method:"POST",
data:$('#submit_form').serialize(),
beforeSend:function(){
$('#response').html('<span class="text-info">Loading response...</span>');
},
success:function(data){
$('form').trigger("reset");
$('#response').fadeIn().html(data);
setTimeout(function(){
$('#response').fadeOut("slow");
}, 5000);
}
});
}
});
});
</script>
insert.php
<?php
//insert.php
$connect = mysqli_connect("localhost", "root", "", "testing");
if(isset($_POST["name"]))
{
$name = mysqli_real_escape_string($connect, $_POST["name"]);
$message = mysqli_real_escape_string($connect, $_POST["message"]);
$query = "INSERT INTO tbl_form(name, message) VALUES ('".$name."', '".$message."')";
if(mysqli_query($connect, $query))
{
echo '<p>You have entered</p>';
echo '<p>Name:'.$name.'</p>';
echo '<p>Message : '.$message.'</p>';
}
}
?>
Excelente!!! No entiendo mucho el ingles, pero la explicacion es muy grafica...
ReplyDelete
ReplyDeleteCREATE TABLE IF NOT EXISTS `tbl_form` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`name` text NOT NULL,
`message` text NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=23 ; this SQL database is not working
Please help
ReplyDeletehow to show error message in this
ReplyDelete