form表單的提交方式
form表單的提交方式:
<form name="formMain" id="formMain" method="post" onsubmit="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" onchange="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="登陸" onclick="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="登陸" onclick="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" onsubmit="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>