JQuery中如何重置(reset)表单

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JQuery中如何重置(reset)表单相关的知识,希望对你有一定的参考价值。

参考技术A 由于JQuery中,提交表单是像下面这样的:Java代码$('#myform').submit()$('#myform').submit() 所以,想当然的认为,重置表单,当然就是像下面这样子喽:Java代码$('#myform').reset()$('#myform').reset()但是,不幸的是,这样写的话,会有一个让你很郁闷的结果,那就是,表单无法重置!后来,上网查了一下,说是,JQuery中没有reset方法,经核对,果然是没有。那有么没有办法通过JQuery来重置表单呢,答案是有的,不过是一种间接的方法,如下:Java代码$('#myform')[0].reset()也就是通过调用 DOM 中的reset方法来重置表单。本回答被提问者采纳 参考技术B <form id="form1" action="" method="post" runat="server">
<input name="inp" id="inp" value="1" />
<input id="res" name="res" type="reset" style="display:none;" />
</form>
$("input[name='res']").click();
参考技术C 代码如下:

<form id="form1" action="" method="post" runat="server">
<input name="inp" id="inp" value="1" />
</form>

方法一:
我们可以通过就是id实现 ,代码如下:
document.getElementById("form1").reset();
通过name实现,代码如下:
document.formName.reset();

方法二:
逐一清空,代码如下:
$("#inp").val("1");

但是表单太多的话可以如下写,代码如下:
$("input").val("");

设表单的默认值加type为reset的input ,代码如下:
<form id="form1" action="" method="post" runat="server">
<input name="inp" id="inp" value="1" />
<input id="res" name="res" type="reset" style="display:none;" />
</form>
<script>
$("input[name='res']").click();
</script>
资料参考:http://www.jb51.net/article/40325.htm

如何使用jquery重置表单中的多个选择框?

【中文标题】如何使用jquery重置表单中的多个选择框?【英文标题】:How to reset multiple select boxes in a form with jquery? 【发布时间】:2014-09-06 10:07:59 【问题描述】:

如何使用 jquery 重置表单中的多个选择框?

有多个选择框 它们是动态生成的,我们不知道它们会是什么 某些框选项标签将被标记为选中 小提琴:http://jsfiddle.net/Qnq82/

到目前为止,它会重置除选择之外的所有内容。

$('button#reset').click(function()
    $form = $('button#reset').closest('form');
    $form.find('input:text, input:password, input:file, select, textarea').val('');
    $form.find('input:radio, input:checkbox').removeAttr('checked').removeAttr('selected');
    $form.find('select').selectedIndex = 0;
  );

添加了一些标记:

<form id="form" name="form" method="post" class="form" role="form" action="inventory-search" enctype="multipart/form-data">


    <div class="form-group">
        <label for="grade">Grade</label>
        <select name="grade" class="form-control input-sm" onchange="this.form.submit();">
            <option value="">Any</option>
            <option value="opt1">opt1</option>
            <option value="opt2" selected="selected">opt2</option>

        </select>
    </div>


    <!-- there are 6 more select controls -->


    <div class="form-group">
        <label>&nbsp;</label>
        <button type="submit" name="search" id="search" value="search" class="btn button-sm btn-primary">Search</button>
    </div>

    <div class="form-group">
        <label>&nbsp;</label>
        <button type="reset" name="reset" id="reset" value="reset" class="btn button-sm btn-primary">Reset</button>
    </div>

</form>

【问题讨论】:

虽然在大多数情况下将selectedIndex 设置为0 会起作用,但它不会真正重置select 元素。它只是选择第一个选项。对于您的其他表单元素也是如此。但是,如果您想这样做,请使用 .prop: $form.find('select').prop('selectedIndex', 0); 。您正在将 DOM API 与 jQuery API 混合使用。 你能告诉我们标记吗,我试过了? “某些框选项标签将被标记为选中”,您是要重置为这些值还是始终要选择第一个选项? FWIW,在这种情况下,标记是无关紧要的。但你似乎在听除了我以外的其他人:) 哦,我刚刚看到您甚至还有一个名为“重置”的按钮。您可能还想更改它,因为默认重置按钮 &lt;input type="Reset" /&gt; 会重置我描述的值(将值更改回 HTML 中定义的值)。 因为&lt;button type="reset" ..&gt;。正如我在之前的评论中解释的那样。如果您在事件处理程序的末尾放置一个alert,您可以看到它如何首先选择第一个选项,然后将值重置为默认值:jsfiddle.net/Qnq82/8。有关按钮类型的更多信息,请参阅developer.mozilla.org/en-US/docs/Web/HTML/Element/…。 (事实证明 HTML 并不是无关紧要的;)) 【参考方案1】:

这将起作用:-

$form.find('select').prop('selectedIndex',0);

【讨论】:

【参考方案2】:

我使用此代码成功取消选择表单中的所有 html 选择:

$("#form1").find('select').prop('selectedIndex', -1);

【讨论】:

【参考方案3】:

我在 *** 上尝试并搜索了很多,但没有找到任何重置多选的解决方案。然后我找到了 This Link。这解决了我的问题。 这是代码示例。

$("#yourcontrolid").multiselect('clearSelection');

【讨论】:

【参考方案4】:

把最后一行改成这样:

$form.find('select')[0].selectedIndex = 0;

selectedIndexHTMLElement 的属性,而不是 jQuery 对象。

如果你知道值,那么你可以$form.find('select').val('value');

【讨论】:

我们不知道值并且有几个选择框。 不起作用。 ~ 可能是因为该选项被选中="selected" ?【参考方案5】:

以下代码对我有用:

$('.formID').find('select[id="selectID1"]').removeAttr('selected').trigger('change');
$('.formID').find('select[id="selectID2"]').removeAttr('selected').trigger('change');

【讨论】:

【参考方案6】:
$form.find('select').each(function()
    $(this).val($(this).find('option:first').val());
);

这个对我有用...

【讨论】:

以上是关于JQuery中如何重置(reset)表单的主要内容,如果未能解决你的问题,请参考以下文章

使用 jQuery 重置多阶段表单

如何使用带有 .reset() 方法的 jQuery 重置表单

jQuery重置表单

如何使用jquery重置表单中的多个选择框?

jsp中表单重置

表单reset无法重置hidden的解决方案