利用JS提交表单的几种方法和验证 ajax提交form表单验证

工作中发现表单提交方便的问题,很多时候IE下提交好好的,打了火狐下就出现了问题,利用提交按钮就不成功了,于是利用JS的方式就成功了,也不知道为什么。在导师的催促下就总结出以下的几种常用表单提交的方法。

第一种方式:表单提交,在form标签中增加onsubmit事件来判断表单提交是否成功
<scripttype="text/javascript">
functionvalidate(obj) {
if(confirm("提交表单?")) {
alert(obj.value);
returntrue;
}else {
alert(obj.value);
returnfalse;
}
}
</script>
<body>
<formaction="http://www.baidu.com" onsubmit="returnvalidate(document.getElementByIdx_x('myText'));"><!—参数的这种写法注意下-->

<inputtype="text" id="myText"/>
<inputtype="submit" value="submit"/>

</form>
</body>

第二种方式:通过button按钮来触发表单提交事件onclick="submitForm();",会忽略掉其他标签中的属性,比如form标签中的onsubmit属性就失效了。这时为了进行表单验证,可以将验证代码放在submitForm();方法中进行验证。
<scripttype="text/javascript">
functionvalidate() {
if(confirm("提交表单?")) {
returntrue;
}else {
returnfalse;
}
}
利用JS提交表单的几种方法和验证 ajax提交form表单验证

functionsubmitForm() {
if(validate()) {
document.getElementByIdx_x("myForm").submit();
}
}
</script>
<body>
<formaction="http://www.baidu.com"id="myForm">

<inputtype="text"/>
<inputtype="button" value="submitBtn"onclick="submitForm();"/><!—也可以使用document.getElementByIdx_x(“该按钮的id”).click();来执行onclick事件-->

</form>
</body>

第三种方式:将onsubmit事件放在submit标签中,而不是form标签中,此时表单验证失效,点击提交按钮表单直接提交
<scripttype="text/javascript">
functionvalidate() {
if(confirm("提交表单?")) {
returntrue;
}else {
returnfalse;
}
}
</script>
<body>
<formaction="http://www.baidu.com">

<inputtype="text"/>
<inputtype="submit" value="submit" onsubmit="returnvalidate()"/>

</form>
</body>

第四种方式:为submit按钮添加上onclick事件,其中该事件用于表单提交的验证,功能类似于在form标签中增加了onsubmit事件一样
<scripttype="text/javascript">
functionvalidate() {
if(confirm("提交表单?")) {
returntrue;
}else {
returnfalse;
}
}
</script>
<body>
<formaction="http://www.baidu.com">

<inputtype="text"/>
<inputtype="submit" value="submit" onclick="returnvalidate()"/>

</form>
</body>

第五种方式:

<body>

<form action="http://www.baidu.com"id="myForm">

<input type="text"/>

<input type="button" value="submitBtn"id="myBtn"/>

</form>

</body>

<script type="text/javascript">

function validate() {

if (confirm("提交表单?")) {

return true;

} else {

return false;

}

}

通过button按钮来触发表单提交事件onclick="submitForm();",会忽略掉其他标签中的属性,比如form标签中的onsubmit属性就失效了。这时为了进行表单验证,可以将验证代码放在submitForm();方法中进行验证

function submitForm() {

if (validate()) {

document.getElementByIdx_x("myForm").submit();

}

}

document.getElementByIdx_x("myBtn").onclick = submitForm;

</script>

  

爱华网本文地址 » http://www.aihuau.com/a/25101017/365449.html

更多阅读

车辆保险查询的几种方法 如何查询车辆保险

对于已经投保了车险的车主来说,很多人都希望随时了解保单信息以及发生事故后的理赔信息。这就需要借助车辆保险查询这一手段,目前车主可通过拨打保险公司电话或是登陆相关网站实现这一目标。车辆保险查询的几种方法——步骤/方法车辆

家用不锈钢电水壶除垢的几种方法 电水壶除水垢

家用不锈钢电水壶除垢的几种方法——简介 不锈钢电水壶,作为一种常用家用小家电,在外山设计上并没有多少的特点,在使用过程中在常出现的现象就是在内壁上附着的水垢,不锈钢电水壶水垢,不仅会影响电水壶的使用效率,同时还对电水壶的使用寿

查询工商银行卡余额的几种方法 工商银行余额查询

查询工商银行卡余额的几种方法——简介 使用了工行银行一段时间了,有一天突然想查询工商银行卡上的余额了该怎么查询了,下面教你怎么查询。查询工商银行卡余额的几种方法——工具/原料拥有一张工行的银行卡,知道密码。查询工商银行卡

白凡士林治疗牛皮癣(银屑病)的几种方法介绍 银屑病治疗方法

一、什么是白凡士林白凡士林,WHITEVASELIN,是从石油中得到的多种烃的半固体混合物,为白色均匀的软膏状物;无臭或几乎无臭;与皮肤接触有滑腻感;具有一定的拉丝性。凡士林非常便宜,很多爱美的女士因此对它不屑一顾。事实上,与市场上其他更加

让笔记本电脑无线上网的几种方法 台式机无线上网

相信现在很多朋友都使用轻便笔记本, 对于电脑基础不是很好朋友, 笔记本无线上网就成为一个难题, 不像台式机直接上网线就可以了, 笔记本一般都不会固定在一个位置, 能无线上网才能最大的发挥用处. 这里就告诉你让笔记本电脑无线上网

声明:《利用JS提交表单的几种方法和验证 ajax提交form表单验证》为网友黑道大哥分享!如侵犯到您的合法权益请联系我们删除