form.submit()不能提交表单的原因分析


Posted in Javascript onOctober 23, 2014

直接上代码把:

<div id="register">

<h4>会员注册</h4>

<div class="formdiv">

<form method="post" action="register.php?action=register" name="register" id="registerForm">

<dl>

<dt>请认真填写以下内容</dt>

<dd class="hasspan">

用户名:<input type="text" name="username">

</dd>

<dd class="hasspan">

密码:<input type="password" name="pwd">

</dd>

<dd class="hasspan">

确认密码:<input type="password" name="pwdagain">

</dd>

<dd id="tximg">

<img src="img/face/m01.gif" alt="选择头像" id="faceimg">

<input type="hidden" name="touxiang" value="">

<label id="imgsrclabel">m01.gif</label>

</dd>

<dd style="margin-right:120px;">

验证码:<input type="text" name="code">

<span>

<img src="code.php" alt="code" id="code" name="code">

<a href="#code" id="change">换一张</a>

</span>

</dd>

<dd class="btns">

<input type="button" name="submit" id="submit" value="注册">

<input type="button" name="quit" id="quit" value="退出">

</dd>

</dl>

</form>

</div>

</div>

表单数据提交到本页面,下面是js处理

/*注册表单提交*/

function formDeal()

{

var btnSubmit = document.getElementById('submit');

var formId = document.getElementById('registerForm');

btnSubmit.onclick = function()

{

//表单的submit()方法不能提交表单

formId.submit();

}
}

如果表单提交,在本页面有一段提示信息

if(!empty($_GET['action']) && $_GET['action'] == 'register')

{

echo '你提交了数据';

exit();

}

结果是测试了许久都没有看到提示信息,以为是代码错了或者方法写错了,仔细核对,在结果官方文档,确认没有出错。

formId.submit()不能提交,就暂时只好把btnSubmit的type改为submit

this.type="submit"

在网上查了资料,原因归结为两点:

1、表单中不能有name=”submit” 的标签

2、表单中不能缺少《enctype=”multipart/form-data”》

经测试,此两点乃荒谬,并没有解决我的问题(或许是我的问题环境不一样)

后来,以为论坛的坛友建议我把注册按钮的ID改个名字,不用submit。改正之后,表单正常提交,提示信息出现。

最后总结:button的id不要设置为submit,否则可能会引起混淆,导致表单的submit()方法不能提交表单。在命名ID时,名字最好不要和现有的api在名称上重复,避免不必要的烦扰。

Javascript 相关文章推荐
浅析js设置控件的readonly与enabled属性问题
Dec 25 Javascript
浅谈JavaScript异常处理语句
Jun 26 Javascript
jQuery实现彩带延伸效果的网页加载条loading动画
Oct 29 Javascript
angularjs封装bootstrap时间插件datetimepicker
Jun 20 Javascript
JS实现获取当前URL和来源URL的方法
Aug 24 Javascript
JavaScript实现Java中Map容器的方法
Oct 09 Javascript
微信小程序 devtool隐藏的秘密
Jan 21 Javascript
微信小程序 本地数据存储实例详解
Apr 13 Javascript
微信小程序与后台PHP交互的方法实例分析
Dec 10 Javascript
Vue+webpack实现懒加载过程解析
Feb 17 Javascript
JavaScript中的this基本问题实例小结
Mar 09 Javascript
vue实现轮播图帧率播放
Jan 26 Vue.js
Google Maps API地图应用示例分享
Oct 23 #Javascript
深入分析JQuery和JavaScript的异同
Oct 23 #Javascript
jquery实现导航固定顶部的效果仿蘑菇街
Oct 22 #Javascript
用jquery模仿的a的title属性的例子
Oct 22 #Javascript
运用jQuery定时器的原理实现banner图片切换
Oct 22 #Javascript
用简洁的jQuery方法toggleClass实现隔行换色
Oct 22 #Javascript
jQuery实现的导航条切换可显示隐藏
Oct 22 #Javascript
You might like
常用星际术语索引(新手指南)
2020/03/04 星际争霸
php中Ctype函数用法详解
2014/12/09 PHP
微信开发之获取JSAPI TICKET
2017/07/07 PHP
laravel学习笔记之模型事件的几种用法示例
2017/08/15 PHP
php 删除一维数组中某一个值元素的操作方法
2018/02/01 PHP
PHP使用PhpSpreadsheet操作Excel实例详解
2020/03/26 PHP
javascript StringBuilder类实现
2008/12/22 Javascript
利用cookie记住背景颜色示例代码
2013/11/04 Javascript
setInterval()和setTimeout()的用法和区别示例介绍
2013/11/17 Javascript
Node.js中使用mongoskin操作mongoDB实例
2014/09/28 Javascript
js实现文本框中输入文字页面中div层同步获取文本框内容的方法
2015/03/03 Javascript
JavaScript判断对象是否为数组
2015/12/22 Javascript
js 单引号替换成双引号,双引号替换成单引号的实现方法
2017/02/16 Javascript
Angular 4依赖注入学习教程之InjectToken的使用(八)
2017/06/04 Javascript
百度小程序自定义通用toast组件
2019/07/17 Javascript
简单了解JavaScript arguement原理及作用
2020/05/28 Javascript
[01:00:25]2018DOTA2亚洲邀请赛3月30日 小组赛A组 VG VS Liquid
2018/03/31 DOTA
python实现从字符串中找出字符1的位置以及个数的方法
2014/08/25 Python
Python的Flask框架的简介和安装方法
2015/11/13 Python
Python3中使用PyMongo的方法详解
2017/07/28 Python
python语音识别实践之百度语音API
2018/08/30 Python
python 监听salt job状态,并任务数据推送到redis中的方法
2019/01/14 Python
对Python3 解析html的几种操作方式小结
2019/02/16 Python
python中的decimal类型转换实例详解
2019/06/26 Python
python os.path.isfile()因参数问题判断错误的解决
2019/11/29 Python
如何使用python记录室友的抖音在线时间
2020/06/29 Python
Priority Pass机场贵宾室会籍计划:全球超过1200间机场贵宾室
2018/08/26 全球购物
利达恒信公司.NET笔试题面试题
2016/03/05 面试题
给医务人员表扬信
2014/01/12 职场文书
2014年重阳节老干部座谈会上的讲话稿
2014/09/25 职场文书
2015年元旦联欢晚会活动总结
2014/11/28 职场文书
放假通知格式
2015/04/14 职场文书
如何制定销售人员薪酬制度?
2019/07/09 职场文书
《帝国时代4》赛季预告 新增内容编译器可创造地图
2022/04/03 其他游戏
mysql的单列多值存储实例详解
2022/04/05 MySQL
基于Python实现西西成语接龙小助手
2022/08/05 Golang