html表单的几种提交方式总结

html-css010

html表单的几种提交方式总结,第1张

form保单提交的几种方法:

1、方法一:利用form的onsubmit()函数

<script type="text/javascript">

    function validateForm(){

  if(document.reply.title.value == ""){ //通过form名来获取form

  alert("please input the title!")

  document.reply.title.focus()

  return false

  }  

  if(document.forms[0].cont.value == ""){ //通过forms数组获取form

  alert("please input the content!")

  document.reply.cont.focus()

  return false

  }

  return true

  }

<form name="reply"  method="post" onsubmit="return validateForm( )">

        <input type="text" name="title"  size="80" /><br />

        <textarea name="cont" cols="80" rows="12"></textarea><br />

        <input type="submit" value="提交" >

</form>

注意:

1.onsubmit属性内容一定要有return关键字,否则函数会直接执行,不会返回

2.validateForm一定要返回一个boolean类型的返回值

3.提交按钮要写成submit类型的

方法二:利用input类型为submit组件的onclick()函数

  1.将上面form标签中的onsubmit="return validateForm()"属性,去掉。

  2.为“提交”按钮添加onclick事件,如下:

   <input type="submit" value="提交" onclick="return validateForm()">

方法三:利用button组件的onclick()函数,手动提交

<script type="text/javascript">

function modifyItem() {

if (trim(document.getElementById("itemName").value) == "") {

alert("物料名称不能为空!")

document.getElementById("itemName").focus()

return

with (document.getElementById("itemForm")) {

method = "post"

action = "item.do?command=modify&pageNo=${itemForm.pageNo}"

submit()

}

}

//返回

function goBack() {

window.self.location = "item.do?command=list&pageNo=${itemForm.pageNo}"

}

</script>

<form name="itemForm" id="itemForm">

      <input name="itemNo" type="text"   id="itemNo" value="${ item.itemNo }" >

      <input name="itemName" type="text"   id="itemName" value="${ item.itemName }" >

     <input name="btnModify"  type="button" id="btnModify" value=“修改" onclick="modifyItem()">

</form>

注意:

1.提交时,设置form的action和methods属性,然后利用form.submit()函数提交。

在这呢一般情况下,添加都是需要提交表单的,所以用submit按钮,修改按钮一般都是通过点击然后跳转到其它的页面,所以在这只需要写一个js的跳转,然后写上你的url和传的参数即可,如上。

form表单的action 与url跳转是不一样的:

form表单可以给后台传递数据,在后台直接可以用request对象去向前台请求数据。

form表单传递数据有两种方式:

method="post":这是传递大量数据时用的,在数据传递之前会先将数据打包,因此这种传递数据的方式会效率会比较慢,但是穿过的数据都能正确解析,因此传中文不会有乱码。

method="get":以URL传递的,因为地址栏长度有限,所以对数据量是有限制的,而且传递的数据必须是ASCCI码值范围内的,因此,传中文会有乱码,需特殊处理。

url跳转到action只能通过url的参数来传递数据,action?参数名=参数值&……,在后台也可以用request对象去向前台请求url的参数值(url传中文参数需要进行特殊处理)