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中使用了document和window哪些属性和方法小结
Sep 13 Javascript
基于javascript滚动图片具体实现
Nov 18 Javascript
基于replaceChild制作简单的吞噬特效
Sep 21 Javascript
一道JS前端闭包面试题解析
Dec 25 Javascript
Javascript实现单例模式
Jan 24 Javascript
第五章之BootStrap 栅格系统
Apr 25 Javascript
jQuery实现全选、反选和不选功能
Aug 16 jQuery
微信小程序实现的一键复制功能示例
Apr 24 Javascript
vue.js 实现a标签href里添加参数
Nov 12 Javascript
vue使用openlayers实现移动点动画
Sep 24 Javascript
在vue项目中 实现定义全局变量 全局函数操作
Oct 26 Javascript
vue 递归组件的简单使用示例
Jan 14 Vue.js
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
pw的一个放后门的方法分析
2007/10/08 PHP
PHP执行批量mysql语句的解决方法
2013/05/02 PHP
php echo, print, print_r, sprintf, var_dump, var_expor的使用区别
2013/06/20 PHP
浅析php中抽象类和接口的概念以及区别
2013/06/27 PHP
在JavaScript中获取请求的URL参数
2010/12/22 Javascript
js substr支持中文截取函数代码(中文是双字节)
2013/04/17 Javascript
鼠标移到导航当前位置的LI变色处于选中状态
2013/08/23 Javascript
jquery ajaxSubmit 异步提交的简单实现
2014/02/28 Javascript
jQuery学习笔记之 Ajax操作篇(三) - 过程处理
2014/06/23 Javascript
Express作者TJ告别Node.js奔向Go
2014/07/14 Javascript
JS仿hao123导航页面图片轮播效果
2016/09/01 Javascript
React Form组件的实现封装杂谈
2018/05/07 Javascript
three.js实现炫酷的全景3D重力感应
2018/12/30 Javascript
详解JavaScript的this指向和绑定
2020/09/08 Javascript
[57:41]Secret vs Serenity 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
python实现八大排序算法(1)
2017/09/14 Python
Python enumerate索引迭代代码解析
2018/01/19 Python
python读取中文txt文本的方法
2018/04/12 Python
python使用Matplotlib画条形图
2020/03/25 Python
python虚拟环境迁移方法
2019/01/03 Python
python实现弹窗祝福效果
2019/04/07 Python
Pandas+Matplotlib 箱式图异常值分析示例
2019/12/09 Python
使用Keras预训练好的模型进行目标类别预测详解
2020/06/27 Python
使用Python画了一棵圣诞树的实例代码
2020/11/27 Python
HTML5实现简单图片上传所遇到的问题及解决办法
2016/01/20 HTML / CSS
公司行政经理岗位职责
2013/12/24 职场文书
大学生实习证明范本
2014/01/15 职场文书
《燕子》教学反思
2014/02/18 职场文书
幼儿教师求职信
2014/05/24 职场文书
乡镇平安建设汇报材料
2014/08/25 职场文书
爱护公物演讲稿
2014/09/09 职场文书
学校中秋节活动总结
2015/03/23 职场文书
信息技术研修心得体会
2016/01/08 职场文书
Kubernetes中Deployment的升级与回滚
2022/04/01 Servers
navicat 连接Ubuntu虚拟机的mysql的操作方法
2022/04/02 MySQL
Java后端 Dubbo retries 超时重试机制的解决方案
2022/04/14 Java/Android