這篇文章會說明如何透過jQuery和JavaScript來做網友有無填寫資料的簡單判斷，沒有的話游標會自動跳到尚未填寫的核取方框，並且不送出表單。
HTML語法撰寫
我們透過HTML寫出一個像這樣的表單
語法是這樣：
<body>
<form id="form1" name="form1" method="post" action="" onclick="return false">
<p>姓名：
<input type="text" name="name" id="name" />
</p>
<p>電話：
<input type="text" name="phone" id="phone" />
</p>
<p>地址：
<input type="text" name="address" id="address" />
</p>
<p>
<input type="submit" name="button" id="button" value="送出" />
</p>
</form>
</body>
這裡有一個特別需要注意的地方，就是在<form>的裡面我們多了一個指令，是onclick="return false"，這是一個javascript的語法，意思是點擊送出的時候「不要送出」，那什麼時候才要送出呢？就要搭配上我們jQuery/javascript的語法了。
jQuery語法
<script>
$(document).ready(function(){
$("#button").click(function(){
if($("#name").val()==""){
alert("你尚未填寫姓名");
eval("document.form1['name'].focus()");
}else if($("#phone").val()==""){
alert("你尚未填寫電話");
eval("document.form1['phone'].focus()");
}else if($("#address").val()==""){
alert("你尚未填寫地址");
eval("document.form1['address'].focus()");
}else{
document.form1.submit();
}
})
})
</script>
這裡會依序檢驗各個文字框填寫的狀況，一開始一樣是當「送出」(#button)被點擊的時候，如果我填寫姓名的文字框（#name）的值.val( )是空白的，則：
1.提醒尚未填寫的項目
2.把未填寫的文字框變成focus的狀態（游標移到的樣子）
這裡有一個關鍵字是eval( )，這個在這裡的意思是幫我執行( )內的項目，而括弧內就是找到該對話框（例如，document.form1['name']），然後讓它變成focus的狀態.focus( )。其他的就是繼續會else if的指令寫下去。
最後，如果都正確的話，就幫我把表單（document.form1）送出.submit( )。
參考資料
0 意見:
張貼留言