如何用jQuery的.reset()方法重置一个表单

如何用jQuery的.reset()方法重置一个表单

如何用jQuery的.reset()方法重置一个表单?

重置可以使任何东西恢复到它的原始状态。JQuery没有reset()方法,但本地JavaScript有。因此,我们把jQuery元素转换成一个JavaScript对象。

JavaScript reset():reset()方法重置表单中所有元素的值(与点击重置按钮一样)。

JavaScript重置按钮的语法。

// type-1
<input type="reset">
// type-2
<input type="button" onclick="this.form.reset();">
// type-3
<input type="button" onclick="formname.reset();">

按钮本身会重置表单,但是,类型1和类型2,重置按钮应该在表单内部,类型3可以在外部或内部。
但重置按钮是一个更好的选择。(类型-1)

<input type="reset">
  • reset()的语法。
formObject.reset()
  • 将jQuery元素转换为JavaScript对象的语法。
$(selector)[0].reset()

或者,

$(selector).get(0).reset()

如果我们不想将jQuery元素转换为JavaScript对象,那么我们可以使用 trigger() 。

由于 trigger() 方法触发了指定的事件和所选元素的事件的默认行为(如表单提交)。
语法

$(selector).trigger(event, eventObj, ...)

示例:

<!DOCTYPE html>
<html>
  
<head>
    <title>Try jQuery Online</title>
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
  </script>
    <script>
        (document).ready(function() {
            ("button").click(function() {
                //("#d").trigger("reset");
                //("#d").get(0).reset();
                $("#d")[0].reset()
            });
        });
    </script>
</head>
  
<body>
    <center>
        <h1 style="color:green">GeeksforGeeks</h1>
        <h4> 
        Click on "Submit" to submit and 
          remaining resets to get form to original state. 
        </h4>
        <form id="d" action="/cgi-bin/test.cgi" name="geek">
            <table cellspacing="0" cellpadding="3" border="1">
                <tr>
                    <td align="center">Username</td>
                    <td>
                        <input type="text" name="name" />
                    </td>
                </tr>
                <tr>
                    <td align="center">Email</td>
                    <td>
                        <input type="text" name="name" />
                    </td>
                </tr>
                <tr>
                    <td align="center">Password</td>
                    <td>
                        <input type="password" />
                    </td>
                </tr>
                <tr>
                    <td align="center"></td>
                    <td>
                        <input type="submit" value="Submit" />
                    </td>
                </tr>
                <tr>
                    <td align="center"></td>
                    <td>
                        <input type="reset" value="reset button" />
                    </td>
                </tr>
            </table>
        </form>
        <br>
        <input type="button" 
               value="reset() outside form" 
               onclick="geek.reset();" />
        <button>resetby jQuery
    </center>
</body>
  
</html>

jQuery是一个开源的JavaScript库,它简化了HTML/CSS文档之间的交互,它以其 “少写多做 “的理念而广为人知。
你可以通过学习这个jQuery教程和jQuery实例,从基础开始学习jQuery。

Python教程

Java教程

Web教程

数据库教程

图形图像教程

大数据教程

开发工具教程

计算机教程