首页 > 编程笔记 > JavaScript笔记 > JS事件

JS提交和重置form表单

本节示例讲解 JavaScript 的提交 form 表单和重置 form 表单。

提交表单

使用 <input> 和 <button> 标签都可以定义提交按钮,只要将 type 属性值设置为“submit”即可,而图像按钮则是通过将 <input> 的 type 属性值设置为“image”。当单击提交按钮或图像按钮时,就会提交表单。

示例1

在下面示例中,当在表单内的文本框中输入文本之后,单击“提交”按钮会触发 submit 事件,该函数将禁止表单提交数据,而是弹出提示对话框显示输入的文本信息。
<form id="form1" name="form1" method="post" action="">
    <input type="text" name="t" id="t" />
    <input name="" type="submit" />
</form>
<script>
    var t = document.getElementsByTagName("input")[0];
    // 获取文本框的引用指针
    var f = document.getElementsByTagName("form")[0];
    // 获取表单的引用指针
    f.onsubmit = function(e){  // 在表单元素上注册submit事件处理函数
        alert(t.value);
        return false;  // 禁止提交数据到服务器
    }
</script>

示例2

在下面示例中,当表单内没有包含“提交”按钮时,在文本框中输入文本之后按 Enter 键也一样能够触发 submit 事件。
<form id="form1" name="form1" method="post" action="">
    <input type="text" name="t" id="t" />
</form>
<script>
    var t = document.getElementsByTagName("input")[0];
    // 获取文本框的引用指针
    var f = document.getElementsByTagName("form")[0];
    // 获取表单的引用指针
    f.onsubmit = function(e){
        alert(t.value);
    }
</script>

在 <textarea> 文本区中按 Enter 键只会换行,不会提交表单。

以这种方式提交表单时浏览器会在将请求发送给服务器之前触发 submit 事件,用户有机会验证表单数据,并决定是否允许表单提交。

示例3

阻止事件的默认行为可以取消表单提交。下面示例先验证文本框中是否输入字符,如果为空,则调用 preventDefault() 方法阻止表单提交。
<form id="form1" name="form1" method="post" action="">
    <input type="text" name="t" id="t" />
</form>
<script>
    var t = document.getElementsByTagName("input")[0];  // 获取文本框的引用指针
    var f = document.getElementsByTagName("form")[0];  // 获取表单的引用指针
    f.onsubmit = function(e){
        if(t.value.length < 1){
            var  event = e || window.event;
            if (event.preventDefault){
                event.preventDefault();
            } else {
                event.returnValue = false;
            }
        }
    }
</script>

示例4

如果要禁止按 Enter 键提交响应,可以监测键盘响应,当按下 Enter 键时设置其返回值为 false,从而取消键盘的默认动作,禁止按 Enter 键提交响应行为。
<form id="form1" name="form1" method="post" action="">
    <input type="text" name="t" id="t" />
</form>
<script>
    var t = document.getElementsByTagName("input")[0];
    // 获取文本框引用指针
    t.onkeypress = function(e){  // 为文本框绑定键盘keypress事件处理函数
        var e = e || window.event;  // 标准化事件对象
        return e.keyCode != 13;
        // 当按下回车键时,设置返回值为false,禁止默认键盘行为
    }
</script>

示例5

调用 submit() 方法也可以提交表单,这样就不需要表单包含“提交”按钮,任何时候都可以正常提交表单。
<form id="form1" name="form1" method="post" action="">
    <input type="text" name="t" id="t" />
</form>
<script>
    var t = document.getElementsByTagName("input")[0];  // 获取文本框的引用指针
    var f = document.getElementsByTagName("form")[0];  // 获取表单的引用指针
    t.onchange = function(){
       f.submit();
    }
</script>
调用 submit() 方法不会触发 submit 事件,因此在调用此方法之前要先验证表单数据。

在实际应用中,会出现用户重复提交表单现象。例如,在第 1 次提交表单后,如果长时间没有反应,用户可能会反复单击提交按钮,这样容易带来严重后果,服务器反复处理请求组,或者错误保存用户多次提交的订单。解决方法:在第一次提交表单后禁用提交按钮,或者在 onsubmit 事件处理函数中取消表单提交操作。

重置表单

为 <input> 或 <button> 标签设置 type="reset" 属性可以定义重置按钮。
<input type="reset" value="重置按钮">
<button type="reset">重置按钮</button>
当单击重置按钮时,表单将被重置,所有表单字段恢复为初始值。这时会触发 reset 事件。

示例1

下面示例设计当单击【重置】按钮时,弹出提示框,显示文本框中的输入值,同时恢复文本框的默认值,如果没有默认值,则显示为空。
<form id="form1" name="form1" method="post" action="">
    <input type="text" name="t" id="t" />
    <input name="" type="reset" />
</form>
<script>
    var t = document.getElementsByTagName("input")[0];
    // 获取文本框的引用指针
    var f = document.getElementsByTagName("form")[0];
    // 获取表单的引用指针
    f.onreset = function(e){    // 在表单元素上注册reset事件处理函数
        alert(t.value);
    }
</script>

示例2

也可以利用这个机会,在必要时取消重置操作。下面示例检测文本框中的值,如果输入 10 个字符以上,就不允许重置了,避免丢失输入的文本。
<form id="form1" name="form1" method="post" action="">
    <input type="text" name="t" id="t" />  
    <input type="reset" value="重置按钮">
</form>
<script>
    var t = document.getElementsByTagName("input")[0];  // 获取文本框的引用指针
    var f = document.getElementsByTagName("form")[0];  // 获取表单的引用指针
    f.onreset = function(e){
        if(t.value.length > 10){
            var  event = e || window.event;
                if (event.preventDefault){
                    event.preventDefault();
                } else {
                    event.returnValue = false;
                }
          }
    }
</script>
用户也可以使用 form.reset() 方法重置表单,这样就不需要包含重置按钮。

所有教程

优秀文章