jquery的form外掛使用--form.clearForm()/resetForm(),formSerialize(),fieldValue()
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>demo1.html</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script src="jquery-1.3.1.js" type="text/javascript"></script>
<script src="jquery.form.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#myForm').ajaxForm(function() {
$('#output1').html("提交成功!歡迎下次再來!").show();
});
});
</script>
</head>
<body>
<h3> Demo 1 : form外掛的使用--ajaxForm(). </h3>
<form id="myForm" action="demo.php" method="post">
名稱: <input type="text" name="name" /> <br/>
地址: <input type="text" name="address" /><br/>
自我介紹: <textarea name="comment"></textarea> <br/>
<input type="submit" id="test" value="提交" /> <br/>
<div id="output1" style="display:none;"></div>
</form>
</body>
</html>
2
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>demo1.html</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script src="jquery-1.3.1.js" type="text/javascript"></script>
<script src="jquery.form.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#myForm').submit(function() {
$(this).ajaxSubmit(function() {
$('#output1').html("提交成功!歡迎下次再來!").show();
});
return false; //阻止表單預設提交
});
});
</script>
</head>
<body>
<h3> Demo 2 : form外掛的使用---ajaxSubmit(). </h3>
<form id="myForm" action="demo.php" method="post">
名稱: <input type="text" name="name" /> <br/>
地址: <input type="text" name="address" /><br/>
自我介紹: <textarea name="comment"></textarea> <br/>
<input type="submit" id="test" value="提交" /> <br/>
<div id="output1" style="display:none;"></div>
</form>
</body>
</html>
3
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>demo1.html</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script src="jquery-1.3.1.js" type="text/javascript"></script>
<script src="jquery.form.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#test').click(function(){
var queryString = $('#myForm').formSerialize();
alert(queryString);
// 組裝的資料可以用於 $.get, $.post, $.ajax ...
$.post('demo.php', queryString ,function(data){
$('#output1').html("提交成功!歡迎下次再來!").show();
});
return false;
})
//demo2
$('#test2').click(function(){
var queryString = $('#myForm2 *').fieldValue();
alert(queryString);
return false;
})
//重置表單
$('#test3').click(function(){
$('#myForm').resetForm();
$('#myForm2').resetForm();
})
//清除表單
$('#test4').click(function(){
$('#myForm').clearForm();
$('#myForm2').clearForm();
})
});
</script>
</head>
<body>
<h3> Demo 3 : form外掛的使用--formSerialize()組裝表單資料,用於jQuery中的.ajax(). </h3>
<!-- demo1 -->
<form id="myForm" action="demo.php" method="post">
名稱: <input type="text" name="name" /> <br/>
地址: <input type="text" name="address" /><br/>
自我介紹: <textarea name="comment"></textarea> <br/>
<input type="submit" id="test" value="提交" /> <br/>
<div id="output1" style="display:none;"></div>
</form>
<br/><br/><br/>
<!-- demo2 -->
<form id="myForm2" action="demo.php" method="post">
名稱: <input type="text" name="name2" class="special"/> <br/>
地址: <input type="text" name="address2" /><br/>
自我介紹: <textarea name="comment2" class="special"></textarea> <br/>
單選:男<input type="radio" name="a" value="男" checked/>
女<input type="radio" name="a" value="女"/><br/>
<input type="submit" id="test2" value="提交" /> <br/>
</form>
<br/><br/><br/>
<input type="button" id="test3" value="重置所有表單" /> <br/>
<input type="button" id="test4" value="清除所有表單" /> (提示:發現單選框以前選中的,也被清除了,跟重置有點區別!)<br/>
</body>
</html>
4
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>demo4.html</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script src="jquery-1.3.1.js" type="text/javascript"></script>
<script src="jquery.form.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
var options = {
target: '#output1', // 用伺服器返回的資料 更新 id為output1的內容.
beforeSubmit: showRequest, // 提交前
success: showResponse, // 提交後
//另外的一些屬性:
//url: url // 預設是form的action,如果寫的話,會覆蓋from的action.
//type: type // 預設是form的method,如果寫的話,會覆蓋from的method.('get' or 'post').
//dataType: null // 'xml', 'script', or 'json' (接受服務端返回的型別.)
//clearForm: true /A/ 成功提交後,清除所有的表單元素的值.
resetForm: true // 成功提交後,重置所有的表單元素的值.
//由於某種原因,提交陷入無限等待之中,timeout引數就是用來限制請求的時間,
//當請求大於3秒後,跳出請求.
//timeout: 3000
};
//'ajaxForm' 方式的表單 .
$('#myForm').ajaxForm(options);
//或者 'ajaxSubmit' 方式的提交.
//$('#myForm').submit(function() {
// $(this).ajaxSubmit(options);
// return false; //來阻止瀏覽器提交.
//});
});
// 提交前
function showRequest(formData, jqForm, options) {
// formdata是陣列物件,在這裡,我們使用$.param()方法把他轉化為字串.
var queryString = $.param(formData); //組裝資料,外掛會自動提交資料
alert(queryString); //類似 : name=1&add=2
return true;
}
// 提交後
function showResponse(responseText, statusText) {
alert('狀態: ' + statusText + '\n 返回的內容是: \n' + responseText);
}
</script>
</head>
<body>
<h3> Demo 4 : form外掛的使用--ajaxForm()和ajaxSubmit(). </h3>
<!-- demo1 -->
<form id="myForm" action="ajax2.php" method="post">
名稱: <input type="text" name="name" /> <br/>
地址: <input type="text" name="address" /><br/>
自我介紹: <textarea name="comment"></textarea> <br/>
<input type="submit" id="test" value="提交" /> <br/>
<div id="output1" ></div>
</form>
</body>
</html>
5
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>demo5.html</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script src="jquery-1.3.1.js" type="text/javascript"></script>
<script src="jquery.form.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#myForm').ajaxForm({
target: '#output1', // 用伺服器返回的資料 更新 id為output1的內容.
beforeSubmit: validate // 提交前,驗證
});
});
function validate(formData, jqForm, options) {
// formdata是陣列物件,每個物件擁有名稱和值.
// 資料如下面的格式:
// [
// { name: username , value: usernameValue },
// { name: password , value: passwordValue }
// ]
for (var i=0; i < formData.length; i++) {
if (!formData[i].value) {
alert('使用者名稱,地址和自我介紹都不能為空!');
return false;
}
}
var queryString = $.param(formData); //組裝資料
//alert(queryString); //類似 : name=1&add=2
return true;
}
</script>
</head>
<body>
<h3> Demo 5 : form外掛的使用--驗證後提交(簡單驗證). </h3>
<form id="myForm" action="ajax2.php" method="post">
名稱: <input type="text" name="name" id="name" /> <br/>
地址: <input type="text" name="address" id="address"/><br/>
自我介紹: <textarea name="comment" id="comment" ></textarea> <br/>
<input type="submit" id="test" value="提交" /> <br/>
<div id="output1" ></div>
</form>
</body>
</html>
6
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>demo5.html</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script src="jquery-1.3.1.js" type="text/javascript"></script>
<script src="jquery.form.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#myForm').ajaxForm({
target: '#output1', // 用伺服器返回的資料 更新 id為output1的內容.
beforeSubmit: validate // 提交前,驗證
});
});
function validate(formData, jqForm, options) {
// formdata是陣列物件,每個物件擁有名稱和值.
// 資料如下面的格式:
// [
// { name: username , value: usernameValue },
// { name: password , value: passwordValue }
// ]
for (var i=0; i < formData.length; i++) {
if (!formData[i].value) {
alert('使用者名稱,地址和自我介紹都不能為空!');
return false;
}
}
var queryString = $.param(formData); //組裝資料
//alert(queryString); //類似 : name=1&add=2
return true;
}
</script>
</head>
<body>
<h3> Demo 5 : form外掛的使用--驗證後提交(簡單驗證). </h3>
<form id="myForm" action="ajax2.php" method="post">
名稱: <input type="text" name="name" id="name" /> <br/>
地址: <input type="text" name="address" id="address"/><br/>
自我介紹: <textarea name="comment" id="comment" ></textarea> <br/>
<input type="submit" id="test" value="提交" /> <br/>
<div id="output1" ></div>
</form>
</body>
</html>
相關文章
- jQuery表單外掛jQuery.formjQueryORM
- 使用jQuery.form外掛,實現完美的表單非同步提交jQueryORM非同步
- jQuery中cookie外掛如何使用jQueryCookie
- jQuery外掛:jqGrid使用(二)jQuery
- jQuery外掛:jqGrid使用(一)jQuery
- jQuery外掛jQuery
- jQuery的外掛列表jQuery
- jquery 外掛站jQuery
- JQuery模板外掛-jquery.tmpljQuery
- jQuery上傳外掛Uploadify的使用方法jQuery
- jquery的分頁外掛pagination的使用jQuery
- JQuery蜂巢圖外掛jQuery
- jQuery外掛推薦jQuery
- jquery分頁外掛jQuery
- jquery外掛寫法jQuery
- 15 個最新的 jQuery外掛jQuery
- 使用 jQuery UI 和 jQuery 外掛構建更好的 Web 應用程式jQueryUIWeb
- jquery.cookie外掛使用簡單介紹jQueryCookie
- jQuery上傳外掛Uploadify使用詳解jQuery
- JQuery外掛定義&&談談jquery的實現jQuery
- jquery寫的ajax分頁外掛jQuery
- jQuery實現的cookie操作外掛jQueryCookie
- jQuery外掛的二種型別jQuery型別
- ZOOM – 簡單的 jQuery 相簿外掛OOMjQuery
- 分享10款最新的jQuery外掛jQuery
- jquery的50個免費外掛jQuery
- jQuery擴充套件外掛jQuery套件
- jQuery外掛擴充套件jQuery套件
- jquery日曆外掛SimpleCalendarjQuery
- jQuery外掛開發模式jQuery模式
- jquery--uploadify 外掛jQuery
- 240個jquery外掛(轉)jQuery
- jQuery layout 外掛屬性jQuery
- 200個jquery外掛jQuery
- 常用jquery外掛資料jQuery
- jquery外掛開發方法jQuery
- jquery外掛合集之分頁外掛[表單和表格]jQuery
- 不定義 jQuery 外掛,不要說會 jQueryjQuery