PJCHENder 未整理筆記

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

2018-08-31

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

@(JavaScript)[JavaScript, WebAPIs, guide]

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

先來看一下結果:

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

建立 HTML 表單

我們先用 HTML 建立一個表單(form)

1
2
3
4
5
6
<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),包含 inputnameid,下面我們就可以分別用這些屬性來取得表單中的內容。

使用 getElementById

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

1
2
3
4
5
6
7
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,像是這樣:

1
2
3
4
5
6
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"
,表示我們一次會取得一整個陣列的值,因此最後要加上要取得的是陣列中的第幾個值。
像是這樣:

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

使用 getElementsByName

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

1
2
3
4
5
6
7
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, getElementsByTagNamegetElementsByName 之外,我們也可以直接取得某個 form 裡面的元素。

寫法像是這樣:

1
2
3
4
5
6
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 的值

參考資料

掃描二維條碼,分享此文章