如何使用JavaScript可靠地提交HTML表單？
[英]How to reliably submit an HTML form with JavaScript?
問題描述
有沒有辦法使用JavaScript保證在所有情況下都可以使用？
我詳細說明。 常見的方法似乎是：
formElement.submit()
這一切都很好，除了一件事。 表單的字段可用作formElement屬性，因此如果存在名稱或標識為 “text1”的字段，則可以將其作為formElement.text1進行訪問。
這意味着如果一個元素被稱為“submit”（無論是它的名字還是它的id ），那么formElement.submit()將不起作用。 這是因為formElement.submit不是表單的方法，而是具有該名稱的字段。 不幸的是，提交按鈕具有“提交”名稱或ID是相當普遍的。
兩個例子來說明我的觀點。 首先，以下內容不起作用，因為表單的元素名稱為“submit”：
<form name="example" id="example" action="/">
<button type="button" name="submit" onclick="document.example.submit(); return false;">Submit</button>
</form>
以下將工作。 唯一的區別是我從表單中刪除了名稱“submit”：
<form name="example" id="example" action="/">
<button type="button" onclick="document.example.submit(); return false;">Submit</button>
</form>
那么，還有其他方法可以使用JavaScript提交HTML表單嗎？
7 個解決方案
解決方案1
32 已采納 2010-01-04 14:56:40
在JavaScript中創建另一個表單，並在原始表單上應用其submit()方法：
<html>
<script>
function hack() {
var form = document.createElement("form");
var myForm = document.example;
form.submit.apply(myForm);
}
</script>
<form name="example" id="example" method="get" action="">
<input type="hidden" value="43" name="hid">
<button
type="button"
name="submit"
onclick="hack();return false;"
>Submit</button>
</form>
</html>
form.submit是對一個全新的干凈提交方法的引用，然后使用apply(myForm)以原始形式執行它。
解決方案2
2 2010-01-04 14:50:26
那么，還有其他方法可以使用JavaScript提交HTML表單嗎？
更新 ：接受Jerome的建議（在此主題的其他地方）。 我將這個答案留給歷史興趣，但它不如傑羅姆的解決方案那么好或可靠。
以下方法很難看，但有效。
var x = document.forms.example;
var f = document.createElement('form');
f.action = x.action;
f.method = x.method;
f.enctype = x.enctype;
for (var i = 0; i < x.elements.length; i++) {
var el = x.elements[i];
if (el.name !== "submit") {
f.appendChild(el);
}
}
x.parentNode.replaceChild(f,x);
f.submit();
解決方案3
1 2010-01-04 14:56:43
在Firefox中
formElement.constructor
返回“HTMLFormElement”。 因此，您可以使用以下方式提交表單：
HTMLFormElement.prototype.submit.call(formElement)
您也可以將其擴展到其他瀏覽器：
formElement.constructor.prototype.submit.call(formElement)
解決方案4
1 2010-01-04 15:06:57
最好的想法是不要將提交按鈕命名為“提交”，但你可以繞過它 -
function reallysubmitform(n){
n= n || 0;
var f= document.forms[n];
f.onsubmit= function(){
return true
};
var sub= f.elements['submit'];
if(sub && sub.type== 'submit') sub.click();
else f.submit();
}
reallysubmitform（）
解決方案5
0 2012-12-09 15:09:12
對於名為submit的表單，只需調用其按鈕，單擊功能對我有效。
document.forms[0].submit.click(); //where submit here is just the name of the button/input tied to the form.
解決方案6
0 2010-01-04 15:08:33
使用JavaScript提交表單在設計上是不安全的 。
您的用戶可以在手機上瀏覽您的網站，禁用JavaScript，調整頁面來源或使用Lynx 。
在任何情況下，出於可訪問性目的，您將需要良好的舊HTML提交按鈕和服務器端的一些輸入檢查。
解決方案7
0 2016-07-07 06:29:00
只需使用onsubmit ...
<form name="example" id="example" action="/" onsubmit="document.example.submit();">
<button type="submit" name="submit" onclick="document.example.submit(); return false;">Submit</button>
</form>
輸入以可靠地提交html表單
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.