汇总form表单相关操作,document操作form表单; form表单提交方式; form表单上传文件; form表单序列化。
document操作form表单
document.forms：表示获取当前页面的所有表单,返回所对Form对象的引用，是个数组。document.forms[0]：表示获取当前页面的第一个表单。document.forms[1].submit()：表示提交第1个表单。document.forms['form1']：表示获取当前页面的 name="form1"表单。document.getElementById('form0Id').name：表示获取id="form0Id"的name的值。document.getElementsByName('myform')[0]：表示获取 name="myform"的集合的第1个form。document.getElementsByName('formname0')[0].name;。获取form表单name的值，这里的name是属性，也可以id。
form表单提交方式
type="submit"提交
有两种方式可以使用，input标签或button标签的type = submit来实现提交。
<body>
<h3>form表单submit提交请求：get/post</h3>
<form action="/req/register" id="formId" name="formName" method="post">
账号：<input type="text" name="username" id="usernameId"> <br>
密码：<input type="text" name="password" id="passwordId"> <br>
<input type="submit" value="input标签/submit提交">
<button type="submit">button标签submit提交</button>
</form>
</body>
JS获取表单对象调用submit()方法提交
按钮添加onclick事件，JS获取form对象调用submit()方法提交。
<script type="text/javascript">
function submitForm(){
document.forms[0].submit();
}
</script>
<body>
<h3>form表单submit提交请求：get/post</h3>
<form action="/req/register" id="formId" name="formName" method="post">
账号：<input type="text" name="username" id="usernameId"> <br>
密码：<input type="text" name="password" id="passwordId"> <br>
<input type="button" value="onclick触发JS提交" onclick="submitForm()">
</form>
</body>
jQuery获取表单对象调用submit()方法提交
<script type="text/javascript">
function jQuerySubmit(){
$("#formId").submit();
}
</script>
<body>
<h3>form表单submit提交请求：get/post</h3>
<form action="/req/register" id="formId" name="formName" method="post">
账号：<input type="text" name="username" id="usernameId"> <br>
密码：<input type="text" name="password" id="passwordId"> <br>
<input type="button" value="onclick触发jQuery提交" onclick="jQuerySubmit()">
</form>
</body>
ajax方式提交
采用ajax异步方式，通过jQuery或JS获取所有组件的值，并将这些值组装成JSON格式，通过ajax与服务器交互。
或可使用$.get()或$.post()方法提交。
<script type="text/javascript">
function jqSubmitForm(){
var params = {
"account":$("#accountId").val(),
"passwd":$("#passwdId").val()};
$.ajax({
type: "POST",
url: "/req/register",
data: params,
success: function(data){
alert(data);
}
});
}
</script>
<body>
<form id="formId" name="formName" method="post">
账号：<input type="text" name="account" id="accountId"> <br>
密码：<input type="text" name="passwd" id="passwdId"> <br>
<button onclick="jqSubmitForm()">Ajax提交</button>
</form>
</body>
form表单上传文件
在 form 添加 enctype="multipart/form-data" 属性，只能是 post 方式。
<form action="/file/upload" enctype="multipart/form-data" method="post">
<input type="file" name="name"/>
<input type="submit" value="提交">
</form>
form表单序列化为字符串
表单内容序列化为字符串：jQuery获取表单对象调用serialize()方法。$("#formId").serialize()；#formId选择也可以标签元素，或类名。
<script type="text/javascript">
function ajaxSubmitForm(){
//form表单序列化：account=root&passwd=root112233
var params = $("#formId").serialize();
$.ajax({
type: "POST",
url: "/req/register",
data: params,
success: function(data){
alert(data);
}
});
}
</script>
<body>
<form id="formId" name="formName" method="post">
account：<input type="text" name="account" id="accountId"> <br>
passwd：<input type="text" name="passwd" id="passwdId"> <br>
<button onclick="ajaxSubmitForm()">Ajax提交</button>
</form>
</body>
form表单序列化为JSON数组对象
序列化form表单元素，返回的JSON对象是由一个对象数组组成的，
其中每个对象包含一个或两个名值对(name参数和value参数)。
<script type="text/javascript">
$(function(){
var fields = $("form").serializeArray();
var userNameValue = fields[0].value;
alert(fields[1].value);
console.log(fields);
})
</script>
<body>
<form>
username：<input type="text" id="usernameId" name="username" value="admin">
password：<input type="text" id="passwordId" name="password" value="112233">
<input type="submit" value="提交" onclick="ajaSubmit()">
</form>
</body>
多个按钮提交一个form
<form name="f" action="" method="post">
用户名:<input type="text" name="name"><br>
密码:<input type="text" name="password"><br>
<input type="button" value="submit1" onclick="javascript:document.f.action='test/test1';document.f.submit();"/>
<input type="button" value="submit2" onclick="javascript:document.f.action='test/test2';document.f.submit();"/>
<input type="button" value="submit3" onclick="javascript:document.f.action='test/test3';document.f.submit();"/>
<input type="button" value="submit4" onclick="javascript:document.f.action='test/test4';document.f.submit();"/>
</form>
更多内容请访问：IT源点
注意：本文归作者所有，未经作者允许，不得转载
