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汉字排序问题 支持中英文混排,兼容各浏览器,包括CHROME
Dec 20 Javascript
JavaScript等比例缩放图片控制超出范围的图片
Aug 06 Javascript
Javascript让DEDECMS告别手写Tag
Sep 01 Javascript
window.location 对象所包含的属性
Oct 10 Javascript
js插件设置innerHTML时在IE8下提示“未知运行时错误”解决方法
Apr 25 Javascript
JavaScript通过事件代理高亮显示表格行的方法
May 27 Javascript
jQuery入门之层次选择器实例简析
Dec 11 Javascript
Kotlin学习第一步 kotlin语法特性
May 25 Javascript
Vue2.x通用条件搜索组件的封装及应用详解
May 28 Javascript
JS数组splice操作实例分析
Oct 12 Javascript
ant design中upload组件上传大文件,显示进度条进度的实例
Oct 29 Javascript
vue+springboot实现登录验证码
May 27 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
PHP 时间转换Unix时间戳代码
2010/01/22 PHP
php获取客户端电脑屏幕参数的方法
2015/01/09 PHP
php实现json编码的方法
2015/07/30 PHP
php简单的上传类分享
2016/05/15 PHP
Zend Framework入门应用实例详解
2016/12/11 PHP
php中Ioc(控制反转)和Di(依赖注入)
2017/05/07 PHP
php实现和c#一致的DES加密解密实例
2017/07/24 PHP
PHP实现可添加水印与生成缩略图的图片处理工具类
2018/01/16 PHP
document.onreadystatechange事件的用法分析
2009/10/17 Javascript
jquery实现div阴影效果示例代码
2013/09/16 Javascript
Labelauty?jQuery单选框/复选框美化插件分享
2015/09/26 Javascript
JavaScript如何禁止Backspace键
2015/12/02 Javascript
一种Javascript解释ajax返回的json的好方法(推荐)
2016/06/02 Javascript
通过javascript进行UTF-8编码的实现方法
2016/06/27 Javascript
jQuery 3.0 的 setter和getter 模式详解
2016/07/11 Javascript
node.js中module.exports与exports用法上的区别
2016/09/02 Javascript
JS组件系列之使用HTML标签的data属性初始化JS组件
2016/09/14 Javascript
javascript实现获取一个日期段内每天不同的价格(计算入住总价格)
2018/02/05 Javascript
Vue的路由动态重定向和导航守卫实例
2018/03/17 Javascript
实例详解Node.js 函数
2018/06/10 Javascript
[20:21]《一刀刀一天》第十六期:TI国际邀请赛正式打响,总奖金超过550万
2014/05/23 DOTA
零基础写python爬虫之爬虫的定义及URL构成
2014/11/04 Python
Python使用defaultdict读取文件各列的方法
2017/05/11 Python
Python基于tkinter模块实现的改名小工具示例
2017/07/27 Python
Python爬虫中urllib库的进阶学习
2018/01/05 Python
TensorFlow神经网络优化策略学习
2018/03/09 Python
Python设计模式之状态模式原理与用法详解
2019/01/15 Python
Python使用mongodb保存爬取豆瓣电影的数据过程解析
2019/08/14 Python
Python中读取文件名中的数字的实例详解
2020/12/25 Python
Ariat官网:美国马靴和服装品牌
2019/12/16 全球购物
银行员工职业规划范文
2014/01/21 职场文书
体育教师求职信
2014/05/24 职场文书
学校党风廉政建设调研报告
2015/01/01 职场文书
2015年创先争优工作总结
2015/05/23 职场文书
工作报告范文
2019/06/20 职场文书
解决python3安装pandas出错的问题
2021/05/20 Python