js表单提交和submit提交的区别

JavaScript013

js表单提交和submit提交的区别,第1张

js表单提交和submit提交的区别如下：

js提交表单时不会会带上按钮的参数传递到服务端。

而submit按钮提交的时候会把button上的name和value一起作为请求参数传递到服务端。

举例说明：

<form id="myfrom">

<input type="submit" onclick="doMySubmit()" name="MyList" value="SEND" class="button actionbutton" />

</form>

这里提交的时候会把参数名Mylist和参数值Send传到目标地址

<form id="myfrom">

<input type="button" onclick="doMySubmit()" name="MyList" value="SEND" class="button actionbutton" /> 

</form>

提交的脚本:

function doMySubmit() {

           var myform = document.getElementById('searchFilterForm')

           myform.myfield.value = "Hello World"

           myform.submit()

       }  

这种情况下不会把button的参数带给服务端。

根据元素name属性或者 id属性查找到对应元素 然后对value属性进行赋值 举个例子: 要对 的文本框赋值 document.getElementById("userName").value='张三'这样就可以了

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")