清空form表单数据的两种方式

2,508 阅读1分钟

方法1:遍历页面元素

**清空form表单内容  id:表单ID **

<script type="text/javascript">
function ClearForm(id) {
    var objId = document.getElementById(id);
    if (objId == undefined) {
        return;
    }
    for (var i = 0; i < objId.elements.length; i++) {
        if (objId.elements[i].type == "text") {
            objId.elements[i].value = "";
        }
        else if (objId.elements[i].type == "password") {
            objId.elements[i].value = "";
        }
        else if (objId.elements[i].type == "radio") {
            objId.elements[i].checked = false;
        }
        else if (objId.elements[i].type == "checkbox") {
            objId.elements[i].checked = false;
        }
        else if (objId.elements[i].type == "select-one") {
            objId.elements[i].options[0].selected = true;
        }
        else if (objId.elements[i].type == "select-multiple") {
            for (var j = 0; j < objId.elements[i].options.length; j++) {
                objId.elements[i].options[j].selected = false;
            }
        }
        else if (objId.elements[i].type == "textarea") {
            objId.elements[i].value = "";
        }

    }
}
</script>

image.gif

方法2:使用 reset 按钮

页面中增加

如果有“按钮”

<input type="reset" name="reset" style="display: none;" />
触发 reset 事件
$("input[type=reset]").trigger("click");

image.gif

如果没有“按钮”但是这种方法无法清空带有默认值 vlue = "88" checked selected****的表单input

$('#formId')[0].reset();

image.gif

所以可以这样做

$(':input','#formId') 
.not(':button, :submit, :reset, :hidden') 
.val('') 
.removeAttr('checked') 
.removeAttr('selected');

如果有用的话请大家点赞!不足之处请大家留言指正。谢谢!