用JavaScript操作表單和操作DOM是類(lèi)似的，因?yàn)楸韱伪旧硪彩荄OM樹(shù)。

不過(guò)表單的輸入框、下拉框等可以接收用戶(hù)輸入，所以用JavaScript來(lái)操作表單，可以獲得用戶(hù)輸入的內(nèi)容，或者對(duì)一個(gè)輸入框設(shè)置新的內(nèi)容。

HTML表單的輸入控件主要有以下幾種：

• 文本框，對(duì)應(yīng)的<input type="text">，用于輸入文本；
• 口令框，對(duì)應(yīng)的<input type="password">，用于輸入口令；
• 單選框，對(duì)應(yīng)的<input type="radio">，用于選擇一項(xiàng)；
• 復(fù)選框，對(duì)應(yīng)的<input type="checkbox">，用于選擇多項(xiàng)；
• 下拉框，對(duì)應(yīng)的<select>，用于選擇一項(xiàng)；
• 隱藏文本，對(duì)應(yīng)的<input type="hidden">，用戶(hù)不可見(jiàn)，但表單提交時(shí)會(huì)把隱藏文本發(fā)送到服務(wù)器。

獲取值

如果我們獲得了一個(gè)<input>節(jié)點(diǎn)的引用，就可以直接調(diào)用value獲得對(duì)應(yīng)的用戶(hù)輸入值：

// <input type="text" id="email">
var input = document.getElementById('email');
input.value; // '用戶(hù)輸入的值'

這種方式可以應(yīng)用于text、password、hidden以及select。但是，對(duì)于單選框和復(fù)選框，value屬性返回的永遠(yuǎn)是HTML預(yù)設(shè)的值，而我們需要獲得的實(shí)際是用戶(hù)是否“勾上了”選項(xiàng)，所以應(yīng)該用checked判斷：

// <label><input type="radio" name="weekday" id="monday" value="1"> Monday</label>
// <label><input type="radio" name="weekday" id="tuesday" value="2"> Tuesday</label>
var mon = document.getElementById('monday');
var tue = document.getElementById('tuesday');
mon.value; // '1'
tue.value; // '2'
mon.checked; // true或者false
tue.checked; // true或者false

設(shè)置值

設(shè)置值和獲取值類(lèi)似，對(duì)于text、password、hidden以及select，直接設(shè)置value就可以：

// <input type="text" id="email">
var input = document.getElementById('email');
input.value = 'test@example.com'; // 文本框的內(nèi)容已更新

對(duì)于單選框和復(fù)選框，設(shè)置checked為true或false即可。

HTML5控件

HTML5新增了大量標(biāo)準(zhǔn)控件，常用的包括date、datetime、datetime-local、color等，它們都使用<input>標(biāo)簽：

<input type="date" value="2015-07-01">
<input type="datetime-local" value="2015-07-01T02:03:04">
<input type="color" value="#ff0000">

不支持HTML5的瀏覽器無(wú)法識(shí)別新的控件，會(huì)把它們當(dāng)做type="text"來(lái)顯示。支持HTML5的瀏覽器將獲得格式化的字符串。例如，type="date"類(lèi)型的input的value將保證是一個(gè)有效的YYYY-MM-DD格式的日期，或者空字符串。

提交表單

最后，JavaScript可以以?xún)煞N方式來(lái)處理表單的提交（AJAX方式在后面介紹）。

方式一是通過(guò)<form>元素的submit()方法提交一個(gè)表單，例如，響應(yīng)一個(gè)<button>的click事件，在JavaScript代碼中提交表單：

<!-- HTML -->
<form id="test-form">
  <input type="text" name="test">
  <button type="button" onclick="doSubmitForm()">Submit</button>
</form>
<script>
function doSubmitForm() {
  var form = document.getElementById('test-form');
  // 可以在此修改form的input...
  // 提交form:
  form.submit();
}
</script>

這種方式的缺點(diǎn)是擾亂了瀏覽器對(duì)form的正常提交。瀏覽器默認(rèn)點(diǎn)擊<button type="submit">時(shí)提交表單，或者用戶(hù)在最后一個(gè)輸入框按回車(chē)鍵。因此，第二種方式是響應(yīng)<form>本身的onsubmit事件，在提交form時(shí)作修改：

<!-- HTML -->
<form id="test-form" onsubmit="return checkForm()">
  <input type="text" name="test">
  <button type="submit">Submit</button>
</form>
<script>
function checkForm() {
  var form = document.getElementById('test-form');
  // 可以在此修改form的input...
  // 繼續(xù)下一步:
  return true;
}
</script>

注意要return true來(lái)告訴瀏覽器繼續(xù)提交，如果return false，瀏覽器將不會(huì)繼續(xù)提交form，這種情況通常對(duì)應(yīng)用戶(hù)輸入有誤，提示用戶(hù)錯(cuò)誤信息后終止提交form。

在檢查和修改<input>時(shí)，要充分利用<input type="hidden">來(lái)傳遞數(shù)據(jù)。

例如，很多登錄表單希望用戶(hù)輸入用戶(hù)名和口令，但是，安全考慮，提交表單時(shí)不傳輸明文口令，而是口令的MD5。普通JavaScript開(kāi)發(fā)人員會(huì)直接修改<input>：

<!-- HTML -->
<form id="login-form" method="post" onsubmit="return checkForm()">
  <input type="text" id="username" name="username">
  <input type="password" id="password" name="password">
  <button type="submit">Submit</button>
</form>
<script>
function checkForm() {
  var pwd = document.getElementById('password');
  // 把用戶(hù)輸入的明文變?yōu)镸D5:
  pwd.value = toMD5(pwd.value);
  // 繼續(xù)下一步:
  return true;
}
</script>

這個(gè)做法看上去沒(méi)啥問(wèn)題，但用戶(hù)輸入了口令提交時(shí)，口令框的顯示會(huì)突然從幾個(gè)*變成32個(gè)*（因?yàn)镸D5有32個(gè)字符）。

要想不改變用戶(hù)的輸入，可以利用<input type="hidden">實(shí)現(xiàn)：

<!-- HTML -->
<form id="login-form" method="post" onsubmit="return checkForm()">
  <input type="text" id="username" name="username">
  <input type="password" id="input-password">
  <input type="hidden" id="md5-password" name="password">
  <button type="submit">Submit</button>
</form>
<script>
function checkForm() {
  var input_pwd = document.getElementById('input-password');
  var md5_pwd = document.getElementById('md5-password');
  // 把用戶(hù)輸入的明文變?yōu)镸D5:
  md5_pwd.value = toMD5(input_pwd.value);
  // 繼續(xù)下一步:
  return true;
}
</script>

注意到id為md5-password的<input>標(biāo)記了name="password"，而用戶(hù)輸入的id為input-password的<input>沒(méi)有name屬性。沒(méi)有name屬性的<input>的數(shù)據(jù)不會(huì)被提交。

最新評(píng)論