點選 JavaScript 提交表單

Ammar Ali 2023年1月30日 2021年7月3日
  1. 通過單擊連結並使用 JavaScript 中的 submit() 函式提交表單
  2. 通過單擊按鈕並使用 JavaScript 中的 submit() 函式提交表單
點選 JavaScript 提交表單

本教程將討論如何使用 JavaScript 中的 submit() 函式提交表單。

通過單擊連結並使用 JavaScript 中的 submit() 函式提交表單

在 JavaScript 中,你可以使用 form 標籤建立一個表單,你可以使用 id 屬性給表單一個 id,之後,你必須選擇一種提交表單的方法,你可以提交表單單擊連結或按鈕時。現在,有兩種提交表單的方法,你可以使用 onclick 屬性在 HTML 程式碼中執行此操作,也可以在 JavaScript 中執行此操作。例如,讓我們使用 onclick 屬性在 HTML 中提交一個表單。請參考下面的程式碼。

<form id="FormId">
  <a href="FormLink" id = "LinkID" onclick="document.getElementById('FormId').submit();"> SubmitForm </a>
</form>

你可以根據需要更改上述程式碼中的 form ID 和連結 ID。不推薦使用此方法,因為你將 HTML 與 JavaScript 程式碼混合在一起。你還可以通過使用表單和連結的 id 在 JavaScript 中單獨執行此操作。例如,讓我們使用單獨的 JavaScript 進行上述操作。請參考下面的程式碼。

var myform = document.getElementById("FormId");
document.getElementById("LinkId").addEventListener("click", function () {
  myform.submit();
});

建議使用此方法,因為 HTML 和 JavaScript 位於不同的檔案中。請注意,你必須使用在 HTML 中定義的表單 id 和連結 id 才能在 JavaScript 中獲取這些元素。單擊連結時將提交表單。

通過單擊按鈕並使用 JavaScript 中的 submit() 函式提交表單

你可以使用按鈕提交表單。提交表單有兩種方法,你可以使用 onclick 屬性在 HTML 程式碼中執行此操作,也可以在 JavaScript 中執行此操作。例如,讓我們使用 onclick 屬性在 HTML 中提交一個表單。請參考下面的程式碼。

<form id="FormId">
  <button id = "ButtonId" onclick="document.getElementById('FormId').submit();"> SubmitForm </button>
</form>

與上述方法類似,不推薦使用此方法,因為你將 HTML 與 JavaScript 程式碼混合。讓我們使用單獨的 JavaScript 來完成上述操作。

var myform = document.getElementById("FormId");
document.getElementById("ButtonId").addEventListener("click", function () {
  myform.submit();
});
Author: Ammar Ali
Ammar Ali avatar Ammar Ali avatar

Hello! I am Ammar Ali, a programmer here to learn from experience, people, and docs, and create interesting and useful programming content. I mostly create content about Python, Matlab, and Microcontrollers like Arduino and PIC.

LinkedIn Facebook

相關文章 - JavaScript Form