提交表单

最后，JavaScript可以以两种方式来处理表单的提交（AJAX方式在后面章节介绍）。

方式一是通过 <form> 元素的 submit() 方法提交一个表单，例如，响应一个 <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>

这种方式的缺点是扰乱了浏览器对form的正常提交。浏览器默认点击 &lt;button type="submit"&gt; 时提交表单，或者用户在最后一个输入框按回车键。因此，第二种方式是响应 &lt;form&gt; 本身的 onsubmit 事件，在提交form时作修改：

<!— 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…

// 继续下一步:

return true;

}

</script>

注意要 return true 来告诉浏览器继续提交，如果 return false ，浏览器将不会继续提交form，这种情况通常对应用户输入有误，提示用户错误信息后终止提交form。

在检查和修改 &lt;input&gt; 时，要充分利用 &lt;input type="hidden"&gt; 来传递数据。

例如，很多登录表单希望用户输入用户名和口令，但是，安全考虑，提交表单时不传输明文口令，而是口令的MD5。普通JavaScript开发人员会直接修改 &lt;input&gt; ：

<!— 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');

// 把用户输入的明文变为MD5:

pwd.value = toMD5(pwd.value);

// 继续下一步:

return true;

}

</script>

这个做法看上去没啥问题，但用户输入了口令提交时，口令框的显示会突然从几个 变成32个 （因为MD5有32个字符）。

要想不改变用户的输入，可以利用 &lt;input type="hidden"&gt; 实现：

<!— 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');

// 把用户输入的明文变为MD5:

md5_pwd.value = toMD5(input_pwd.value);

// 继续下一步:

return true;

}

</script>

注意到 id 为 md5-password 的 &lt;input&gt; 标记了 name="password" ，而用户输入的 id 为 input-password 的 &lt;input&gt; 没有 name 属性。没有 name 属性的 &lt;input&gt; 的数据不会被提交。