Question

我有一个具有特定输入文本的表单。所有这些都有自己的重置值.. 例如......

<input type="text" 
       name="<?php echo $row['FieldName'];?>"
       id="<?php echo $row['FieldName'];?>" 
       class="required" 
       style="font:12px Verdana ; width:250px;" 
       value="<?php echo $row2[$nameROW]?>" />
<?php }

因此，当我使用正常的RESET功能时..它不会清除我的表格。因为它的重置值已经设置好了......

那我怎么能完全清除不重置表格？

Answer 1

如果要避免字段被重置为其初始值，则需要实际循环遍历所有输入字段，文本字段和选择元素，将它们的值分别设置为空字符串，将属性设置为false，等

你可以在http://www.electrictoolbox.com/javascript-clear-form/看到一个在线看起来像什么的例子，或者http://www.electrictoolbox.com/jquery-clear-form/看起来像jQuery解决方案（有点简洁）。

Answer 2

这是一个易于使用的（纯js）函数，可用于通过id或name重置任何表单：

// License: WTFPL
function clearForm(id)
{
    // find form by its id or name
    var form = document.getElementById(id) || document[id] || id;

    // cycle through elements
    for (var i = 0, item; item = form.elements[i]; ++i) {
        switch (item.type) {
            case 'select-one':
                item.selectedIndex = 0;
                break;

            case 'select-multiple':
                for (var j = 0, option; option = item.options[j]; ++j) {
                    option.selected = false;
                }
                break;

            case 'checkbox':
            case 'radio':
                item.checked = false;
                break;

            default:
                item.value = '';
        }
    }
}

要打电话：

clearForm('id or name of your form');

Answer 3

Jonathan是正确的，但它不完整。这是完整的解决方案：

for ( i = 0; i < document.myForm.elements.length; i++ )
  document.myForm.elements[i].fieldName.value = "";

如果您需要进一步的帮助，请告诉我们。这会遍历表单中的每个项目，然后将它们清空。如果您需要更多帮助，请告诉我们。

Answer 4

使用以下jQuery将指定字段设置为空白：

$("#btn_reset").click(function(){
     $("input:text[id=xxx]").val("");
});

使用以下jQuery将所有字段值设置为空白：

$("#btn_reset").click(function(){
    $(":input").val("");
});

在上面的例子中，＃btn_reset是Reset按钮的ID。您还需要将上述脚本放在脚本标记内的普通$（document）.ready（）函数的页面处理程序中。当然，上面要求你首先在页面顶部包含jQuery库。如果您有任何疑问，请告诉我。

以下是完整的HTML文件：

<HTML>
    <HEAD>
        <TITLE></TITLE>
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script>
    <script type="text/javascript" language="javascript">
        $(document).ready(function() {
            $("#btn_reset").click(function() {
                $("input:text[id=xxx]").val("");
            });
        });
    </script>
    </HEAD>
    <BODY>
        <form>
            <input type="text" name="xxx" id="xxx" value="default"  />
            <input type="button" value="Reset" id="btn_reset" />
        </form>
    </BODY>
</HTML>

请注意，您需要将按钮类型从重置更改为按钮，否则在jQuery设置值后，重置按钮行为将再次将值设置为我们不想要的默认值。

清除具有重置值的HTML表单

4 个答案: