如何清除表格？

发布于 2024-11-07 12:59:55 字数 838 浏览 1 评论 0原文

例如，我有一个这样的表单：

<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>

当我按 Reset 时，它会清空所有字段。但是，如果我使用 URL 参数填充某些字段，然后按 Reset，它只会清空我在表单重新加载后输入的字段。

无论某些字段在表单加载时是否已填充，如何清空所有字段。

原文

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.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

不美如何 2024-11-14 12:59:56

您可以在 JS 中执行类似的操作，并在按钮内从 onclick 调用它：

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

然后在 HTML 文件中：

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

如果您碰巧将此解决方案与 Firebase 一起使用，它实际上不会向除非您在调用后立即添加 return false 。

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.

回复收藏 0 原文

℡Ms空城旧梦 2024-11-14 12:59:56

另一种方法是使用 HTMLFormControlsCollection：

for (let el of form.elements) el.value = null

Another way to do that with HTMLFormControlsCollection:

for (let el of form.elements) el.value = null

回复收藏 0 原文

野味少女 2024-11-14 12:59:56

我刚刚遇到这个问题，并使用来通过重新加载页面来方便地清除表单。将元素设置为按钮的样式很容易。

例如

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

通过使用？对于 href 属性，将从服务器重新加载页面而不提交它。

我更喜欢不依赖 JavaScript 的解决方案，所以希望这对某人有用。

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.

回复收藏 0 原文

暮凉 2024-11-14 12:59:56

使用 JavaScript 为表单指定“myform”ID：

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

回复收藏 0 原文

芸娘子的小脾气 2024-11-14 12:59:55

正如其他人指出的那样，我认为您应该重新考虑是否需要空白表格。
但是，如果您确实需要该功能，这是一种实现方法：

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;
}

请注意，我注释掉了清除隐藏输入的情况。大多数时候，这是没有必要的。

为此，您需要从按钮的 onclick 处理程序（或其他方式）调用该函数，例如：

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

您可以在 jsFiddle。

如果您在项目中使用 jQuery，则可以使用更少的代码来完成此操作（并且无需更改 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;
    });

});

另外，请注意，我不会清除隐藏输入、复选框的值和单选按钮。

请在此处尝试一下。

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.

回复收藏 0 原文

那片花海 2024-11-14 12:59:55

在 jquery 中你可以简单地使用，

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

In jquery simply you can use,

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

回复收藏 0 原文

逆蝶 2024-11-14 12:59:55

您必须通过 javascript 清除它们（或清除服务器端）。

reset 按钮只会将表单元素重置为其初始值 - 如果这是一个特定值，则它将重置为该值。

回复收藏 0 原文

孤独陪着我 2024-11-14 12:59:55

用JS实现的一个简单方法：

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

const { myForm } = document.forms;
myForm.reset();

A simple way to do it with JS:

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

const { myForm } = document.forms;
myForm.reset();

回复收藏 0 原文

你丑哭了我 2024-11-14 12:59:55

如果您使用 jQuery，代码会简单得多：

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

如果您还想清除隐藏字段，还可以从 .not 选择器中删除 :hidden。

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.

回复收藏 0 原文

睫毛溺水了 2024-11-14 12:59:55

清除表单的最简单方法是使用 HTML 标记

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

示例：

<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>

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>

回复收藏 0 原文

草莓味的萝莉 2024-11-14 12:59:55

我总结了一些使用 jQuery 的建议，以便为该问题提供更完整的解决方案：

<!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>

请注意，我已在 head 部分中添加了 jquery lib 的内容，并向重置按钮。最后，我根据其他一些答案的反馈添加了 javascript 代码。

我还在一个文本字段中添加了一个预设值。 val('') 函数不会清除这样的字段，这就是为什么我还在最后一个脚本行添加了 attr('value','')还要清除此类默认值。

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.

回复收藏 0 原文

~没有更多了~