How to clear a form?

Question

For example I have a form like this:

<form method='post' action='someaction.php' name='myform'>  <input type='text' name='text1'> <input type='text' name='text2'>  <input type='checkbox' name="check1">Check Me  <textarea rows="2" cols="20" name='textarea1'></textarea>  <select name='select1'>   <option value="volvo">Volvo</option>   <option value="saab">Saab</option>   <option value="mercedes">Mercedes</option>   <option value="audi">Audi</option> </select>  <input type='reset' value='Reset' name='reset'> <input type='submit' value='Submit' name='submit'>  </form> 

When I press Reset it empties all fields. But if I populate some fields using URL params and then press Reset, it only empties fields which I enter after form reload.

How can I empty all fields whether some fields are already populated at the time of form load.

Answer 1

As others pointed out, I think you should reconsider the need to blank the form. But, if you really need that functionality, this is one way to do it:

Plain Javascript:

function resetForm(form) {     // clearing inputs     var inputs = form.getElementsByTagName('input');     for (var i = 0; i<inputs.length; i++) {         switch (inputs[i].type) {             // case 'hidden':             case 'text':                 inputs[i].value = '';                 break;             case 'radio':             case 'checkbox':                 inputs[i].checked = false;            }     }      // clearing selects     var selects = form.getElementsByTagName('select');     for (var i = 0; i<selects.length; i++)         selects[i].selectedIndex = 0;      // clearing textarea     var text= form.getElementsByTagName('textarea');     for (var i = 0; i<text.length; i++)         text[i].innerHTML= '';      return false; } 

Note that I commented out the case in which I clear the hidden inputs. Most of the time, this is not necessary.

For this to work, you need to call the function from the onclick handler of a button (or some other way), e.g. like this:

<input type='reset' value='Reset' name='reset' onclick="return resetForm(this.form);"> 

You can test it all here on jsFiddle.

If you use jQuery in your project, you can do this with much less code (and no need to change the HTML):

jQuery(function($) { // onDomReady      // reset handler that clears the form     $('form[name="myform"] input:reset').click(function () {         $('form[name="myform"]')             .find(':radio, :checkbox').removeAttr('checked').end()             .find('textarea, :text, select').val('')          return false;     });  }); 

Also, note that I do not clear the values of hidden inputs, check-boxes and radio buttons.

Play with this here.

Answer 2

In jquery simply you can use,

$("#yourFormId").trigger('reset');