利用js提交form表单的方式

第一种方式：表单提交，在form标签中增加onsubmit事件来判断表单提交是否成功

<code class="js string">"text/javascript"</code> <code class="js plain">></code> </div> <div class="line number2 index1 alt1"> <code class="js spaces">   </code> <code class="js keyword">function</code> <code class="js plain">validate(obj) {</code> </div> <div class="line number3 index2 alt2"> <code class="js spaces">    </code> <code class="js keyword">if</code> <code class="js plain">(confirm(</code> <code class="js string">"提交表单?"</code> <code class="js plain">)) {</code> </div> <div class="line number4 index3 alt1"> <code class="js spaces">      </code> <code class="js plain">alert(obj.value);</code> </div> <div class="line number5 index4 alt2"> <code class="js spaces">      </code> <code class="js keyword">return</code> <code class="js keyword">true</code> <code class="js plain">;</code> </div> <div class="line number6 index5 alt1"> <code class="js spaces">    </code> <code class="js plain">} </code> <code class="js keyword">else</code> <code class="js plain">{</code> </div> <div class="line number7 index6 alt2"> <code class="js spaces">      </code> <code class="js plain">alert(obj.value);</code> </div> <div class="line number8 index7 alt1"> <code class="js spaces">      </code> <code class="js keyword">return</code> <code class="js keyword">false</code> <code class="js plain">;</code> </div> <div class="line number9 index8 alt2"> <code class="js spaces">    </code> <code class="js plain">}</code> </div> <div class="line number10 index9 alt1"> <code class="js spaces">   </code> <code class="js plain">}</code> </div> <div class="line number11 index10 alt2"> <code class="js spaces"> </code> <code class="js plain">

  "//www.jb51.net" onsubmit= "return validate(document.getElementByIdx_x('myText'));" >

    "text" id= "myText" />

    "submit" value= "submit" />

第二种方式：通过button按钮来触发表单提交事件οnclick="submitForm();"，会忽略掉其他标签中的属性，比如form标签中的onsubmit属性就失效了。这时为了进行表单验证，可以将验证代码放在submitForm();方法中进行验证。

<code class="js string">"text/javascript"</code> <code class="js plain">></code> </div> <div class="line number2 index1 alt1"> <code class="js spaces">   </code> <code class="js keyword">function</code> <code class="js plain">validate() {</code> </div> <div class="line number3 index2 alt2"> <code class="js spaces">    </code> <code class="js keyword">if</code> <code class="js plain">(confirm(</code> <code class="js string">"提交表单?"</code> <code class="js plain">)) {</code> </div> <div class="line number4 index3 alt1"> <code class="js spaces">      </code> <code class="js keyword">return</code> <code class="js keyword">true</code> <code class="js plain">;</code> </div> <div class="line number5 index4 alt2"> <code class="js spaces">    </code> <code class="js plain">} </code> <code class="js keyword">else</code> <code class="js plain">{</code> </div> <div class="line number6 index5 alt1"> <code class="js spaces">      </code> <code class="js keyword">return</code> <code class="js keyword">false</code> <code class="js plain">;</code> </div> <div class="line number7 index6 alt2"> <code class="js spaces">    </code> <code class="js plain">}</code> </div> <div class="line number8 index7 alt1"> <code class="js spaces">   </code> <code class="js plain">}</code> <code class="js spaces">   </code>  </div> <div class="line number10 index9 alt1"> <code class="js spaces">   </code> <code class="js keyword">function</code> <code class="js plain">submitForm() {</code> </div> <div class="line number11 index10 alt2"> <code class="js spaces">    </code> <code class="js keyword">if</code> <code class="js plain">(validate()) {</code> </div> <div class="line number12 index11 alt1"> <code class="js spaces">      </code> <code class="js plain">document.getElementByIdx_x(</code> <code class="js string">"myForm"</code> <code class="js plain">).submit();</code> </div> <div class="line number13 index12 alt2"> <code class="js spaces">    </code> <code class="js plain">}</code> </div> <div class="line number14 index13 alt1"> <code class="js spaces">   </code> <code class="js plain">}</code> </div> <div class="line number15 index14 alt2"> <code class="js spaces"> </code> <code class="js plain">

  "//www.jb51.net" id= "myForm" >
    "text" />
    "button" value= "submitBtn" onclick= "submitForm();" />

