js重置form表单

原创

Marydon 2023-02-14 08:35:32 ©著作权

文章标签 JS 重置 form表单隐藏域 文章分类 HarmonyOS 后端开发

©著作权归作者所有：来自51CTO博客作者Marydon的原创作品，请联系作者获取转载授权，否则将追究法律责任

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());
}

经测试，总结：

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

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

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

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

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