#起因

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

// <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. 行为类模式（四）：迭代器（Iterator）

    定义 提供一种方法访问一个容器(container)对象中的各个元素,而又不暴露该对象的内部细节. UML 优点 简化了遍历方式,对于对象集合的遍历,还是比较麻烦的,对于数组或者有序列表,我们尚可以通 ...

  2. 每天一个linux命令(4) df命令

    linux中df命令的功能是用来检查linux服务器的文件系统的磁盘空间占用情况.可以利用该命令来获取硬盘被占用了多少空间,目前还剩下多少空间等信息. 1．命令格式: df [选项] [文件] 2．命 ...

  3. 【Redis】Redis的基本安装及使用、Jedis的基本使用、spring-data-redis的集成、主从模式、哨兵模式

    在Linux上安装Redis Redis的安装很简单.基本上是下载.解压.运行安装脚本.我用的Redis版本是3.2.1. [nicchagil@localhost app]$ wget -q htt ...

  4. LeetCode: Insertion Sort List 解题报告

    Insertion Sort List Sort a linked list using insertion sort. SOLUTION: 使用一个dummynode 创建一个新的链,将旧的节点插入 ...

  5. 使用spin.js优化等待ajax返回时的页面效果

    [本文出自天外归云的博客园] 最近在做一个JIRA信息统计的系统,在统计JIRA关联信息的过程中由于需要等待ajax返回结果到前端,时间较长,所以要添加一段等待时的loading画面,使用spin.j ...

  6. ASP.NET学习笔记（5）——原生Ajax基本操作

    说明(2017-11-4 15:32:49): 1. 回北京后又快一个月了,上次在家写的下回预告,到底是没把加水印写完,而且这次也不想写.. 2. 上次许的愿,十月份看完asp.net,已经泡汤了,翻 ...

  7. C#学习笔记（18）——C#构造函数中this和base的使用

    说明(2017-7-21 10:29:44): 1. 关于构造函数里的this和base,在网上查了很多资料,但都没有讲的很清楚的,或者是能让我看懂的,感觉都是叽叽歪歪,罗里吧嗦,磨磨唧唧的,有的直接 ...

  8. 基于jQuery游戏网站焦点图轮播特效

    基于jQuery的一款游戏网站焦点图轮播特效.这是一款带进度条定时切换,带缩略图切换的jQuery网站焦点图代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <cente ...

  9. Android 底部按钮BottomNavigationView + Fragment + viewPager 的使用（一）

    实现的效果,左右滑动,底部栏跟着滑动,中间加的是分帧的页面        上代码:主页面activity_main.xml <?xml version="1.0" encod ...

  10. InstallShield Build错误：Internal build error 6041

    点击左侧菜单: Media-Release-选择release版本(例如Release1)-Build标签-   keey unused directories 改为no(默认为yes)