html form submit

最近在做的部分与 HTML 的 form 表单相关,记录下以下几个问题。

用 form 表单外的 button 提交

一般情况下,form 表单的提交按钮会写在 form 表单内,而且非常方便,如:

1
2
3
4
5
<form action="/userlist/add" method="POST">
用户名:<input type="text" id="username" required="required" />
密码:<input type="text" id="password" required="required" />
<input type="submit" value="提交" />
</form>

这样,就会有一个叫提交的按钮,点击后会执行 form 的 action。

但有时我们需要在 form 标签以外的某一个 button 上执行表单的提交。比如在另外一个 div 上有一个 button。这时就让这个 button 去执行一个 js 方法,用 js 去调用这个 form 的submit 方法即可,如:

1
2
3
4
5
6
7
8
9
10
<div class="modal-body">
<form action="/userlist/add" method="POST" id="formNewUser">
用户名:<input type="text" id="username" />
密码:<input type="text" id="password" />
<input type="submit" value="提交" />
</form>
</div>
<div class="modal-footer">
<button onclick="$('#formNewUser').submit()">提交</button>
</div>

注意,直接调用 submit 方法的方式提交,即使给 username 和 password 的 input 标签添加了 required 属性,也不会自动校验,而是直接执行 action 的方法。所以如果需要校验必填项,就在 js 方法里面校验,如:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<div class="modal-footer">
<button onclick="submitValidate()">提交</button>
</div>
<script type="text/javascript">
function submitValidate() {
if ($("#username").val().length == 0) {
alert("请输入用户名");
} else if ($("#password").val().length == 0) {
alert("请输入密码");
} else {
$('#formNewUser').submit()
}
}
</script>

form 表单内的 button 会默认自动提交

如果一个 button 在 form 表单里,那他默认就是一个 submit 按钮,不管你有没有写成 type="submit"

1
2
3
<form>
<button>...</button>
</form>

但有些按钮我们并不想让它执行提交,则可以对其添加属性 type="button" 即可。

提交非由用户填写的参数

有时我们需要在调用接口时,提交一些不是由用户填写的参数。

如编辑一条数据,其 id 是程序在提交时直接填充上的,而不需要由用户填写,也不需要用户看到。

这时,只需要在 form 里增加一个 input,并且将其 hidden 属性设置为 hidden,value 属性设置为所需要提交的值即可。如:

1
2
3
4
5
<form>
<input type="text" value="1234567890abcdef" hidden="hidden" name="id" />
<input type="text" name="username" />
<input type="text" name="address" />
</form>