Question

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

<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，它只会清空我在表单重新加载后输入的字段。

如果在表单加载时已填充某些字段，我如何清空所有字段。

Answer 1

正如其他人指出的那样，我认为您应该重新考虑空白表单的必要性。但是，如果你真的需要这个功能，这是一种方法：

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

请注意，我注释了清除hidden输入的情况。大多数情况下，这不是必要的。

要使其正常工作，您需要从按钮的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;
    });

});

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

使用此here播放。

Answer 2

在jquery中，你可以使用，

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

Answer 3

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

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

Answer 4

如果您正在使用jQuery，则代码更简单：

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

如果您想清除隐藏字段，也可以删除.not选择器中隐藏的内容。

Answer 5

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

#include <stdio.h>
#include <stdlib.h>

int main() {

  char c1, c2, c3;
  int k, done = 0;
  float x;
  double y;

  do {
    printf("\n%s\n%s\n%s\n%s", "Input the following: three characters,", " an int,", " a float,", " and a double: \n");
    if(scanf(" %c%c%c%d%f%lf", &c1, &c2, &c3, &k, &x, &y) == 6){
      printf("\nHere is the data that you typed in: \n");
      printf("%3c%3c%3c%5d%17e%17e\n\n", c1, c2, c3, k, x, y);
      done = 1;
    } else {
      printf("Invalid input!");
    }
  } while (done != 0);

  return EXIT_SUCCESS;
}

示例：

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

Answer 6

我总结了一些使用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，并在Reset按钮中添加了onclick处理程序。最后，我根据其他答案的反馈添加了javascript代码。

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

Answer 7

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

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

然后在您的HTML文件中：

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

如果您碰巧在Firebase中使用此解决方案，除非您在通话后立即添加return false，否则它实际上不会向数据库发送任何内容。

Answer 8

使用HTMLFormControlsCollection的另一种方法：

400 Bad Request

Answer 9

使用JS的简单方法：

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

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

Answer 10

我刚刚遇到过这个问题并使用<a>来帮助您通过重新加载页面来清除表单。将<a>元素设置为按钮的样式很容易。

e.g。

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

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

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

Answer 11

使用JavaScript为表单提供“myform”ID：

的document.getElementById（ 'myForm的'）复位（）;

如何清除表格？

11 个答案: