易栈网-膘叔

今天在RPC里面，阿刁提出个问题，FORM表单中，submit提交的时候，有时候有值，有时候无值 ，想问清楚是什么原因

状态描述：

1、FORM表单中，submit的name是Submit。即 <input type="submit" name="Submit" value="提交表单" />

2、当点击submit按钮时，FORM被提交，提交后获取的数组中有Submit下标的值

3、回到FORM表单，直接敲回车提交，这时候发现获取的数组中没有Submit下标。

纠结的是：为什么会有两种情况的不同

查找原因，最后基本确认，这是由于form在不同情况下，可以直接使用回车进行提交表单而导致的问题。这里有几篇参考文章：不同浏览器对回车提交表单的处理办法和表单提交按钮input和button的取舍。那么，为什么敲回车和点击submit不一样呢？怎么样才能让他们一样？

尝试将focus移到submit按钮上。敲回车提交。这时候，是带有Submit值的。如果focus不在submit按钮上，则无效。知道了问题的原因，那就有解决方法了。对于submit，不要设name值 。如果确实需要传递值 ，请使用hidden域进行值的提交。以防止数据产生偏差。

这篇文章我一直在纠结，是否要摘录过来，但我还是最终决定放上来了。
其实大家都知道，在网页中，可见的按钮有三种，一种是input，一种是button，最后一种，其实也不能管是按钮，它是由img转化而来的。最最常用的还是input和button，在以前的日子里，大家都习惯于用input，因为他直接拥有type=submit，而button没有，它更适合于表达button。
然而。。。

这点，在不同浏览器对回车提交表单的处理办法已经提过，但老王说的这个是变量的传递，以及在指定name的时候，POST变量的值的变化。不废话看原文：
最近写代码，处理很多表单，里面的Submit按钮有两种形式，分别是input和button，有点区别，做个试验：

先创建一个php文件demo.php， 用来接收表单数据：

<?php
var_dump($_POST);
?>

再创建一个html文件demo.html， 用来显示表单：

<form method="post" action="demo.php">
<input type="submit" name="foo" value="提交">
<input type="submit" name="bar" value="保存">
</form>

<form method="post" action="demo.php">
<button type="submit" name="foo" value="foo_value">提交</button>
<button type="submit" name="bar" value="bar_value">保存</button>
</form>

使用Firefox依次浏览，就能看到input和button的区别：input提交按钮显示的文字就是value，而button提交按钮显示的文字 和value是独立的，从这个意义上来看，button更有表现力，是更值得推荐的提交按钮实现方式。

可惜IE总是拖后腿，使用IETester里的 IE6，7，8分别浏览，就会发现button提交按钮在IE下有Bug：

首先，在IE6里，如果一个表单里有多个button形式的提交按钮，那么不管你点击其中哪个按钮，所有的button按钮都会被提交，而在IE7，8里 则点击哪个按钮，才提交哪个button按钮。此时，如果想在服务端判断用户点击了哪个按钮，只能使用Javascript来 处理。

另外，在IE6，7，8里，button形式的按钮在提交后，value属性都失效了，显示文字取代了value。

总结：从理论上来看，button形式的提交按钮优于input形式的提交按钮。但如果考虑浏览器通用性，很多时候还是只能使用input形式的提交按 钮。

参考：http://www.w3.org/TR/html401/interact/forms.html
老王的文章在：表 单提交按钮input和button的取舍

不知道你是否注意过，在firefox或者Chrome下面，即使没有定义input type=submit，只要点击任何一个button，都能触发form 的submit事件，这是为什么呢？
看看这篇文章吧，介绍的有点详细，把它留下来是因为我一向属于知其然不知其所以然，只知道问题所在，和如何解决，从来不深究它的内涵，这也是我为什么水平上不去的原因。。。所以，不要学我，还是看完这篇文章吧。。。虽然不一定详细，但毕竟知其一部分所以然了。

原文来自：不同浏 览器对回车提交表单的处理办法
内容如下：

　　在浏览器中填写表单的时，可以直接在“文本框”中敲击“Enter”来提交表单，很是方便。条件是：

• 在IE和Firefox下

1、<form>属性的“action”字段必填；

2、有一个type="submit"的“input”。

• 在Chrome和Safari下 满足第一条即可。（注释1）

