Jquery Tutorials
- What is JQuery
- DOM Document Object Model
- JQuery Syntax
- Jquery Selector
- Get & Set Form value
- jQuery - Attributes
- Attribute Methods
- jQuery - DOM Manipulation
- JQuery Events
- JQuery Effects
- JQuery Html/Css
- jQuery Insert Content
- Auto Hide Div
- JQuery noConflict()
- JQuery Form Validation
- Form Validation
- Login Form Validation
- Jquery Fadeout message
- Modal popup
- Jquery Ajax Forms
- Dependent Dropdown
- Autocomplete Country jquery ajax
- Dynamic Content Load using jQuery AJAX
- Dynamic star rating jQuery AJAX
- Drag and Drop Image Upload
- show Hide Elements By click on checkbox
- How to Add class in jQuery
- calculate discount in jQuery
- Calculate GST by input value in text box
- check Password strength in jQuery
- Count Remaining Character
- onClick Checkbox check all
- password match or not
- DataTable
- Date Picker
- Multiselect Dropdown with Checkbox
- Add Dynamic Input Field (Add More Input Field)
- submit button disable after one click
- Show hide password in Password textbox using checkbox
- Put value in the text field
- Set Data and Attributes
Customer Say
jQuery Fade Out Message after Form Submit
HTML Code for jQuery AJAX Form
This code is to show an AJAX form containing name and comment fields. These two values should not be empty and it is validated using jQuery.
File name : index.php
<html>
<head>
<title>Enable Disable Submit Button Based on Validation</title>
<style>
body{width:50%;min-width:200px;font-family:arial;}
#frmDemo {background: #98E6DB;padding: 40px;overflow:auto;}
#btn-submit{padding: 10px 20px;background: #555;border: 0;color: #FFF;display:inline-block;margin-top:20px;cursor: pointer;font-size: medium;}
#btn-submit:focus{outline:none;}
.input-control{padding:10px;width:100%;}
.input-group{margin-top:10px;}
#error_message{
background: #F3A6A6;
}
#success_message{
background: #CCF5CC;
}
.ajax_response {
padding: 10px 20px;
border: 0;
display: inline-block;
margin-top: 20px;
cursor: pointer;
display:none;
color:#555;
}
</style>
</head>
<body>
<h1>jQuery Fade Out Message after Form Submit</h1>
<form id="frmDemo" method="post">
<div class="input-group">Name </div>
<div>
<input type="text" name="name" id="name" class="input-control" />
</div>
<div class="input-group">Message </div>
<div>
<textarea name="comment" id="comment" class="input-control"></textarea>
</div>
<div style="float:left">
<button type="submit" name="btn-submit" id="btn-submit">Submit</button>
</div>
<div id="error_message" class="ajax_response" style="float:left"></div>
<div id="success_message" class="ajax_response" style="float:left"></div>
</form>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script>
$("#frmDemo").submit(function(e) {
e.preventDefault();
var name = $("#name").val();
var comment = $("#comment").val();
if(name == "" || comment == "" ) {
$("#error_message").show().html("All Fields are Required");
} else {
$("#error_message").html("").hide();
$.ajax({
type: "POST",
url: "post-form.php",
data: "name="+name+"&comment="+comment,
success: function(data){
$('#success_message').fadeIn().html(data);
setTimeout(function() {
$('#success_message').fadeOut("slow");
}, 2000 );
}
});
}
})
</script>
</body>
</html>
File name : post-form.php
<?php
if(!empty($_POST["name"]) && !empty($_POST["comment"])) {
print "Message is Saved!";
}
?>
jQuery Fade Out Message on Form Submit
This script prevents form’s default submit action and call AJAX to get input from form fields. These inputs will be validated and passed to server side.
If the server side PHP file receives these inputs, then a success response will be fade in. And then, this response text will be fade out after some time by using Javascript setTimeOut(). We are using jQuery fading methods for showing AJAX response with fade-in fade-out effect.
File name : index.php
<script>
$("#frmDemo").submit(function(e) {
e.preventDefault();
var name = $("#name").val();
var comment = $("#comment").val();
if(name == "" || comment == "" ) {
$("#error_message").show().html("All Fields are Required");
} else {
$("#error_message").html("").hide();
$.ajax({
type: "POST",
url: "post-form.php",
data: "name="+name+"&comment="+comment,
success: function(data){
$('#success_message').fadeIn().html(data);
setTimeout(function() {
$('#success_message').fadeOut("slow");
}, 2000 );
}
});
}
})
</script>
Output :-
File name : index.php
Output :-
File name : index.php