#起因

同事希望在提交之后关闭父窗口，但是，始终没有提交请求发出。他的代码大概如下：

// <form id='f' action=...

// <button onclick='fun()'>...

fun(){

    $('#f').submit();

    window.parent.close();

}

运行结果是，“直接关闭，没有提交”。

在建议他用Ajax提交的同时，又好奇为什么会这样，于是测试了下，发现规律很简单：

form的submit动作是在所有动作之后执行的，类似于在Java中的finally中执行submit。

至于原因，猜测是因为同步submit之后，会直接跳转到返回的页面，不会再执行后续的动作 -- 为了保证后续动作的执行，js应该是有这种机制来保证submit在最后执行！

#验证

很简单，代码如下：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>INDEX</title>

</head>

<body>

    <form id='f1' name='f' action="">

        <input id="k" name="username" type="text">

        <button onclick="a()">GOGOGO</button>

    </form>

    <script>

        //我擦，只要有form.submit，那必须在所有动作之后完成！ 类似finally

        function a(){

            $('#f1').submit();

            $('#k').val('kkkkkkkkkk') //修改一下内容，看看是提交暂存，还是最后才提交

            alert('xxx')

        }

    </script>

</body>

</html>

form没有设置action，直接提交到本地址；没有设置method，默认GET；

这样，提交就能在地址栏看到提交的内容！

打开页面，随便输入点内容，然后点击提交，会①再弹出框，②再修改输入框内容，③最后才是提交！

此时，在地址栏就能看到提交的内容！

file:///C:/Users/Larry/Desktop/demo/index.html?name=kkkkkkkkkk

#延伸

验证了之后，就开始怀疑是否是jQuery独有的现象，于是使用document.forms[0].submit() 再验证了一番，结果相同，所以应该是js的机制。

好了，submit问题至此结束。但是，又对document.forms 发生了兴趣，想要知道是否能通过id来获取指定的form。

查找了一番，说是可以使用form的name来获取，即 document.forms['name']，需要给form指定name属性。测试可行。

测试的时候顺手又测试了下能否使用id，结果也是可行。

于是更好奇id和name的区别（惭愧，以前从没考虑过这个问题）。。。

#id VS name

简单的说，id就是唯一的身份证，不能重复（其实可以重复，只不过只会使用第一个）。

而name，则是form及其内部专用的，如果相同name的表单只有一个，那作用和id是一样的。只有在多个表单带有相同name的时候，name才和id不同。

最明显的例子：

<input type='checkbox' name='hobby' value='eat'>吃

<input type='checkbox' name='hobby' value='play'>玩

<input type='checkbox' name='hobby' value='sleep'>睡

上面这个时候，name才和id不同。

document.getElementById

document.getElementByName

#补充

alert(document.forms['f'].hobby)     //name有多个的时候，返回这个name对应的dom对象列表！

alert(document.forms['f'].username)   //name只有一个的时候，返回这个name对应的dom对象！

