2015年11月26日 星期四

[筆記]用javascript來取得表單元素內容的值(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() {
  var name_element = document.getElementById('name');
  var name = name_element.value;
  var email_element = document.getElementById('email');
  var email = email_element.value;
  alert('你的姓名是'+name+'\n電子郵件是'+email);
}
我們也可以針對表單這個id去進使用getElementById,像是這樣:
function processFormData() {
  
  //getElementById --- from form
  var form_element = document.getElementById('form');
  var name = form_element[0].value;
  var email = form_element[1].value;

  alert('你的姓名是' + name + '\n電子郵件是' + email);
}

使用getElementsByTagName

使用getElementsByTagName的方法如下,可以留意的地方是,這裡是getElement"s"
,表示我們一次會取得一整個陣列的值,因此最後要加上要取得的是陣列中的第幾個值。
像是這樣:
function processFormData() {
  var input_element = document.getElementsByTagName('input');
  var name = input_element[0].value;
  var email = input_element[1].value;
  alert('你的姓名是' + name + '\n電子郵件是' + email);
}

使用getElementsByName

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

  //getElementsName
  var name_element = document.getElementsByName('name');
  var name = name_element[0].value;
  var email_element = document.getElementsByName('email');
  var email = email_element[0].value;
  alert('你的姓名是' + name + '\n電子郵件是' + email);
}

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

取的form裡面的元素(elements)

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

寫法像是這樣:
function processFormData() {
  //get form element
  var oform = document.forms['form'];
  var name = oform.elements.name.value;
  var email = oform.elements.email.value;
  alert('你的姓名是' + name + '\n電子郵件是' + email);
}
或者也可以寫成這樣子:
function processFormData() {
  //get form element
  var oform = document.forms['form'];
  var name = oform.elements['name'].value;
  var email = oform.elements['email'].value;
  alert('你的姓名是' + name + '\n電子郵件是' + email);
}
透過類似的方法,一樣可以取得像是textarea等其它表單類型的值。

參考資料:
How to use getElementById to get the elements in a form
JAVASCRIPT - 表單元素 - FORM ELEMENT
Share:

0 意見:

張貼留言