Clear form with JavaScript


/ Published in: JavaScript
Save to your folder(s)

JavaScript is the only option, if you want to have the ability to clear all form fields. Yes, HTML form has Reset method, but if the form has initial values, then Reset will return the form to the initial state instead of clear input fields. This example also shows how to create an access loop for each form element. You can uncomment alert before "switch" line and you will see the message before element value is cleared. Drop down select-one will be set to its first option because it can not be treated like input text field or select-multiple


Copy this code and paste it in your HTML
  1. // function will clear input elements on ever form on HTML page
  2. function clearForms() {
  3. // variable declaration
  4. var x, y, z, type = null;
  5. // loop through forms on HTML page
  6. for (x = 0; x < document.forms.length; x++) {
  7. // loop through each element on form
  8. for (y = 0; y < document.forms[x].elements.length; y++) {
  9. // define element type
  10. type = document.forms[x].elements[y].type;
  11. // alert before erasing form element
  12. //alert('form='+x+' element='+y+' type='+type);
  13. // switch on element type
  14. switch (type) {
  15. case 'text':
  16. case 'textarea':
  17. case 'password':
  18. //case "hidden":
  19. document.forms[x].elements[y].value = '';
  20. break;
  21. case 'radio':
  22. case 'checkbox':
  23. document.forms[x].elements[y].checked = '';
  24. break;
  25. case 'select-one':
  26. document.forms[x].elements[y].options[0].selected = true;
  27. break;
  28. case 'select-multiple':
  29. for (z = 0; z < document.forms[x].elements[y].options.length; z++) {
  30. document.forms[x].elements[y].options[z].selected = false;
  31. }
  32. break;
  33. } // end switch
  34. } // end for y
  35. } // end for x
  36. }
  37.  
  38. As script goes through all form elements on the HTML page, it will not clear only this test form, but Search field and the Message box also. So if you want to leave a comment, do not test the Clear button before you click on submit. On the other hand, if you want to clear only group of input elements closed within DIV or some other HTML tag, you will have to modify clearForms() function and it can look like:
  39.  
  40. function clearElements(el) {
  41. // variable declaration
  42. var x, y, z, type = null, object = [];
  43. // collect form elements
  44. object[0] = document.getElementById(el).getElementsByTagName('input');
  45. object[1] = document.getElementById(el).getElementsByTagName('textarea');
  46. object[2] = document.getElementById(el).getElementsByTagName('select');
  47. // loop through found form elements
  48. for (x = 0; x < object.length; x++) {
  49. for (y = 0; y < object[x].length; y++) {
  50. // define element type
  51. type = object[x][y].type;
  52. switch (type) {
  53. case 'text':
  54. case 'textarea':
  55. case 'password':
  56. object[x][y].value = '';
  57. break;
  58. case 'radio':
  59. case 'checkbox':
  60. object[x][y].checked = '';
  61. break;
  62. case 'select-one':
  63. object[x][y].options[0].selected = true;
  64. break;
  65. case 'select-multiple':
  66. for (z = 0; z < object[x][y].options.length; z++) {
  67. object[x][y].options[z].selected = false;
  68. }
  69. break;
  70. } // end switch
  71. } // end for y
  72. } // end for x
  73. }
  74. You will have to assign ID to the parent element which contains input elements. To clear input elements, function call should look clearElements('myForm').

URL: http://www.redips.net/javascript/clear-form/

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.