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

js重置form表单

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表单