26

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.

Improve this question
4
  • 3
    Ask yourself if you really need a reset button. They're generally considered useless. useit.com/alertbox/20000416.html stillnetstudios.com/no-more-reset-buttons-please
    – Rob Stevenson-Leggett
    Commented May 17, 2011 at 9:12
  • 1
    See the accepted answer here for solution using jQuery
    – Shadow Wizard
    Commented May 17, 2011 at 9:38
  • 7
    @Rob Stevenson-Leggett: I read the article and it is right that reset button is not used now a days. May be it is not useable when filling registration form. But when Working on a search form that show records on form change event below the form then I think reset/clear button is useful.
    – Student
    Commented May 17, 2011 at 9:55
  • When a form is embedded in a modal/dialog, you want the form re-set each time the modal/dialog opens.
    – Isaac Kleinman
    Commented Nov 25, 2014 at 16:39

11 Answers 11

Reset to default
24

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.

Improve this answer
4
  • Tested it and it doesnt clear the textareas. Do we know whats going wrong?
    – Abhishek
    Commented Feb 22, 2016 at 6:46
  • @Abhishek It works, check the fiddle: jsfiddle.net/fmTDY Why would it not work for your particular case, I don't know.
    – Marko Dumic
    Commented Feb 25, 2016 at 17:04
  • This did work for me, except I had to replace "form.getElementsById" with "document.getElementById('myForm').getElementsById". Not the prettiest thing in the world, and I don't know why . . . but it's working perfect.
    – LiquidDrummer
    Commented Mar 11, 2016 at 20:44
  • This doesn't work. The text area in the fiddle does not clear. I'm using Chrome 63.0.3239.132.
    – bkoodaa
    Commented Mar 15, 2018 at 8:58
12

In jquery simply you can use,

$("#yourFormId").trigger('reset');
Improve this answer
8

You will have to clear them all through javascript (or clear it out server side).

The reset button will only reset form elements to their initial value - if this was a specific value, that's what it will be reset to.

Improve this answer
3
  • It means I have to clear each field one by one. Is there any shortest way to clear all fields with one JS function/Statement that I can use with every form? I have form with more than 50 fields.
    – Student
    Commented May 17, 2011 at 9:28
  • @Student - You could get all input elements and clear the values in a loop. I suggest investing some time in learning jQuery.
    – Oded
    Commented May 17, 2011 at 9:30
  • Loop over theForm.elements, check if it is a fieldset, select, radio group, checkbox or something else and then act accordingly.
    – Quentin
    Commented May 17, 2011 at 9:30
2

A simple way to do it with JS:

<form id="myForm">
   <!-- inputs -->
</form>

const { myForm } = document.forms;
myForm.reset();
Improve this answer
0
1

If you're using jQuery, the code is much simpler:

$('#my-form').not(':button, :submit, :reset, :hidden').val('').removeAttr('checked').removeAttr('selected');

You can also remove the :hidden from the .not selector if you want to clear hidden fields as well.

Improve this answer
1

The easiest way to clear a form is by using the HTML tag

<input type="reset" value="Reset">

Example:

<form>
  <table>
    <tr>
      <td>Name</td>
      <td><input type="text" name="name"></td>
    </tr>
    <tr>
      <td>Reset</td>
      <td><input type="reset" value="Reset"></td>
    </tr>
  </table>
</form>
Improve this answer
1
  • the only problem with the reset behavior is that if the form is pre-populated it will reset the value back to the initial value that was set. So if you're automatically filling out some fields on an error or something like that then this won't behavior as you'd hope to unfortunately.
    – EdgeCaseBerg
    Commented May 18, 2017 at 17:47
0

I've summarized some of the suggestions using jQuery to give a more complete solution to the question:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>Demo Forms</title>
        <script src="http://code.jquery.com/jquery-1.11.1.js"></script>
    </head>
    <body>

        <form method='post' action='someaction.php' name='myform'>

            <input type='text' name='text1'>
            <input type='text' name='text2' value='preset value'>

            <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='button' value='Reset' name='reset' onclick="return clearForm(this.form);">
            <input type='submit' value='Submit' name='submit'>

            <script>
                function clearForm(form) {
                    var $f = $(form);
                    var $f = $f.find(':input').not(':button, :submit, :reset, :hidden');
                    $f.val('').attr('value','').removeAttr('checked').removeAttr('selected');
                }
            </script>
        </form>
    </body>
</html>

Note that I've added the inclusion of the jquery lib in the head section and added an onclick handler to the Reset button. Lastly, I've added the javascript code based on the feedback from some other answers here.

I have also added a preset value to one text field. The val('') function would not clear such a field, that's why I've also added attr('value','') to the last script line to clear such default values as well.

Improve this answer
0

You can do something similar to this in JS and call it from onclick within your button: 

function submit() {
  $('#fieldIdOne').val('');
  $('#fieldIdTwo').val('');
}

And then in your HTML file: 

<button id="submit" onclick="submit(); return false">SIGN UP</button>

If you happen to use this solution with Firebase, it actually won't send anything to the database unless you add return false right after the call.

Improve this answer
0

Another way to do that with HTMLFormControlsCollection:

for (let el of form.elements) el.value = null
Improve this answer
1
  • No, this does not work for inputs of type radio and checkbox. It even "destroys" their value, which is stored in value.
    – Abdull
    Commented Dec 19, 2019 at 15:52
-2

I just came across this question and have used an <a> to facilitate clearing a form by reloading the page. It is easy to style an <a> element to appear as a button.

e.g.

<a href="?" class="btn btn-default">Clear</a>

By using ? for the href attribute, the <a> will reload the page from the server without submitting it.

I prefer solutions which do not depend on JavaScript so hopefully this is of some use to someone.

Improve this answer
-3

Using JavaScript give the form an ID of 'myform':

document.getElementById('myform').reset();

Improve this answer
1
  • This will not solve the issue. If the form loads with pre-populated values, the reset will simply reset the form to those values.
    – Oded
    Commented May 17, 2011 at 9:29

Not the answer you're looking for? Browse other questions tagged or ask your own question.