JS和jQuery使用submit方法無法提交表單的原因分析及解決辦法

更新時(shí)間：2016年05月17日 10:13:53 作者：小蜂鳥

這篇文章主要介紹了JS和jQuery使用submit方法無法提交表單的原因分析及解決辦法的相關(guān)資料,需要的朋友可以參考下

昨天，在做一個(gè)表單異步提交內(nèi)容的時(shí)候，遇到很奇怪的問題，submit()方法無法進(jìn)行提交，每次提交都是把當(dāng)前給刷新了，網(wǎng)絡(luò)抓包發(fā)現(xiàn)，每次都是 get方式去獲取當(dāng)前頁(yè)面，完全沒有post 請(qǐng)求，想著以前遇上這樣的問題都是因?yàn)?表單中有 name 或者 id 這些命名跟submit 有沖突，但是檢查了幾次，始終沒有發(fā)現(xiàn) 名字沖突，所以這個(gè)可能性被排除。

平常自己做觸發(fā)按鈕，基本不用a 標(biāo)簽，但是昨天不知道什么問題，竟然用了 a 而且還給了 href 為空，由于這個(gè)a 的class 有多個(gè) 內(nèi)容，所以檢查時(shí)候根本就沒有去看href 沒有寫內(nèi)容。所以，每次進(jìn)行click 操作的時(shí)候都會(huì)觸發(fā)到 href="" 這個(gè)操作，這個(gè)操作就重新打開當(dāng)前頁(yè)面，所以導(dǎo)致 submit無法起到作用。解決方法：就是給href 加javascript:;或者javascript:void(0);

問題出現(xiàn)地方：

解決了：

js部分：

補(bǔ)充：js表單提交和submit提交的區(qū)別

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標(biāo)題文檔</title>
</head>

<body>
<script>

function test()
{
  document.getElementById("myform").submit();  
  alert(11);
}
</script>
<form name="myfrom" id="myform" method="get" action="b.php">
<input type="text" name="pwd" value="" />
<input type="submit" name="sub" value="111" />
<input type="button" name="btn" value="btn" onclick="test()" />
</form>
</body>
</html>

注意：get方式提交表單時(shí) action里面不能用url傳值, post則可以這樣傳

js提交和submit按鈕提交的區(qū)別:

1. js提交表單時(shí)不會(huì)帶上 submit 按鈕的值(因?yàn)闆]有被單擊) 所有瀏覽器

2. input 回車提交 w3c瀏覽器會(huì)帶上submit按鈕的值，ie6則不會(huì)帶

解決辦法：增加一個(gè)hidden域,用這個(gè)來判斷，無論用哪種方式提交都會(huì)有值

submit按鈕上綁定提交事件:

即:

復(fù)制代碼代碼如下:

都會(huì)帶上submit的值, 用js提交都檢測(cè)不到onsubmit狀態(tài)

w3c：提交一次

ie6: 分兩次提交，先js在form提交

解決辦法：如果按鈕為submit則檢測(cè)時(shí)用onsubmit事件檢測(cè)

如果按鈕為button，則檢測(cè)通過后在觸發(fā)submit事件

一定不要用js提交表單，然后又用onsubmit去檢測(cè)

單純的用js提交表單, alert, ff下阻塞表單的提交，而其他瀏覽

以上所述是小編給大家介紹的JS和jQuery使用submit方法無法提交表單的原因分析及解決辦的相關(guān)知識(shí)，希望對(duì)大家有所幫在，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章: