跳至主要内容

[Guide] 用 JavaScript 來取得表單元素內容的值（取值）

用 JavaScript 取得表單中的元素有很多不同的方法，今天我們來說明一下其中一些方法，像是getElementById, getElementsByTagName, getElementsByName。

先來看一下結果：

See the Pen getElementById by PJCHEN (@PJCHENder) on CodePen.

建立 HTML 表單​

我們先用 HTML 建立一個表單（form）

<form name="form" id="form">
  姓名：
  <input type="text" name="name" id="name" /> E-mail：
  <input type="text" name="email" id="email" />
  <input type="button" name="submit" value="送出" onclick="processFormData();" />
</form>

我們可以看到，在這段 html 表單中，可以看到幾個屬性（attribute），包含 input，name 和 id，下面我們就可以分別用這些屬性來取得表單中的內容。

使用 getElementById​

我們可以利用 getElementById 來取得表單中的值，像是這樣：

function processFormData() {
  const nameElement = document.getElementById('name');
  const name = nameElement.value;
  const emailElement = document.getElementById('email');
  const email = emailElement.value;
  alert('你的姓名是 ' + name + '\n電子郵件是 ' + email);
}

我們也可以針對「表單」的 id 去進使用 getElementById，像是這樣：

function processFormData() {
  const formElement = document.getElementById('form');
  const name = formElement[0].value;
  const email = formElement[1].value;
  alert('你的姓名是 ' + name + '\n電子郵件是 ' + email);
}

使用 getElementsByTagName​

使用 getElementsByTagName 的方法如下，可以留意的地方是，這裡是 getElement"s" ，表示我們一次會取得一整個陣列的值，因此最後要加上要取得的是陣列中的第幾個值。 像是這樣：

function processFormData() {
  const inputElement = document.getElementsByTagName('input');
  const name = inputElement[0].value;
  const email = inputElement[1].value;
  alert('你的姓名是 ' + name + '\n電子郵件是 ' + email);
}

使用 getElementsByName​

最後，我們也可以用 getElementsByName 來根據 name 這個屬性取得表單元素的值，寫法類似，如下：

function processFormData() {
  const nameElement = document.getElementsByName('name');
  const name = nameElement[0].value;
  const emailElement = document.getElementsByName('email');
  const email = emailElement[0].value;
  alert('你的姓名是 ' + name + '\n電子郵件是 ' + email);
}

取得 form 裡面的元素（elements）​

除了使用 getElementById, getElementsByTagName 和 getElementsByName 之外，我們也可以直接取得某個 form 裡面的元素。

寫法像是這樣：

function processFormData() {
  const form = document.forms['form']; // 取得 name 屬性為 form 的表單
  const name = form.elements.name.value; // 取得 elements 集合中 name 屬性為 name 的值
  const email = form.elements.email.value; // 取得 elements 集合中 name 屬性為 email 的值
  alert('你的姓名是 ' + name + '\n電子郵件是 ' + email);
}

透過類似的方法，一樣可以取得像是 textarea 等其它表單類型的值。

其他​

若是想取得其它比較特殊類型的值，像是 radio, select，則可進一步參考 [筆記] 透過 JavaScript 擷取 HTML 元素（讀取 radio, select, id 的值。

參考資料​