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元素。