[Guide] 用 JavaScript 來取得表單元素內容的值(取值) |
您所在的位置:网站首页 › htmlinner › [Guide] 用 JavaScript 來取得表單元素內容的值(取值) |
[Guide] 用 JavaScript 來取得表單元素內容的值(取值) 用 JavaScript 取得表單中的元素有很多不同的方法,今天我們來說明一下其中一些方法,像是getElementById, getElementsByTagName, getElementsByName。 先來看一下結果: See the Pen getElementById by PJCHEN (@PJCHENder) on CodePen. 建立 HTML 表單我們先用 HTML 建立一個表單(form) 姓名: E-mail:我們可以看到,在這段 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 的值。 參考資料How to use getElementById to get the elements in a formJAVASCRIPT - 表單元素 - FORM ELEMENT |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |