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 相关文章推荐
这些年、我收集的JQuery代码小结
Aug 01 Javascript
原生js做的手风琴效果的导航菜单
Nov 08 Javascript
JavaScript异步编程Promise模式的6个特性
Apr 03 Javascript
jquery datatable后台封装数据示例代码
Aug 07 Javascript
node.js中的fs.symlinkSync方法使用说明
Dec 15 Javascript
理解JavaScript中Promise的使用
Jan 18 Javascript
基于JavaScript实现类似于百度学术高级检索功能
Mar 02 Javascript
利用Angular.js限制textarea输入的字数
Oct 20 Javascript
node.js博客项目开发手记
Mar 16 Javascript
vue-video-player 通过自定义按钮组件实现全屏切换效果【推荐】
Aug 29 Javascript
js仿京东放大镜效果
Aug 09 Javascript
小程序实现点击tab切换左右滑动
Nov 16 Javascript
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
php实现的在线人员函数库
2008/04/09 PHP
php后台如何避免用户直接进入方法实例
2013/10/15 PHP
php等比例缩放图片及剪切图片代码分享
2016/02/13 PHP
确保Laravel网站不会被嵌入到其他站点中的方法
2019/10/18 PHP
Javascript 更新 JavaScript 数组的 uniq 方法
2008/01/23 Javascript
JavaScript中的isXX系列是否继续使用的分析
2011/04/16 Javascript
EditPlus注册码生成器(js代码实现)
2013/03/25 Javascript
将文本输入框内容加入表中的js代码
2013/08/18 Javascript
jquery parent和parents的区别分析
2013/10/02 Javascript
巧用局部变量提升javascript性能
2014/02/24 Javascript
详解JavaScript UTC时间转换方法
2016/01/07 Javascript
修复jQuery tablesorter无法正确排序的bug(加千分位数字后)
2016/03/30 Javascript
JavaScript仿flash遮罩动画效果
2016/06/15 Javascript
详解js运算符单竖杠“|”与“||”的用法和作用介绍
2016/11/04 Javascript
React根据宽度自适应高度的示例代码
2017/10/11 Javascript
浅谈webpack下的AOP式无侵入注入
2017/11/12 Javascript
JavaScript面向对象的程序设计(犯迷糊的小羊)
2018/05/27 Javascript
小程序实现多个选项卡切换
2020/06/19 Javascript
JS如何调用WebAssembly编译出来的.wasm文件
2020/11/05 Javascript
[03:47]2015国际邀请赛第三日现场精彩回顾
2015/08/08 DOTA
python多线程抓取天涯帖子内容示例
2014/04/03 Python
python2 与python3的print区别小结
2018/01/16 Python
《与孩子一起学编程》python自测题
2018/05/27 Python
对pyqt5多线程正确的开启姿势详解
2019/06/14 Python
python实现两张图片拼接为一张图片并保存
2019/07/16 Python
python读写csv文件的方法
2019/08/13 Python
python实现对列表中的元素进行倒序打印
2019/11/23 Python
通过代码实例了解Python异常本质
2020/09/16 Python
HTML5几个设计和修改的页面范例分享
2015/09/29 HTML / CSS
Reebok俄罗斯官方网上商店:购买锐步运动服装和鞋子
2016/09/26 全球购物
小学教师师德反思
2014/02/03 职场文书
高中课前三分钟演讲稿
2014/09/13 职场文书
质量保证书格式
2015/02/27 职场文书
公司优秀员工推荐信
2015/03/24 职场文书
写作指导:怎么书写竞聘演讲稿?
2019/07/04 职场文书
学会掌握自己命运的十条黄金法则:
2019/08/08 职场文书