码迷,mamicode.com
首页 > Web开发 > 详细

js重置form表单

时间:2017-07-19 12:02:57      阅读:490      评论:0      收藏:0      [点我收藏+]

标签:asc   默认   下拉框   sign   button   input   处理   页面   nbsp   

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

标签:asc   默认   下拉框   sign   button   input   处理   页面   nbsp   

原文地址:http://www.cnblogs.com/Marydon20170307/p/7204438.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!