首页 > 代码库 > js重置form表单

js重置form表单

2024-10-30 14:07:02   210人阅读

CreateTime--2017年7月19日10:37:11
Author:Marydon

js重置form表单

需要使用的方法：reset()

示例：

　　HTML部分

<form id="test">    <input id="test2" type="hidden" value="2"/>    <textarea>测试是否会重置文本域，默认带值的不会被清空</textarea>    <textarea id="test3"></textarea>            测试手工录入<input type="text" value=""/>    <input type="text" value="设置初始值" id="test4"/>            <input type="button" value="重置" onclick="testReset();"/>    <input type="button" value="赋值" onclick="assignment();"/>    <select>        <option value="">请选择</option>        <option value="" selected>测试是否会重置下拉框</option>        <option value="">下拉框选中选项会被还原</option>    </select>    <!-- 经测试该值不会被还原 -->    <input id="test5" type="hidden" value="测试隐藏域通过js改变后会不会还原"/></form>

　　JAVASCRIPT部分

function testReset () {    document.getElementById("test").reset();    alert($(‘#test5‘).val());}function assignment () {    $(‘#test3‘).val(‘通过js赋值或手工录入的信息都会被清空！‘);    $(‘#test4‘).val(‘改变初始值‘);    $(‘#test5‘).val(‘5‘);    alert($(‘#test5‘).val());}

经测试，总结：

　　1.特别注意：reset()方法实现的效果是还原，而不是重置（清空）；

　　　　例：带默认值的form表单标签（如：textarea,文本框），经用户修改后，调用重置方法，会被还原成初始值（默认值）；

　　　　　　调用重置方法后，下拉框会选中初次加载页面时选中的选项。

　　2.重置reset()对隐藏域无效，即不会对隐藏域进行还原处理，隐藏域通过js改变后不会被还原；

　　3.准确地说，jQuery没有重置form表单的方法，$(‘#test‘)[0].reset()，这种重置form表单的方法还是通过js实现的，因为：$(‘#test‘)[0]会将jQuery元素转换成dom元素。

 

js重置form表单


联系
我们