說明:serialize()取得該指定form表單裡頭所有input的名稱以及對應到的值
以下為範例說明
(一)取得該指定form表單裡input名稱以及所對應的值
1.)建立一個form裡頭有三個input 設定名稱為a,b,c，並且設立一個連結按鈕作為測試
<form id="form1" action="#">
<div>姓名:<input type="text" name="a" id="a" value=""></div>
<div>電話:<input type="text" name="b" id="b" value=""></div>
<div>手機:<input type="text" name="c" id="c" value=""></div>
<a href="#" id="ser">list</a>
</form>
2.)編寫css,稍為美化一下(ˊˋ)
<style type="text/css">
div{
border: solid 1px #330066;
padding: 5px;
}
</style>
3.)JQuery撰寫
<script type="text/javascript">
$(document).ready(function(){
$('#ser').click(function(){
alert($('#form1').serialize());
return false;
});
});
</script>
4.)完整程式碼
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../js/jquery-1.4.3.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#ser').click(function(){
alert($('#form1').serialize());
return false;
});
});
</script>
<!--
2.)編寫css,稍為美化一下(ˊˋ)
-->
<style type="text/css">
div{
border: solid 1px #330066;
padding: 5px;
}
</style>
</head>
<body>
<!--
1.)建立一個form裡頭有三個input 設定名稱為a,b,c
並且設立一個連結按鈕作為測試
-->
<form id="form1" action="#">
<div>姓名:<input type="text" name="a" id="a" value=""></div>
<div>電話:<input type="text" name="b" id="b" value=""></div>
<div>手機:<input type="text" name="c" id="c" value=""></div>
<a href="#" id="ser">list</a>
</form>
</body>
</html>
沒有留言:
張貼留言