form表单的提交方式:
<form name="formMain" id="formMain" method="post" οnsubmit="prepSubmit" enctype="multipart/form-data" action="douban.php" target="PostIfr">
onsubmit: 提交前触发
语法:
form.onsubmit
//js:form的submit事件
$("#formMain").submit()
submit()里面可以加一个回调
$("form").submit(function(e){ alert("Submitted"); });
Form 对象属性
属性 | 描述 |
---|---|
acceptCharset | 服务器可接受的字符集。 |
action | 设置或返回表单的 action 属性。 |
enctype | 设置或返回表单用来编码内容的 MIME 类型。 |
id | 设置或返回表单的 id。 |
length | 返回表单中的元素数目。 |
method | 设置或返回将数据发送到服务器的 HTTP 方法。 |
name | 设置或返回表单的名称。 |
target | 设置或返回表单提交结果的 Frame 或 Window 名。 |
Form 对象方法
方法 | 描述 |
---|---|
reset() | 把表单的所有输入元素重置为它们的默认值。 |
submit() | 提交表单。 |
Form 对象事件句柄
事件句柄 | 描述 |
---|---|
onreset | 在重置表单元素之前调用。 |
onsubmit | 在提交表单之前调用。 |
还可以参考第三方插件:https://blog.csdn.net/paincupid/article/details/50430037
Form表单提交数据的几种方式
一、submit提交
在form标签中添加Action(提交的地址)和method(post),且有一个submit按钮(<input type=’submit’>)就可以进行数据的提交,每一个input标签都需要有一个name属性,才能进行提交。
<form action=’http://www.123.com/postValue’ method=’post’>
<input type=’text’ name=’username’ />
<input type=’password’ name=’password’/>
<input type=’submit’ value=’登陆'/>
</form>
当点击登陆时,向服务端发生的数据是:username=username&password=password.
这种默认的提交方式,一般会进行页面的跳转(不成功时跳转到当前页面)。而有时候我们是对弹出框进行数据提交的,希望提交成功则关闭弹出框并刷选父页面,失败则提示失败原因,且弹出框不关闭。此时可以采用Ajax进行数据提交.
二、Ajax提交form表单
$('#documentForm').submitForm({
url: "/Document/SubmitDocumentCreate",
dataType: "text",
callback: function (data) {
endFileUpload();
data = eval("(" + data + ")");
alert(data.Content);
if (data.Result > 0) {
location.href = data.Redirect;
}
},
before: function () {
startFileUpload();
var errMsg = "";
}
}).submit();
此时可以在callback函数中对请求结果进行判断,然后执行不同的动作(页面跳转或刷选数据、提醒错误都可以)
三.form表单提交附件
需要设定form的enctype="multipart/form-data"并且添加<input type=’file’>,而且附件只能通过submit方法进行提交
//html
<form name="formMain" id="formMain" method="post" enctype="multipart/form-data" action="http://www.123.com/postValue.php?action=setRecruitInfo" target="PostIfr">
<a href="javascript:" class="btn-upload" title="点击上传">
<input type="file" id="iCommentImg" name="mypic" οnchange="upfile()">
</a></form>
//js 只能通过submit方式提交
$("#formMain").submit();
四。利用submit按钮实现提交,当点击submit按钮时,触发onclick事件,由JavaScript里函数判断输入内容是否为空,如果为空,返回false, 不提交,如果不为空,提交到由action指定的地址。
<script type="text/javascript">
function check(form) {
if(form.userId.value=='') {
alert("请输入用户帐号!");
form.userId.focus();
return false;
}
if(form.password.value==''){
alert("请输入登录密码!");
form.password.focus();
return false;
}
return true;
}
</script>
<form action="login.do?act=login" method="post">
用户帐号<input type=text name="userId" size="18" value="" ><br>
登录密码<input type="password" name="password" size="19" value=""/>
<input type=submit name="submit1" value="登陆" οnclick="return check(this.form)">
</form>
五。利用button按钮实现提交,当点击button按钮时,触发onclick事件,由JavaScript里函数判断输入内容是否为空,如果为空,返回false, 不提交,如果不为空,提交到由action指定的地址,由于button按钮不具备自动提交的功能,所以由JavaScript实现提交。
<script type="text/javascript">
function check(form) {
if(form.userId.value=='') {
alert("请输入用户帐号!");
form.userId.focus();
return false;
}
if(form.password.value==''){
alert("请输入登录密码!");
form.password.focus();
return false;
}
document.myform.submit();
}
</script>
<form action="login.do?act=login" name="myform" method="post">
用户帐号<input type=text name="userId" size="18" value="" ><br>
登录密码<input type="password" name="password" size="19" value=""/>
<input type=button name="submit1" value="登陆" οnclick="check(this.form)">
</form>
六、利用submit按钮实现提交,当点击submit按钮时,先触发onsubmit事件,由JavaScript里函数判断输入内容是否为空,如果为空,返回false, 不提交,如果不为空,提交到由action指定的地址。
<script type="text/javascript">
function check(form) {
if(form.userId.value=='') {
alert("请输入用户帐号!");
form.userId.focus();
return false;
}
if(form.password.value==''){
alert("请输入登录密码!");
form.password.focus();
return false;
}
return true;
}
</script>
<form action="login.do?act=login" method="post" οnsubmit="return check(this)">
用户帐号<input type=text name="userId" size="18" value="" ><br>
登录密码<input type="password" name="password" size="19" value=""/>
<input type=submit name="submit1" value="登陆">
</form>