在 JavaScript 中獲取 HTML 表單值

Anika Tabassum Era 2023年1月30日 2022年5月5日
  1. 在 JavaScript 中使用 document.forms 獲取 HTML 表單值
  2. 在 JavaScript 中使用 id 訪問 HTML 表單值
在 JavaScript 中獲取 HTML 表單值

在 JavaScript 中,我們可以使用特定輸入元素的 id 屬性來獲取值或觸發 name 屬性來獲取數值。

這兩種約定都將繼續從使用者那裡獲取原始資料。從技術上講,目標是獲取使用者的所有輸入並確保流程正常執行。

在這裡,我們將使用 HTML DOM 又名 document.formsHTML 表單 中檢索所有元素。這裡簡要介紹了可用於與 HTML 元素和屬性互動的方法。

此外,在我們的示例中,我們將使用識別元素的 id 的隨意方式從那裡提取資訊。

在 JavaScript 中使用 document.forms 獲取 HTML 表單值

document.forms 方法使用 name 屬性來定位表單及其元素。從戰術上講,表單中的所有值都將通過這種啟動方式傳遞。

我們將有一個 select 元素,後跟一個多個 option 元素。我們將從那裡選擇一個偏好,並將值分開。

稍後,當 document.forms 將被啟動時,它將獲取分隔值。讓我們檢查程式碼塊是否正確視覺化。

程式碼片段:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Test</title>
</head>
<body>
<form name="form">
<select name="fruit" id="fruits">
  <option value="0">Select Fruit</option>
  <option value="mango">Mango</option>
  <option value="apple">Apple</option>
  <option value="orange">Orange</option>
</select>
  <button type = "submit">Hit</button>
</form>
  <p id="print"></p>
</body>
</html>
var form = document.forms['form'];
form.onsubmit = function(e){
  e.preventDefault();
  var select = document.form.fruit.value;
  console.log(select);
  document.getElementById('print').innerHTML=select.toUpperCase();
}

輸出:

使用 document.forms 獲取 HTML 表單值

如你所見,採用 document.forms 方法與 HTML form 值互動的 form 物件將返回所有元素。

onsubmit 方法用於處理該選定值的進一步操作。在該例項中,select 物件使用 formselect 元素的相應 name 屬性獲取所需值。

後來我們在頁面上列印了大寫格式的值。

在 JavaScript 中使用 id 訪問 HTML 表單值

對於這個例子,我們將使用 documnet.getElementByIdquerySelector 來驅動表單輸入。

使用這種格式的工具很普遍,並且與 document.forms 方法類似。因此,以下程式碼行將演示預覽。

程式碼片段:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Test</title>
</head>
<body>
 <form name="form" id="forms">
  Enter name: &nbsp; 
<input type="text" id="name">
  <input type="button" value=" Click Up">
 </form>
  <p id="print"></p>
</body>
</html>
var form = document.getElementById("forms");
form.onclick = function(e){
  e.preventDefault();
var name = document.getElementById("name").value;
  console.log(name);
document.getElementById('print').innerHTML=name.toUpperCase();
}

輸出:

使用 id 訪問 HTML 表單值

JavaScript 中物件 form 訪問的表單,以及輸入的值也是從 .value 方法派生的。

在前面的例子中,我們使用 button 元素提交輸入,這裡我們使用 input type button 執行提交。

這裡的區別僅在於 onsubmitonclick,兩者的工作方式相似。

Anika Tabassum Era avatar Anika Tabassum Era avatar

Era is an observer who loves cracking the ambiguos barriers. An AI enthusiast to help others with the drive and develop a stronger community.

LinkedIn GitHub Facebook

相關文章 - JavaScript Form