　　所以，如果要控制提交行为的话（比如，提交前检查必填项是否已填），可以在type="submit"的“input”后添加 Javascript“onXXX（比如onClick）”事件。而如果需要用异步交互来检测相关字段，则无效了。因为return false是作为onreadystate=的子函数，并不能控制全局。这时就需要用到<form>的 “onsubmit”属性(注释2）。比如：

HTML

<form name="form1" id="form1" action="act.php" method="post" onsubmit="myfn();return false;">

•  myfn()是自己定义的函数：无论通过什么办法 （比如敲击“enter”或点击type="submit"（而不是type="button"）的“input”按钮）提交，都会触发这个这个函数。于 是，大可不必再在type="submit"的“input”后添加Javascript事件“onXXX”了。直接在“onsubmit”中控制，更直 观与统一，除非有意控制提交方式（是onClick还是什么）。
• return false位于末尾，表示不提交本表单。提交表单的字句document.form1.submit()可以作为myfn()的一个选择条件的分支。

总结：

　　这样，<form>有“action”和“onsubmit”属性，有type="submit"的“input”的提交按钮后， 就可以在任何浏览器下（不行吗？请给我反馈）实现使用“Enter”键和鼠标都可以对表单的相关字段进行异步（Ajax）和同步（单纯的 Javascript）检查并予以提交。

其他：

1、如果使用type="button"来异步检测相关字段呢？

　　这样，这个“input”必须得有一个事件触发器。在IE和FF下，无法直接在文本框中按下“Enter”来提交表单。如果要的话，需要使用额 外的函数来监听用户按下了什么，给出一个怎样的反映（注释3）。更糟糕的是，在Ch和Sa下，会忽略是否有type="submit"按钮，而直接根据 “action”属性来提交表单，如此以来，便无法实现预期的检测，可能还有更麻烦的后果。

2、如果不写“action”属性，直接异步提交表单呢？

　　这样，通过异步的方式提交表单，而不仅仅是检测，这个属性则没有必要。而且还是多余。假如这样能提供更好的用户体验，何乐而不为呢？呵呵。

【参考】

1 在IE8，FF，Ch中测试有效。Opera和Sa没有测试。参考了这篇文章（http://tieba.baidu.com/f?kz=669494938）

2 这篇文章（http://blog.csdn.net/xiewhenwe/archive/2009/11/08/4785469.aspx） 给了我借鉴

3 参考我以前的文章（http://www.cnblogs.com/lamper/archive/2010/02/06/1665117.html）

有时候我们不得不通过更改form的action来进行提交数据。当然大多数情况下，我们都是通过隐藏的字段来使action得到不同的数据。比如我们form的action是search.php，那么我们都是通过隐藏字段来使我们通过search.php搜索不同值，比如<input type="hidden" name="action" value="article">然后在search.php里面通过$_POST['action']=='article'来知道我们搜索的内容是文章而不是其他。

但如果我们搜索页面并非只有一个入口search.php怎么办？比如我们的全文搜索是search.php，搜索文章是search_article.php，搜索新闻是search_news.php。怎么办？当然我们可以通过下拉框的值来更改FORM的action，就可以了。

简单代码如下，

升级记录
2.0
这次又做了一次比较大的调整：增加了FunctionValidator这种校验方式，现在你可以调用外部函数了；调整了内部部分算法；
你打开下载压缩包里的index.html，将会看到全新的演示。
1、增加FunctionValidator校验方式。作用：你可以用外部函数对表单元素进行校验和处理，返回true/false表示校验是否成功;返回字符串表示自定义错误信息，校验失败;如果没有返回值表示处理过程，校验成功。范例代码如下：
$("#sfzh").formValidator({onshow:"请输入15或18位的身份证",onfocus:"输入15或18位的身份证",oncorrect:"输入正确"}).FunctionValidator({fun:isCardID});
fun这个参数给你的函数传递了2个参数(该表单元素的值,表单元素element) 。具体情况，请看API帮助文档
2、当你调用PageIsValid的时候，如果未校验通过，则给onError传递2个参数(第一个校验没通过元素的错误信息,第一个校验没通过元素element)。范例代码如下：
$.formValidator.initConfig({onError:function(msg){alert(msg)}});
3、AjaxValidator校验方式增加一个配置参数buttons（你点提交的按钮(组)jQuery对象）。作用：当你触发了ajax校验，buttons里对应的按钮（组）就会灰掉，一直等待服务器返回数据为止。范例代码如下：
$("#test1").formValidator({...}).InputValidator({...}).AjaxValidator({
      url : "Default.aspx",
      datatype : "json",
      success : function(data){...},
      buttons: $("#button_id"),
      error: function(){alert("服务器没有返回数据，可能服务器忙，请重试");},
      onerror : "该用户名不可用，请更换用户名重新",
      onwait : "正在对用户名进行合法性校验，请稍候..."
});
4、由于增加了自定义错误信息的功能，为了跟FunctionValidator校验方式里"fun"函数返回意义统一，更改了formValidator里的onvalid参数返回的意义，给大家带来不便请谅解。返回true/false表示校验是否成功；返回字符串表示自定义错误信息，校验失败；如果没有返回值表示处理过程，校验成功。

» 阅读全文