document.form.action,表单分向提交,javascript提交表单

同一个表单可以根据用户的选择，提交给不同的后台处理程序。即，表单的分向提交。如，在编写论坛程序时，如果我们希望实现用户在发送贴子的时候，既发送提交功能又有预览功能时，就会遇到上述问题。即，当用户点击提交按钮时，我们希望表单提交给"提交"处理程序；而当用户点击预览按钮时，我们希望表单提交给"预览"处理程序。那么，如何实现上述功能呢？下面代码可以很好的解决这个问题。

<form name="form" method="post">
测试表单:<input name="test"><br>
<input type="button" value="提交" onClick=send()>
<input type="button" value="预览" onClick=preview()>
</form>
<script language=javascript>
function send()
  {
    document.form.action="send.asp"
    document.form.submit()
   }
function preview()
   {
     document.form.action="preview.asp"
     document.form.submit()
   }
</script>

关于上面实例的两点说明：

       1、在整个表单中，不应有名字为action或submit的标签，否则将会产生"对象不支持此属性和方法"的错误。如代码 "<input type='xxxx' name='action' >"在表单中是不允许出现的；

       2、在form标签中应该存在name属性。即，应该给表单取一个名字。语句document.form.action和document.form.submit中的"form"也就是表单的名字。

       表单的分向提交不仅仅使用在论坛的程序中，它还可以运用在许多场合下。恰当的运用表单的分向提交功能可以大大的增强网站的人性化程度。

       昨天，我调试程序就出现了这样的问题，就是出现了"对象不支持此属性和方法"的错误，一直无法定位出来，都快疯掉了，后来在发现一个button命名为submit了。

<form   name="formname"   action="">   
  <input   name="inputname">   
  <input   type="submit"   οnclick="document.formname.action='a.asp'"   value="button   a">   
  <input   type="submit"   οnclick="document.formname.action='b.asp'"   value="button   b">   
  <input   type="submit"   οnclick="document.formname.action='c.asp'"   value="button   c">   
  </form>       
  2.----------   
  <input   type=button   name="a"   value="a"   οnclick="this.form.action='a.asp';this.form.submit();">   
  <input   type=button   name="b"   value="b"   οnclick="this.form.action='b.asp';this.form.submit();">   
  <input   type=button   name="c"   value="c"   οnclick="this.form.action='c.asp';this.form.submit();">   
  <input   type=button   name="d"   value="d"   οnclick="this.form.action='d.asp';this.form.submit();">

今天在代码中不小心写了两个name相同的form表单，然后通过document.forms[formName]形式获取到的只有第一个表单，然后深入学习了下document.forms[formName]和document.formName的区别和兼容性。

下面先测试了下document.forms[formName]、document.forms.formName、document.formName、document.forms(formName)的兼容性
一、当表单name唯一时

<form action="test1" name="test">test1</form>

IE8下

IE9下

firefox下，版本63.0.1

chrome下，版本68.0.3340.75

safari下，版本11.1.2

测试发现：当表单name唯一时，在IE8版本，获取表单的所有方法得到的是一个object对象，通过这个object无法获取表单，而在firefox、chrome和safari下，不支持document.forms(formName)的形式获取表单

二、当表单name不唯一时

<form action="test1" name="test">test1</form> 
<form action="test2" name="test">test2</form>

IE8下

IE8下，获取获取第二个表单

IE9下

IE9下，获取第二个表单

firefox下

firefox下，获取第二个表单

chrome下

chrome下，获取第二个表单

safari下

safari下，获取第一个表单

测试发现：当表单name不唯一时，IE9下四种方式都返回了一个HTMLCollection对象，通过HTMLCollection[1]的形式可以获取到第二个表单；在firefox、chrome和safari下，通过document.forms[formName]和document.forms.formName获取到的都是第一个表单，而不是一个HTMLCollection对象，也就是说，通过这两种方法是无法获取到第i(i>1)个表单元素到；在document.formName方法则无论是在IE9、firefox、chrome还是safari下，都能获取一个HTMLCollection对象，也就是说，可以通过这种方法，获取到name相同的所有表单。

结论：

通过以上兼容性的测试，在不考虑IE8的情况下，推荐使用document.formName的形式获取表单。
当表单name唯一时，通过document.formName的方法可获得该表单；
当表单name不唯一时，通过document.formName的方法可以获得一个HTMLCollection对象，通过HTMLCollection[i]的形式，可以获得第i个表单。

