jquery ajax serialize form data example html
<!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>
