In this post you can learn about form submit with fade out message using Jquery Ajax in php. I have show you one example in which I have use two html form containing required field. In this example Ajax code will validate form and and send inputs to php. PHP code will insert that field data into database and respond back to Ajax function with success message and this message will fade in and out by using jquery.
Source Code
Table
--
-- Table structure for table `tbl_form`
--
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=1 ;
--
-- Dumping data for table `tbl_form`
--
form_submit.php
<!DOCTYPE html>
<html>
<head>
<title>Webslesson Tutorial | Multiple Image Upload</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:500px;">
<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" />
<span id="error_message" class="text-danger"></span>
<span id="success_message" class="text-success"></span>
</form>
</div>
</body>
</html>
<script>
$(document).ready(function(){
$('#submit').click(function(){
var name = $('#name').val();
var message = $('#message').val();
if(name == '' || message == '')
{
$('#error_message').html("All Fields are required");
}
else
{
$('#error_message').html('');
$.ajax({
url:"insert.php",
method:"POST",
data:{name:name, message:message},
success:function(data){
$("form").trigger("reset");
$('#success_message').fadeIn().html(data);
setTimeout(function(){
$('#success_message').fadeOut("Slow");
}, 2000);
}
});
}
});
});
</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"]);
$sql = "INSERT INTO tbl_form(name, message) VALUES ('".$name."', '".$message."')";
if(mysqli_query($connect, $sql))
{
echo "Message Saved";
}
}
?>
thanks...
ReplyDeletethanks...
ReplyDeleteThank you
ReplyDeleteHi how are yu
ReplyDeleteHi how are you
ReplyDeleteHi hello I am shivam vishwakarma
ReplyDeletethank's very nice
ReplyDeletecan you increase timing of shaved message
That is very nice work
ReplyDeleteThank you sooo much the most expected one
ReplyDeletethank u so much sir, always update more new tutorials thanks
ReplyDeleteNice, thanks!!!
ReplyDeleteHello, i wrote the same code as it was in the video but the problem is that, the "Message Saved" doesnt displayed as it was supposed to,and the data are inserted successfully into the database,Need your Help plz
ReplyDeleteGreat Tutorial... Just remember to put this code,
ReplyDelete$('#submit').click(function(e){
e.preventDefault();
during the line #submit click function. This code will prevent the form from making its default action of reloading the page after the submit button is clicked.
You´re the best. Simple demonstrations, extendible for own purposes, easy to convert in frameworks like codeigniter. Keep it up!
ReplyDeleteThanks for your work.