原生JS清空表单数据

最新推荐文章于 2023-07-26 11:31:25 发布

一如年少模样a

最新推荐文章于 2023-07-26 11:31:25 发布

阅读量3.5k

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/qq_31912631/article/details/81228350

版权

JavaScript 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

JS：

//清除表单中所有内容
function clear_onclick(obj) {
    var ResetInputId=obj.id;//获取点击按钮的ID
    if(ResetInputId == "") {
        alert("请设置清除按钮的ID属性");
        return false;
    } else {
        var ResetInput=document.getElementById(ResetInputId); //获取点击的按钮
        var FromClassName = ResetInput.form.className; //获取点击按钮所属表单的Class值 可修改为ID 或者 Name 值
        if(FromClassName == "") {
            alert("请设置所需清空表单的Class属性");
            return false;
        } else {
            var FromClassNum = document.getElementsByClassName(FromClassName).length;
            if(FromClassNum > 1) {
                alert("请设置所需清空表单的Class属性唯一");
                return false;
            }else{
                ClearFrom(FromClassName);
            }
        }
    }
}
function ClearFrom(Classname){
    var Clear_From = document.getElementsByClassName(Classname)[0];
    for(var a = 0; a< Clear_From.elements.length; a++) {
        if(Clear_From.elements[a].type == "text") {				//类型为text的
            Clear_From.elements[a].value = "";
        } else if(Clear_From.elements[a].type == "password") {	//类型为password的
            Clear_From.elements[a].value = "";
        } else if(Clear_From.elements[a].type == "radio") {		//类型为radio的
            Clear_From.elements[a].checked = false;
        } else if(Clear_From.elements[a].type == "checkbox") {	//类型为
            Clear_From.elements[a].checked = false;
        } else if(Clear_From.elements[a].type == "select-one"){	//单选下拉菜单
            Clear_From.elements[a].options[0].selected = true;	//选中第一个options
        } else if(Clear_From.elements[a].type == "select-multiple") { //多选下拉菜单
            for(var b = 0; b< Clear_From.elements[a].options.length; b++) { //将所有options设为false
                Clear_From.elements[a].options[b].selected = false;
            }
        } else if(Clear_From.elements[a].type == "textarea") {
            Clear_From.elements[a].value = "";
        }
    }
}

HTML：

<form class="form_reset" action="studentMeg.html" method="get" onsubmit="return add_onclick()"> 
     <div class="button_box">
            <input id="add"
                   class="button" type="submit" name="add" value="添加">
            <input id="clear" onclick="clear_onclick(this)"
                   class="button" type="button" name="clear" value="清除">
     </div>
</form>