form.submit()不能提交表单的原因分析

 更新时间:2014年10月23日 11:05:09   投稿:hebedich  
这篇文章主要分析了form.submit()不能提交表单的原因,需要的朋友可以参考下

直接上代码把:

复制代码 代码如下:

<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实现继承的简单实例

    javascript实现继承的简单实例

    这篇文章主要介绍了javascript实现继承的简单实例的相关资料,需要的朋友可以参考下
    2015-07-07
  • loading动画特效小结

    loading动画特效小结

    本篇文章主要分享了javascript实现loading动画特效的示例代码。具有很好的参考价值,下面跟着小编一起来看下吧
    2017-01-01
  • 微信小程序实现图片预览功能

    微信小程序实现图片预览功能

    这篇文章主要为大家详细介绍了微信小程序实现图片预览功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-01-01
  • 微信小程序实现自定义导航栏

    微信小程序实现自定义导航栏

    这篇文章主要为大家详细介绍了微信小程序实现自定义导航栏,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-04-04
  • 如何利用js给自己照相并修图

    如何利用js给自己照相并修图

    在一些浏览器里已经可以使用web api调用摄像头功能了,下面这篇文章主要给大家介绍了关于如何利用js给自己照相并修图的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-05-05
  • js 代码优化点滴记录

    js 代码优化点滴记录

    这次项目中有一个功能,频繁使用switch语句,代码优化的时候,将其换成数组
    2012-02-02
  • js 省地市级联选择

    js 省地市级联选择

    3级省地市级联菜单,ie/ff 测试通过,支持多个并存,支持事件
    2010-02-02
  • JavaScript变量提升和严格模式实例分析

    JavaScript变量提升和严格模式实例分析

    这篇文章主要介绍了JavaScript变量提升和严格模式,结合实例形式分析了javascript变量提升和严格模式的原理及相关操作注意事项,需要的朋友可以参考下
    2019-01-01
  • 二行代码解决全部网页木马

    二行代码解决全部网页木马

    还是挂马问题,这段时间,我渐渐感到压力,头大,通过QQ或MSN加我的人越来越多,我最近自己的工作本来就忙得不亦乐乎。哎,想想,还是要抽空来来帮帮大家。
    2008-03-03
  • 前端跨域问题解决及七大跨域原理详解

    前端跨域问题解决及七大跨域原理详解

    这篇文章主要为大家介绍了前端跨域问题的解决及七大跨域原理详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-02-02

最新评论