利用JS提交表单的几种方法和验证
工作中发现表单提交方便的问题,很多时候IE下提交好好的,打了火狐下就出现了问题,利用提交按钮就不成功了,于是利用JS的方式就成功了,也不知道为什么。在导师的催促下就总结出以下的几种常用表单提交的方法。
第一种方式:表单提交,在form标签中增加onsubmit事件来判断表单提交是否成功
<script type="text/javascript">
function validate(obj) {
if (confirm("提交表单?")) {
alert(obj.value);
return true;
} else {
alert(obj.value);
return false;
}
}
</script>
<body>
<form action="http://www.baidu.com" οnsubmit="return validate(document.getElementByIdx_x('myText'));"> <!—参数的这种写法注意下-->
<input type="text" id="myText"/>
<input type="submit" value="submit"/>
</form>
</body>
第二种方式:通过button按钮来触发表单提交事件οnclick="submitForm();",会忽略掉其他标签中的属性,比如form标签中的onsubmit属性就失效了。这时为了进行表单验证,可以将验证代码放在submitForm();方法中进行验证。
<script type="text/javascript">
function validate() {
if (confirm("提交表单?")) {
return true;
} else {
return false;
}
}
function submitForm() {
if (validate()) {
document.getElementByIdx_x("myForm").submit();
}
}
</script>
<body>
<form action="http://www.baidu.com" id="myForm">
<input type="text"/>
<input type="button" value="submitBtn" οnclick="submitForm();"/> <!—也可以使用document.getElementByIdx_x(“该按钮的id”).click();来执行onclick事件-->
</form>
</body>
第三种方式:将onsubmit事件放在submit标签中,而不是form标签中,此时表单验证失效,点击提交按钮表单直接提交
<script type="text/javascript">
function validate() {
if (confirm("提交表单?")) {
return true;
} else {
return false;
}
}
</script>
<body>
<form action="http://www.baidu.com">
<input type="text"/>
<input type="submit" value="submit" οnsubmit="return validate()"/>
</form>
</body>
第四种方式:为submit按钮添加上onclick事件,其中该事件用于表单提交的验证,功能类似于在form标签中增加了onsubmit事件一样
<script type="text/javascript">
function validate() {
if (confirm("提交表单?")) {
return true;
} else {
return false;
}
}
</script>
<body>
<form action="http://www.baidu.com">
<input type="text"/>
<input type="submit" value="submit" οnclick="return validate()"/>
</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按钮来触发表单提交事件οnclick="submitForm();",会忽略掉其他标签中的属性,比如form标签中的onsubmit属性就失效了。这时为了进行表单验证,可以将验证代码放在submitForm();方法中进行验证
function submitForm() {
if (validate()) {
document.getElementByIdx_x("myForm").submit();
}
}
document.getElementByIdx_x("myBtn").onclick = submitForm;
</script>
利用JS提交表单的几种方法和验证相关推荐
- Js提交表单的两种方法
提交表单一般有两种一种是submit按钮,一种是调用form的submit方法.虽然都是提交表单,但这两种还是有些差别的. 一般来说,提交form表单的时候需要做一些简单的验证,验证完后才能提交,避免 ...
- js表单提交 php,JavaScript提交表单的几种方法
在我们工作中我们会经常使用到form表单,相信大家再熟悉不过了,那么提交表单有很多种方法,JavaScript提交表单的方法又是如何呢,今天就带大家介绍下JavaScript提交表单的几种方法! 第一 ...
- mvc ajax提交html标签,Mvc提交表单的四种方法全程详解
Mvc提交表单的四种方法全程详解 2019-01-05 编程之家 https://www.jb51.cc 编程之家收集整理的这篇文章主要介绍了Mvc提交表单的四种方法全程详解,编程之家小编觉得挺不错的 ...
- java mvc中重复提交表单,spring mvc 防止重复提交表单的两种方法,推荐第二种
第一种方法:判断session中保存的token 比较麻烦,每次在提交表单时都必须传入上次的token.而且当一个页面使用ajax时,多个表单提交就会有问题. 注解Token代码: package c ...
- JS提交表单的几种方式
1.一个form多个submit,提交到不同的地址(通过表单name值引用) <html> <body><form name="form"> & ...
- Vue.js 提交表单
QQ:285679784 欢迎加入博主CSDN资源QQ群799473954(附加信息:CSDN博客)一起学习 ! <!DOCTYPE html> <html> <he ...
- 使用jquery.form.js提交表单并获取后台返回值
使用jquery.form.js提交表单并获取后台返回值,会把所有有name属性的值提交到后台 1.前台js代码 //使用jquery.form.js提交表单并获取后台返回值,会把所有有name属性的 ...
- php文本框自动补全,PHP自动补全表单的两种方法
效果图: 第一种:从数据库中检索之后补全 第二种:邮箱等纯前端的补全 先说第二种,使用开源的插件,所以相对简单. github上面的项目 completer. https://github.com/f ...
- php form 上传_php+html5使用FormData对象提交表单及上传图片的方法
本文实例讲述了php+html5使用FormData对象提交表单及上传图片的方法.分享给大家供大家参考.具体分析如下: FormData 对象,可以把form中所有表单元素的name与value组成一 ...
最新文章
- java datarow_DataSet DataTable DataRow 深入浅出
- MapReduce编程基础
- 全球及中国天然气终端销售市场产量预测及发展策略分析报告2021年版
- 并查集 - 除法求值
- 线程锁定CPU linux,linux 线程与CPU绑定
- apicloud代码压缩和全局加密
- 给CentOS添加第三方源(RPMForge源)
- Hibernate 简单的CURD操作
- MarkDown模板:接口文档
- 宝藏级UI组件库:FirstUI,微信小程序版+uniapp版更新至1.6.0,完美支持vue3
- 强烈推荐大家看这篇文章:iOS开发常用三方库、插件、知名博客等等(特别有用)
- 记小米公司的一次「测试开发工程师」面试
- 网络分析仪自动化测试软件,高效矢量网络分析仪自动测试方法
- 第三届人工智能、网络与信息技术国际学术会议(AINIT 2022)
- 对ratings_data和trust_data进行分析
- dfuse 现在提供持币人的完整视图及其历史
- abb机械手故障代码20082_ABB机器人报错代码:按事件日志进行故障排除报错代码1...
- CentOS 7 安装好后,无法使用小键盘的解决办法
- StringBuffer类,StringBuffer类和String的区别、String,StringBuffer,StringBuilder之间的区别
- Android项目实战:简单天气-刘桂林-专题视频课程
热门文章
- 【Groovy】MOP 元对象协议与元编程 ( 方法注入 | 使用 MetaClass 注入静态方法 )
- 【Windows 逆向】OD 调试器工具 ( CE 中获取子弹动态地址前置操作 | OD 中调试指定地址的数据 )
- 【Android 逆向】Android 进程注入工具开发 ( 调试进程中寄存器的作用 | 通过 EIP 寄存器控制程序运行 | EIP 寄存器的存档与恢复 )
- issubclass和isinstance 反射 内置方法(魔术方法)
- [Spring cloud 一步步实现广告系统] 17. 根据流量类型查询广告
- 小程序协同工作和发布
- JAVA基础——Switch条件语句
- centos6创建用户,设置ssh登录
- JavaWeb手机短信实现前台利用JS获取随机验证码,倒计时效果
- Matlab图像处理教程