认真研究下HTML之id、name、form、submit的更多相关文章

  1. k.tt 研究下生成的逻辑代码：从壹开始前后端分离 [.netCore 填坑 ] 三十二║ 四种方法快速实现项目的半自动化搭建

    更新 1.更新小伙伴 @大龄Giser 提出好点子:试试VS的插件扩展:VSIX.ItemProject等,将T4模板给制作插件,这里先记下,有懂的小伙伴可以自己先试试,我会在以后更新. 2.感谢小伙 ...

  2. 学习和研究下unity3d的四元数 Quaternion

    学习和研究下unity3d的四元数 Quaternion 今天准备学习和研究下unity3d的四元数 Quaternion 四元数在电脑图形学中用于表示物体的旋转,在unity中由x,y,z,w 表示 ...

  3. select 下拉框 disabled 则 Form 获取不到值

    select 下拉框 disabled 则 Form 获取不到值 有时候需要禁用 下拉框 , 但是表单又需要获取到 下拉框的值. 解决方案1: 使用文本框和隐藏域 来代替下拉框 disabled 解决 ...

  4. 研究下JavaScript中的Rest參数和參数默认值

    研究下JavaScript中的Rest參数和參数默认值 本文将讨论使 JavaScript 函数更有表现力的两个特性:Rest 參数和參数默认值. Rest 參数 通常,我们须要创建一个可变參数的函数 ...

  5. 上传文件时用form.submit提交的时候在低版本的IE中报拒绝访问的错误

    上传文件的时候,在IE7下总是传不了,但FireFox,IE11和Chrome下则可以上传.发现是form.submit();时出错了(“拒绝访问”). html代码为: <label oncl ...

  6. form.submit() not a function的元凶

    今天晚上学习jquery form plugin时,在明白了该插件的用法时, (1)该插件是将form的HTTP请求 改为AJax请求. (2)支持像jQuery.ajax(options)一样 的o ...

  7. 文件上传时jquery.form.js中提示form.submit SCRIPT5: 拒绝访问

    利用其它控件触发file的click事件来选择文件后,使用jquery.form.js中的submit方法提交时IE报错:form.submit SCRIPT5: 拒绝访问,其它浏览器正常, < ...

  8. js提交表单错误：document.form.submit() is not a function

    今天在写JS时,遇上这么个错误:"document.form.submit() is not a function",经过一番搜索,最终找到了修复方法. 这个错误一般是由于表单&l ...

  9. form submit提交

    form内控件参数自动添加到url后,而自定义的url参数则不能添加到url后 $('#fm').form('submit', { url: 'Data/Diary.ashx?dt=' + new D ...

随机推荐

  1. 菜鸟教程之工具使用（四）——借助JRebel使Tomcat支持热部署

    JRebel是一个J2EE热部署的工具.使用它可以减少浪费8-18%的开发时间在项目的构建和部署上.虽然Java也提供了HotSpot的JVM,但是如果你修改的类中有方法名称变动的话,HotSpot就 ...

  2. python2/3 中删除字典中value为空的键值对方法

    python2 data_info = { 'account': 1, 'remark': 2, 'sort': '', 'weight': '', } for key in data_info.ke ...

  3. 【Socket】linux无连接编程技术

      1.mystery引入      1)无连接编程也称为UDP编程,是采用UDP报文的形式完成的网络通信    2)UDP是一种对等通信,本身不区分服务器端和客户端    3)对等通信,最容易想到的 ...

  4. 什么是内存溢出以及java中内存泄漏5种情况的总结

    内存泄漏定义(memory leak):一个不再被程序使用的对象或变量还在内存中占有存储空间. 一次内存泄漏似乎不会有大的影响,但内存泄漏堆积后的后果就是内存溢出.内存溢出 out of memory ...

  5. How To Set Up SSH Keys

    How To Set Up SSH Keys.https://www.digitalocean.com/community/tutorials/how-to-set-up-ssh-keys--2

  6. JAVA-JSP内置对象之application对象获得其他信息

    相关资料:<21天学通Java Web开发> application对象获得其他信息1.通过调用application对象的其他方法可以获得更多信息,如文件的MIME类型.获得指定Loca ...

  7. oc调javascript方法（evaluateJavaScript:）&&js给oc发通知

    在ios8中引入了WKWebView控件,通过在头文件引用 #import <WebKit/WebKit.h>来使用该控件, 这个控件与oc的原生控件uiwebview很相似,它更方便oc ...

  8. 基于jQuery+CSS3实现人物跳动特效

    分享一款基于jQuery+CSS3实现人物跳动特效.这是一款类似gif图片效果的CSS3动画特效代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class=& ...

  9. XXE漏洞初窥

    前言: XXE Injection即XML External Entity Injection也就是XML外部实体注入攻击.漏洞是在对非安全的外部实体数据进⾏行处理时引发的安全问题. XML相关名词科 ...

  10. 多平台的网站实现单点登录系统(SSO)的开发思路 让你的会员中心更加统一（参考资料）

    单点登录并不是一个新鲜的玩意儿,比较官方的解释是企业业务整合的解决方案之一,通俗来讲SSO就是一个通用的用户中心,国内比较流行的UCenter就是一套单点登录解决方案.而近期以CSDN明文存储用户密码 ...