How to clear a form?

2019-01-11 04:14发布

站内文章 / 移动开发
18 0 0

问题:

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.

回答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.



回答2:

In jquery simply you can use,

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


回答3:

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.



回答4:

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.



回答5:

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>


回答6:

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.



回答7:

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.



回答8:

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.



回答9:

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

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



标签： html forms reset
举报

收藏的人(0)

Ta的文章 更多文章
登录 后发表评论
0条评论
还没有人评论过~