form.submit()不能提交表单的错误原因及解决方法


Posted in Javascript onOctober 13, 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 06 Javascript
图片无缝滚动代码(向左/向下/向上)
Apr 10 Javascript
解析Jquery中如何把一段html代码动态写入到DIV中(实例说明)
Jul 09 Javascript
Jquery的基本对象转换和文档加载用法实例
Feb 25 Javascript
深入理解Angular2 模板语法
Aug 07 Javascript
JS 循环li添加点击事件 (闭包的应用)
Dec 10 Javascript
node.js 和HTML5开发本地桌面应用程序
Dec 13 Javascript
微信小程序  TLS 版本必须大于等于1.2问题解决
Feb 22 Javascript
vue.js简单配置axios的方法详解
Dec 13 Javascript
浅谈如何使用webpack构建多页面应用
May 30 Javascript
微信小程序云开发 搭建一个管理小程序
May 17 Javascript
python实现迭代法求方程组的根过程解析
Nov 25 Javascript
js的touch事件的实际引用
Oct 13 #Javascript
JQuery 使用attr方法实现下拉列表选中
Oct 13 #Javascript
5个JavaScript经典面试题
Oct 13 #Javascript
Json实现异步请求提交评论无需跳转其他页面
Oct 11 #Javascript
innerHTML动态添加html代码和脚本兼容多个浏览器
Oct 11 #Javascript
ie8模式下click无反应点击option无反应的解决方法
Oct 11 #Javascript
JS 获取鼠标左右键的键值方法
Oct 11 #Javascript
You might like
PHP 一个随机字符串生成代码
2010/05/26 PHP
PHP校验ISBN码的函数代码
2011/01/17 PHP
将二维数组转为一维数组的2种方法
2014/05/26 PHP
php实现只保留mysql中最新1000条记录
2015/06/18 PHP
CI框架常用经典操作类总结(路由,伪静态,分页,session,验证码等)
2016/11/21 PHP
PHP递归算法的简单实例
2019/02/28 PHP
FormValid0.5版本发布,带ajax自定义验证例子
2007/08/17 Javascript
JS解密入门之凭直觉解
2008/06/25 Javascript
safari,opera嵌入iframe页面cookie读取问题解决方法
2010/06/23 Javascript
禁止IE用右键的JS代码
2013/12/30 Javascript
ParseInt函数参数设置介绍
2014/01/02 Javascript
jquery链式操作的正确使用方法
2014/01/06 Javascript
jQuery实现表格颜色交替显示的方法
2015/03/09 Javascript
JavaScript中字符串分割函数split用法实例
2015/04/07 Javascript
JavaScript在网页中画圆的函数arc使用方法
2015/11/13 Javascript
纯JavaScript代码实现文本比较工具
2016/02/17 Javascript
浅谈JavaScript的push(),pop(),concat()方法
2016/06/03 Javascript
浅谈JS中的bind方法与函数柯里化
2016/08/10 Javascript
微信小程序遇到修改数据后页面不渲染的问题解决
2017/03/09 Javascript
详解微信小程序 登录获取unionid
2017/06/27 Javascript
如何从零开始手写Koa2框架
2019/03/22 Javascript
JS函数参数的传递与同名参数实例分析
2020/03/16 Javascript
从零学Python之入门(五)缩进和选择
2014/05/27 Python
详细介绍Ruby中的正则表达式
2015/04/10 Python
轻松理解Python 中的 descriptor
2017/09/15 Python
Python tkinter和exe打包的方法
2020/02/05 Python
pyecharts绘制中国2020肺炎疫情地图的实例代码
2020/02/12 Python
HTML5播放实现rtmp流直播
2020/06/16 HTML / CSS
英国独特的时尚和生活方式品牌:JOY
2018/03/17 全球购物
俄罗斯鲜花递送:AMF
2020/04/24 全球购物
仓库班组长岗位职责
2013/12/12 职场文书
我的五年职业生涯规划
2014/01/23 职场文书
机械设计及其自动化专业求职信
2014/06/09 职场文书
用人单位终止解除劳动合同证明书
2014/10/06 职场文书
2016预备党员培训心得体会
2016/01/08 职场文书
Windows10安装Apache2.4的方法步骤
2022/06/25 Servers