第三种方式：将onsubmit事件放在submit标签中，而不是form标签中，此时表单验证失效，点击提交按钮表单直接提交

<code class="js string">"text/javascript"</code> <code class="js plain">></code> </div> <div class="line number2 index1 alt1"> <code class="js spaces">   </code> <code class="js keyword">function</code> <code class="js plain">validate() {</code> </div> <div class="line number3 index2 alt2"> <code class="js spaces">    </code> <code class="js keyword">if</code> <code class="js plain">(confirm(</code> <code class="js string">"提交表单?"</code> <code class="js plain">)) {</code> </div> <div class="line number4 index3 alt1"> <code class="js spaces">      </code> <code class="js keyword">return</code> <code class="js keyword">true</code> <code class="js plain">;</code> </div> <div class="line number5 index4 alt2"> <code class="js spaces">    </code> <code class="js plain">} </code> <code class="js keyword">else</code> <code class="js plain">{</code> </div> <div class="line number6 index5 alt1"> <code class="js spaces">      </code> <code class="js keyword">return</code> <code class="js keyword">false</code> <code class="js plain">;</code> </div> <div class="line number7 index6 alt2"> <code class="js spaces">    </code> <code class="js plain">}</code> </div> <div class="line number8 index7 alt1"> <code class="js spaces">   </code> <code class="js plain">}</code> </div> <div class="line number9 index8 alt2"> <code class="js spaces"> </code> <code class="js plain">

  "//www.jb51.net" >

    "text" />

    "submit" value= "submit" onsubmit= "return validate()" />

第四种方式：为submit按钮添加上onclick事件，其中该事件用于表单提交的验证，功能类似于在form标签中增加了onsubmit事件一样nclick="submitForm();"，会忽略掉其他标签中的属性，比如form标签中的onsubmit属性就失效了。这时为了进行表单验证，可以将验证代码放在submitForm();方法中进行验证

<code class="js string">"text/javascript"</code> <code class="js plain">></code> </div> <div class="line number2 index1 alt1"> <code class="js spaces">   </code> <code class="js keyword">function</code> <code class="js plain">validate() {</code> </div> <div class="line number3 index2 alt2"> <code class="js spaces">    </code> <code class="js keyword">if</code> <code class="js plain">(confirm(</code> <code class="js string">"提交表单?"</code> <code class="js plain">)) {</code> </div> <div class="line number4 index3 alt1"> <code class="js spaces">      </code> <code class="js keyword">return</code> <code class="js keyword">true</code> <code class="js plain">;</code> </div> <div class="line number5 index4 alt2"> <code class="js spaces">    </code> <code class="js plain">} </code> <code class="js keyword">else</code> <code class="js plain">{</code> </div> <div class="line number6 index5 alt1"> <code class="js spaces">      </code> <code class="js keyword">return</code> <code class="js keyword">false</code> <code class="js plain">;</code> </div> <div class="line number7 index6 alt2"> <code class="js spaces">    </code> <code class="js plain">}</code> </div> <div class="line number8 index7 alt1"> <code class="js spaces">   </code> <code class="js plain">}</code> </div> <div class="line number9 index8 alt2"> <code class="js spaces"> </code> <code class="js plain">

  "//www.jb51.net" >

    "text" />

    "submit" value= "submit" onclick= "return validate()" />




==================================================================

小结：

提交表单最简单的凡是是在html语句中直接提交，但是在需要验证，修改提交内容的情况下，提交表单就只能通过js对数据处理后进行提交。

我们可以通过onsubmit事件，onclick事件将表单内容发送到js进行处理。

最正规的方式是：在js中通过a标签和class标签,id标签对form内容进行处理后提交

注册