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 相关文章推荐
论坛里点击别人帖子下面的回复,回复标题变成“回复 24# 的帖子”
Jun 14 Javascript
IE6/7/8/9不支持exec的简写方式
May 25 Javascript
js判断选择的时间是否大于今天的代码
Aug 20 Javascript
jquery表单验证框架提供的身份证验证方法(示例代码)
Dec 27 Javascript
javascript实现简单的进度条
Jul 02 Javascript
JavaScript控制浏览器全屏及各种浏览器全屏模式的方法、属性和事件
Dec 20 Javascript
微信小程序开发实战教程之手势解锁
Nov 18 Javascript
vue自定义指令directive实例详解
Jan 17 Javascript
解决layui中table异步数据请求不支持自定义返回数据格式的问题
Aug 19 Javascript
微信小程序实现选项卡效果
Nov 06 Javascript
解决$store.getters调用不执行的问题
Nov 08 Javascript
微信小程序实现搜索框功能及踩过的坑
Jun 19 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与javascript的两种交互方式
2006/10/09 PHP
php 无限极分类
2008/03/27 PHP
PHPMailer邮件发送的实现代码
2013/05/04 PHP
PHP json_decode函数详细解析
2014/02/17 PHP
使用CodeIgniter的类库做图片上传
2014/06/12 PHP
php简单防盗链实现方法
2015/07/29 PHP
Yii2框架BootStrap样式的深入理解
2016/11/07 PHP
mac os快速切换多个PHP版本的方法
2017/03/07 PHP
BOOM vs RR BO5 第四场 2.14
2021/03/10 DOTA
js之WEB开发调试利器:Firebug 下载
2007/01/13 Javascript
firefox中用javascript实现鼠标位置的定位
2007/06/17 Javascript
IE和Firefox下javascript的兼容写法小结
2008/12/10 Javascript
Jquery ajaxsubmit上传图片实现代码
2010/11/04 Javascript
JS操作数据库的实例代码
2013/10/17 Javascript
点击按钮自动加关注的代码(sina微博/QQ空间/人人网/腾讯微博)
2014/01/02 Javascript
js确认删除对话框效果的示例代码
2014/02/20 Javascript
node.js实现BigPipe详解
2014/12/05 Javascript
javascript如何实现360度全景照片问题汇总
2016/04/04 Javascript
Bootstrap3多级下拉菜单
2017/02/24 Javascript
利用Node.js对文件进行重命名
2017/03/12 Javascript
JS简单实现获取元素的封装操作示例
2017/04/07 Javascript
JavaScript实现快速排序的方法分析
2018/01/10 Javascript
vue2.0路由切换后页面滚动位置不变BUG的解决方法
2018/03/14 Javascript
python中使用enumerate函数遍历元素实例
2014/06/16 Python
python批量同步web服务器代码核心程序
2014/09/01 Python
利用标准库fractions模块让Python支持分数类型的方法详解
2017/08/11 Python
python实现密码验证合格程序的思路详解
2020/06/01 Python
印度领先的眼镜电子商务网站:Lenskart
2019/12/16 全球购物
如何通过jdbc调用存储过程
2012/04/19 面试题
公司新年寄语
2014/04/04 职场文书
社区活动总结报告
2014/05/05 职场文书
预防传染病方案
2014/06/14 职场文书
综治工作心得体会
2014/09/11 职场文书
2015年政协委员工作总结
2015/05/20 职场文书
Python 发送SMTP邮件的简单教程
2021/06/24 Python
css清除浮动clearfix:after的用法详解(附完整代码)
2023/05/21 HTML / CSS