document.formName.length结果是什么？

现在请思考下document.formName.length的结果是什么？是不是理所当然的想，当name唯一时，返回1；当name不唯一时，有多少个name=formName的表单就返回几。
我们还是用实例说话吧：

<form name="test1">
	<input type="text" name="age" />
	<input type="text" />
	<div>表单name唯一</div>
</form>
<form name="test2">
	<input type="text" name="age" />
	<input type="text" />
	<div>表单name不唯一</div>
</form>
<form name="test2">
	<input type="text" name="age" />
</form>

document.test1.length // -->2
document.test2.length // -->2

实践后发现，当表单name唯一时，length为2；当name不唯一(有两个)时，也返回2。为什么呢？

当name唯一时，documen.formName返回的不是一个数组，所以一开始想得是length属性不存在，document.formName.length应该返回undefined，但是事实却不是这样。

当name唯一时，document.formName.length返回的是表单下输入框的元素个数，而当name不唯一时，返回的才是真正的表单个数。

那么如何判断表单的name属性是否唯一呢？

一般写使用表单的话，下面一定会有输入框，无论name属性是否唯一，document.formName[0]都有值，但是当name唯一下，document.formName[0][0]是没有元素的，即结果为undefined，而当name不唯一时，document.formName[0][0]返回的是第一个表单下的第一个子元素

因此，可以通过document.formName[0][0]来判断表单的name属性是否唯一，当返回结果为undefined时，则表示name属性唯一，否则即存在多个name相同当表单

延伸：

通过document.formName.elements[subName]或document.formName.subName的形式可以获取form下元素。
如：

<form name="test">
	<input type="text" name="myName" value="happy" />
</form>

<script>
	document.test.myName.value  // happy
</script>

参考：

1. Is it OK to have multiple HTML forms with the same name?
2. Javascript document.forms value does not work for Internet Explorer

document.form.action,表单分向提交,javascript提交表单
同一个表单可以根据用户的选择，提交给不同的后台处理程序。即，表单的分向提交。如，在编写论坛程序时，如果我们希望实现用户在发送贴子的时候，既发送提交功能又有预览功能时，就会遇到上述问题。即，当用户点击提交按钮时，我们希望表单提交给"提交"处理程序；而当用户点击预览按钮时，我们希望表单提交给"预览"处理程序。那么，如何实现上述功能呢？下面代码可以很好的解决这个问题。  
<form name="form" method="post">
测试表单:<input name="test"><br>
<input type="button" value="提交" onClick=send()>
<input type="button" value="预览" onClick=preview()>
</form>
<script language=javascript>
function send()
  {
    document.form.action="send.asp"
    document.form.submit()
   }
function preview()
   {
     document.form.action="preview.asp"
     document.form.submit()
   }
</script>

         关于上面实例的两点说明： 
        1、在整个表单中，不应有名字为action或submit的标签，否则将会产生"对象不支持此属性和方法"的错误。如代码 "<input type='xxxx' name='action' >"在表单中是不允许出现的； 
        2、在form标签中应该存在name属性。即，应该给表单取一个名字。语句document.form.action和document.form.submit中的"form"也就是表单的名字。
        表单的分向提交不仅仅使用在论坛的程序中，它还可以运用在许多场合下。恰当的运用表单的分向提交功能可以大大的增强网站的人性化程度。 

        昨天，我调试程序就出现了这样的问题，就是出现了"对象不支持此属性和方法"的错误，一直无法定位出来，都快疯掉了，后来在发现一个button命名为submit了。

1.--------   
    
  <form   name="formname"   action="">   
  <input   name="inputname">   
  <input   type="submit"   οnclick="document.formname.action='a.asp'"   value="button   a">   
  <input   type="submit"   οnclick="document.formname.action='b.asp'"   value="button   b">   
  <input   type="submit"   οnclick="document.formname.action='c.asp'"   value="button   c">   
  </form>       
  2.----------   
  <input   type=button   name="a"   value="a"   οnclick="this.form.action='a.asp';this.form.submit();">   
  <input   type=button   name="b"   value="b"   οnclick="this.form.action='b.asp';this.form.submit();">   
  <input   type=button   name="c"   value="c"   οnclick="this.form.action='c.asp';this.form.submit();">   
  <input   type=button   name="d"   value="d"   οnclick="this.form.action='d.asp';this.form.submit();">