Wednesday, September 28, 2016

Submit Forms without Refreshing Page

Submit Forms without Refreshing Page


Using Javascript/jQuery we can submit any form on a webpage directly to required php script and show the result to the user. this can be achieved by using xmlHttpRequest in Javascript, or ajax request of jQuery. Lets see how it is possible: Consider the following form; <form id="post_comment">Email Id: <input id="mail"/><br/>Password: <input id="pass"/><br/>Name: <input id="name"/><br/>Comment: <textarea id="cmmt"></textarea><br/><input type="submit"/><br/><div id="msg"></div></form> Here the form has no common attributes such as mehod, action,etc. because we will be handling them through javascript or jQuery. Lets see how to Handle the above form using jQuery. Just add a script tag below the form. The code may be like this; <script> $(document).ready(function(){ $("#post_comment").submit(function(e){ e.preventDefault(); email = $("#mail").attr("value"); pass = $("#pass").attr("value"); name = $("#name").attr("value"); text = $("#cmmt").attr("value"); $.post(submit.php,{email:email,pass:pass,name:name,cmmt:text},function(result){ $("#msg").fadeOut(); $("#msg").html(result); $("#msg").fadeIn(); });})}); </script>

Go to link download