#起因

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

// <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. （原创）c++11改进我们的模式之改进单例模式

    我会写关于c++11的一个系列的文章,会讲到如何使用c++11改进我们的程序,本次讲如何改进我们的模式,会讲到如何改进单例模式.观察者模式.访问者模式.工厂模式.命令模式等模式.通过c++11的改进, ...

  2. 隐藏windows任务栏中的窗口显示

    在实际应用中遇到类似下列需要: 隐藏windows窗口,在windows任务栏中窗口不可见,但应用程序在后台运行. windows应用程序的窗口默认会在任务栏中添加一个可见的窗口项,方便用户操作和在不 ...

  3. pip升级Python程序包

    列出当前安装的包: pip list 列出可升级的包: pip list --outdate 升级一个包: pip install --upgrade requests // mac,linux,un ...

  4. ubuntu下安装与卸载软件方法

    http://www.cnblogs.com/JamyWong/archive/2009/11/19/1606442.html 1.通过deb包安装的情况:安装.deb包:代码:sudo dpkg - ...

  5. 【Python】打印object对象

    print (object .__dict__) print (dir(object))

  6. python各类项目模块记录

    看看下面这些项目,并试着用它们实现一些东西出来:• The Django Tutorial 试着用 Django Web Framework 创建一个 web 应用.• SciPy 如果你对科学,数学 ...

  7. 【WPF】使用CefSharp嵌入HTML网页

    需求:WPF项目中要做用户的商铺主页,由于考虑到每个商家的主页布局各不相同,不能用XAML写死布局.最好的办法是WPF这边XAML写好一个容器,用户使用HTML可视化编辑器(比如这个)来准备好网页,输 ...

  8. C语言 · 数组排序去重

    算法训练 数组排序去重   时间限制:1.0s   内存限制:512.0MB        问题描述 输入10个整数组成的序列,要求对其进行升序排序,并去掉重复元素. 输入格式 10个整数. 输出格式 ...

  9. 远程log调试工具console.re

    http://console.re/ https://github.com/kurdin/console-remote 前文提到在手机微信上调试代码很痛苦,看不到日志.为了看到日志,得把日志发到服务器 ...

  10. Hadoop与Spark之间的比较

    Hadoop与Spark之间的比较 Hadoop框架的主要模块包括如下: Hadoop Common Hadoop分布式文件系统(HDFS) Hadoop YARN Hadoop MapReduce ...