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() 方法重置表单，这样就不需要包含重置按钮。