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. Let's 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. Let's 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>

No comments:

Post a Comment

Thank you for commenting. Please keep visiting.