1.form的兩個事件
目錄
一、submit 和onSubmit事件
submit，提交表單，如果直接調用該函數，則直接提交表單
onSubmit，提交按鈕點擊時先觸發，然後觸發submit事件。如果不加控制的話，默認返回true，因此表單總能提交。
二、測試demo
<html>
<head>
<title>測試</title>
</head>
<link rel="stylesheet" type="text/css" href="./css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="./css/bootstrap-editable.css">
<link rel="stylesheet" type="text/css" href="./css/bootstrap-responsive.min.css">
<link rel="stylesheet" type="text/css" href="./css/bootstrap-table.css">
<link rel="stylesheet" type="text/css" href="./css/datepicker.css">
<link rel="stylesheet" type="text/css" href="./css/main.css">
<script type="text/javascript" src="./js/jquery.js"></script>
<script type="text/javascript" src="./js/bootstrap.min.js"></script>
<script type="text/javascript" src="./js/bootstrap-datepicker.js"></script>
<script type="text/javascript" src="./js/bootstrap-editable.js"></script>
<script type="text/javascript" src="./js/bootstrap-table.js"></script>
<script type="text/javascript" src="./js/bootstrap-table-zh-CN.min.js"></script>
<script type="text/javascript" src="./js/bootstrap-validation.js"></script>
<body>
<div class="container-fluid">
<form method="post" action="http://www.baidu.com" target="_blank" id="J_giftcard" onsubmit="return checkGiftcardSubmit();">
<input type="text" name="word">
<button type="submit" id="J_Preview">提交</button>
</form>
</div>
</body>
<script type="text/javascript">
$(function(){
$("#J_giftcard").submit(function(){
alert("進行數據的組裝");
});
});
function checkGiftcardSubmit() {
alert("對數據格式的判斷");
return true;
}
</script>
</html>
三、遇到bug
無法進行正常的post請求，即使將οnsubmit="return checkGiftcardSubmit();" 刪除也無法進行post請求。
後來才知道用了boostrap的bootstrap-validation.js插件，進行form表單的驗證,用style="display:none;"將input控件隱藏起來，還是會對它進行校驗，無法不通過則無法進行post請求。
js的code:
$(function() {
$("form").validation();
});
html的code:
<input style="display:none;" type="text" class="input-medium" name="applyDepartment" id="J_giftcard_costBear" check-type="maxLength" lengthValue="50">