#起因

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

// <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. scala future

    https://docs.scala-lang.org/overviews/core/futures.html https://docs.scala-lang.org/overviews/index. ...

  2. VLAN,GRE,VXLAN

    https://www.cnblogs.com/charles1ee/p/6629009.html VLAN介绍 局域网LAN(多个机器连接一个Hub或者Switch),是一个广播域 VLAN:一台S ...

  3. CMD命令下访问Oracle数据库

    1.非集群下 Windows环境下数据库 127.0.0.1 只是个IP代表  实际要输入你要访问的数据库服务器IP地址的 如果数据库服务器不在本机上,需要加上数据库服务器的地址:用户名/密码@IP地 ...

  4. （原创）用C++11的std::async代替线程的创建

    c++11中增加了线程,使得我们可以非常方便的创建线程,它的基本用法是这样的: void f(int n); std::thread t(f, n + ); t.join(); 但是线程毕竟是属于比较 ...

  5. 每日英语：Marriage makes our children richer — Here's why

    Young people from less-privileged homes are more likely to graduate from college and earn more if ra ...

  6. 此编译单元不包含在frame元数据中指定的factoryClass，无法加载配置的运行时共享库

    警告:此编译单元不包含在frame元数据中指定的factoryClass,无法加载配置的运行时共享库.要在没有运行时共享库的情况下进行编译,请将 -static-link-runtime-shared ...

  7. 【ARM】串行通信

    异步通信 所谓异步通信,是指数据传送以字符为单位,字符与字符间的传送是完全异步的,位与位之间的传送基本是同步的.   异步串行通信的特点可以概括如下 1)以字符为单位传送信息 2)相邻两字符间的间隔是 ...

  8. sql语句插入百万测试数据

    开发的过程中,很多时候我们需要插入百万数据来测试功能和性能,今天我来教大家最简单的插入方法 -----------------1.新建表--------------------- CREATE TAB ...

  9. Asp.Net采集网页方法大全（5种）

    /// <summary>方法一:比较推荐 /// 用HttpWebRequest取得网页源码 /// 对于带BOM的网页很有效,不管是什么编码都能正确识别 /// </summar ...

  10. 怎样把任意exe程序注册成windows系统服务(手动注册服务)

    1. 要实现这个功能要用到微软提供的两个小工具“instsrv.exe”和“srvany.exe”(下载地址:http://www.cr173.com/soft/64394.html). 先下载这两个 ...