innerhtml - best way to reset a form using jquery -
i have following javascript , html form:
<!doctype html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <title></title> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script> <!--<script src="./_js/jquery-1.7.2.min.js"></script>--> <script> // wait dom loaded $(document).ready(function() { $("#clear_form").click(function(){ var resetforms = function () { $('form').each(function() { this.reset(); }); // end earch }; // end var resetforms resetforms(); // ************edit based on questions responses ************* var x = document.getelementbyid("all_clear"); x.innerhtml = ''; // *** still not working *** ** //******************** end edit based on responses ***************** });// end clear form $("#t_form").submit(function(){ var user_input = $("#u_input").val(); $.ajax({ type: "post", url: "response.php", datatype: 'json', data: {email: user_input}, success: function(msg){ $("#all_clear").replacewith(msg.email); }, // end success error: function(requestobject, error, errorthrown) { alert(error); alert(errorthrown); } // end error });// end ajax }); // end submit });// end ready </script> </head> <body> <form id="t_form" onsubmit="return false;"> <p>email: <input id="u_input" type="text" value="your email"></p> <p id="first">click button when done.</p> <br /> <input type="submit" name="submit" class="button" id="submit_btn" value="send" /> <input type="submit" anme="reset" class="button" id="clear_form" value="clear form" /> <br /> <p id="all_clear"></p> </form> </body> </html>
when click 'clear form' button, user input field resets, not <p id="all_clear"></p>
i'm trying whole form reset.
edit still not working after changes above.
i noticed when click 'clear form' button, ajax request firing server.
so, removed "clear form" button form (in html) , used getelementbyid
1 of other answers , whole thing works. it's not at, learning tool.
<!doctype html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <title></title> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script> <!--<script src="./_js/jquery-1.7.2.min.js"></script>--> <script> // wait dom loaded $(document).ready(function() { $("#clear_form").click(function(){ var x = document.getelementbyid("all_clear"); x.innerhtml = ''; var resetforms = function () { $('form').each(function() { this.reset(); }); // end earch }; // end var resetforms resetforms(); });// end clear form $("#t_form").submit(function(){ var user_input = $("#u_input").val(); $.ajax({ type: "post", url: "response.php", datatype: 'json', data: {email: user_input}, success: function(msg){ var new_message = msg.email; var x = document.getelementbyid("all_clear"); x.innerhtml = msg.email; }, // end success error: function(requestobject, error, errorthrown) { alert(error); alert(errorthrown); } // end error });// end ajax }); // end submit });// end ready </script> </head> <body> <form id="t_form" onsubmit="return false;"> <p>email: <input id="u_input" type="text" value="your email"></p> <p id="first">click button when done.</p> <br /> <input type="submit" name="submit" class="button" id="submit_btn" value="send" /> </form> <input type="submit" anme="reset" class="button" id="clear_form" value="clear form" /> <br /> <p id="all_clear"></p> </body> </html>