认真研究下HTML之id、name、form、submit

#起因

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

// <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对象！

 

posted on 2018-01-25 09:56  LarryZeal  阅读(457)  评论(0)  编辑  收藏  举报

导航