HTML按鈕，其他地方提交表單的頁面

Question

我想在我的網頁沿着這部分的底部按鈕主要部分的形式提交它。

我也想有鏈接到其他頁面的側邊欄，但讓這個只要點擊一個鏈接它作爲一個按鈕提交表單了。 （在HTML即這些鏈接的代碼將表單標籤之外，但我想他們仍然充當表單按鈕）

這可能嗎？

Answer 1

，以確保您的形式最簡單的方法被提交和由您附加任何功能驗證是不是調用窗體的submit()方法，但改爲調用其提交按鈕的click()方法。

請看下面的表格：

<form id="bar" method="post" action="/echo/html/"> 
    <input type="text" id="foo" name="foo"> 
    <input type="submit" value="Submit"> 
</form> 

眼下，點擊提交按鈕沒有做什麼特別的。但是如果你想在發送任何東西到服務器之前確保文本輸入有一個值呢？

function validateBarForm() { 
    var txt = this.querySelector("input[type=text]"); 
    if (txt.value == "") { 
     txt.style.outline = "solid red 2px"; 
     return false; 
    } 
} 

document.getElementById("bar").onsubmit = validateBarForm; 

現在，如果你點擊提交將無法與空白的文本輸入提交形式：可以按照以下方式實現這一目標。但是如果你以編程方式提交表單呢？讓我們添加一個鏈接第一...

<a href="#" id="submit-bar">submit form</a> 

注意，該鏈接是以外的形式標記。我們可以平凡附上提交功能：

function submitBarForm() { 
    document.getElementById("bar").submit(); 
} 

document.getElementById("submit-bar").onclick = submitBarForm; 

我們點擊「提交表單」和...哎呦！驗證功能未執行！有幾種方法可以避免這個問題，但我最喜歡的只是讓JavaScript模擬點擊提交按鈕。我發現這比硬編碼調用驗證函數的變化要好得多。

function submitBarForm() { 
    document.querySelector("#bar input[type=submit]").click(); 
} 

現在，當你點擊鏈接，表單驗證，如果一切檢查它提交了。但不要聽我的話 - 走到jsfiddle.net並親自看看。

Answer 2

通過添加一個onclick JavaScript函數到表單中。

document.forms["myform"].submit(); 

其中「myform」是表單的ID。這裏有一個很好的演練：http://www.javascript-coder.com/javascript-form/javascript-form-submit.phtml

例如，按鈕可能是：

<button onclick="document.forms['myform'].submit();">Hi</button> 

Answer 3

是該按鈕的Click事件添加document.getElementById('formId').submit();

Answer 4

使用以下onclick處理程序在你的鏈接，用ID代替formId您要提交表單...

onclick="document.getElementById('formId').submit();return false;" 

Upda TE

作爲@Juan（和其他人，特別是@JoeTaylor）已經提到的，以上將不會觸發與表單關聯的任何客戶端驗證代碼。據我所知，使其做到這一點最簡單的方法是在表單中觸發click事件提交按鈕。例如，這可能您的鏈接上使用...

onclick="document.getElementById('formSubmitButton').click();return false;" 

雖然你不提任何與服務器端處理，我會假設你表單的地步。我要說的另一件事是，你應該總是複製驗證回到服務器上。 JavaScript很容易繞過，所以你應該確保到達服務器的值是正確的，並且從不假設JavaScript已經完成了它的工作。

Answer 5

<form name="myform" action="action.php"> 

    // Your form 

</form> 

<a href="javascript: document.myform.submit();">Submit form</a> 

或者你也可以使用jQuery：

<form name="myform" action="action.php"> 

    // Your form 

</form> 

<a href="#" onclick="$("#myform").submit();">Your text</a> 

Answer 6

您可以在HTML5解決這個問題很容易沒有JavaScript：

<input type="submit" form="id_of_the_form" value="Submit"> 

<form id="id_of_the_form" action method></form> 

而且你可以風格的按鈕，只要你喜歡。就像在這個例子中，這個按鈕可以放在dom中的任何位置 - 不需要把它放到窗體中。