将表单域重置为初始状态

Posted 2023-02-22

【中文标题】将表单域重置为初始状态

【英文标题】：Reseting form fields to initial state

【发布时间】：2013-03-27 19:11:39

【问题描述】：

我正在使用下面的代码使用 Jquery 来设置我的表单字段

 $("#frmlogin").reset()

上面是我用来重置下面表单中的字段的代码

<form  name='frmlogin' method='POST' id="login_form" style="margin:0 auto; margin-top:50px; width: 40%; height:300px; text-align:center;">

                        <input class="oFormJumbo oFormMed oInputText" type="text" name="requiredLogin" placeholder="Login Id" AUTOCOMPLETE=OFF />
                        <div class="cleaner h10"></div>
                        <input class="oFormJumbo oFormMed oInputText "  type="password" value="" name="password" placeholder="Password"  AUTOCOMPLETE=OFF onfocus="changetoUpperCase(document.frmlogin.requiredLogin.value);" />
                        <div class="cleaner h10"></div>
                        <a href="javascript:fp();">Forgot Password?</a>
                        <div class="cleaner"></div>
                        <input style="margin-left:0px; "   class="submit_btn float_l" type="button" value="Sign In" name="Sign In" onClick="javascript:func_get_data();"/>
                        <input style="margin-left: 200px; "  class="submit_btn float_r" type="button" value="Reset" id="reset" name="reset"   onclick="javascript:Reset()"/>

 </form>

由于某种原因，代码无法正常工作。 JavaScript 抛出以下异常

TypeError: $("#frmlogin").reset is not a function
[Break On This Error]   

$("#login_form").reset()

谁能告诉我为什么它不起作用？我已经包含了 Jquery.js。

根据 Adils 的建议，我什至尝试过

*$("#login_form")[0].reset()*

现在它给了

TypeError: $("#frmlogin")[0] is undefined
[Break On This Error]   

$("#frmlogin")[0].reset()

我错过了什么？

我尝试了下面建议的所有代码，除了 Amit Agrawal，因为我想使用 Jquery。没有炒锅。我知道我的休息代码是提供的。我在表单中缺少一些东西

【问题讨论】：

How to reset a form using jQuery with .reset() method的可能重复

【参考方案1】：

您是否因为某些原因忽略了重置输入元素？

http://jsfiddle.net/BhTv5/

<input type="reset" />

【参考方案2】：

你正在使用jQuery对象调用reset，使用DOM对象调用reset，你可以使用索引器将jQuery对象转换为DOM对象。

改变

$("#login_form").reset()

到

$("#login_form")[0].reset()

编辑 基于 cmets，问题的另一个原因是重置按钮的 ID 和名称。令人惊讶的是，如果有任何 id 或名称重置的输入，那么 form.reset() 函数将停止工作。更改重置按钮的id和名称，上面的代码就可以工作了。

Live Demo

改变

<input style="margin-left: 200px; "  class="submit_btn float_r" type="button" value="Reset" id="reset" name="reset"   onclick="javascript:Reset()/>

到

<input style="margin-left: 200px; "  class="submit_btn float_r" type="button" value="Reset" id="myreset" name="myreset" />

与按钮绑定事件

$('#myreset').click(function ()    
    $("#login_form")[0].reset();
);

【讨论】：

我试过你的代码现在它给出了 TypeError: $("#frmlogin")[0] is undefined [Break On This Error] $("#frmlogin")[0].reset()

另一个奇怪的问题是按钮的 id 和名称，如果表单中的任何输入元素具有 id 重置，则在表单 dom 元素上调用重置失败。用演示检查我的更新答案。

【参考方案3】：

试试这个代码你不会得到类型错误。你声明 id 是错误的你声明了表单 Name not id 尝试使用 id 并重置表单。

document.getElementById("login_form").reset();

（或）

  $("#login_form").reset();

【参考方案4】：

reset 是 javascript 方法，需要 DOM 对象

应该是

$("#login_form")[0].reset()

【参考方案5】：

您必须使用属性选择器获取name：

$('form[name="frmlogin"]').reset();

或带有 id：

$('#login_form').reset();

您的代码中断是因为您没有引用具有正确属性的表单。

【参考方案6】：

使用 JavaScript

document.getElementById("login_form").reset();//Use the id of the form

使用 jQuery

("#login_form").reset();