js reset类型按钮和button类型按钮有什么不同?

JavaScript09

js reset类型按钮和button类型按钮有什么不同?,第1张

type='reset' 重置按钮,默认点击后触发的是reset事件,会重置其所属form表单里的所有控件,到默认状态(清空已经填写的所有文字内容,将checkbox,radiobox,select等控件重置为默认状态)

type='submit' 提交按钮,默认点击后触发的是表单的submit事件,提交其所属的表单

type='button' 一般按钮,默认点击后触发的是click事件,具体点击后进行什么样的操作,需要自己通过js代码来实现

思路:本题要想实现用javascript做出重置效果需要用到JavaScript实现重置表单(reset)的方法。

例子:

<form id="form1">

<input type="text" id="name"/>

<input type="button" value="这个用JavaScript清除" onclick="document.getElementById('form1').reset()"/>

<input type="reset" value="这个是Form清除" />//reset()重置

</form>

JS清空表单有二种方法:遍历和reset;

分别如下:

方法1:遍历页面元素

/*

清空FORM表单内容 id:表单ID*/

function ClearForm(id) {

var objId = document.getElementById(id)

if (objId == undefined) {

return

}

for (var i = 0i <objId.elements.lengthi++) {

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 = 0j <objId.elements[i].options.lengthj++) {

objId.elements[i].options[j].selected = false

}

}

else if (objId.elements[i].type == "textarea") {

objId.elements[i].value = ""

}

//else if (objId.elements[i].type == "file") {

// //objId.elements[i].select()

// //document.selection.clear()

// // for IE, Opera, Safari, Chrome

// var file = objId.elements[i]

// if (file.outerHTML) {

// file.outerHTML = file.outerHTML

// } else {

// file.value = ""// FF(包括3.5)

// }

//}

}

}

方法2:使用 reset 按钮

页面中增加:

<!--用来清空表单数据-->

<input type="reset" name="reset" style="display: none" />

触发 reset 事件:

$("input[type=reset]").trigger("click")