How to show fadeout message in jquery?

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

Previous Next

Review & Rating

0.0 / 5

0 Review

5

(0)

4

(0)

3

(0)

2

(0)

1

(0)

Most Popular Tutorials

Most Popular Tutorials :-

How to show fadeout message in jquery?

jQuery Fade Out Message after Form Submit

File name : index.php

File name : post-form.php

jQuery Fade Out Message on Form Submit

File name : index.php

PHP

PHP OOPs

Codeigniter

Laravel

NODE.JS

Javascript

0.0 / 5

0 Review

Write Review Here

Most Popular Tutorials

Important Link