สำหรับ
JavaScriptนั้นสมารถนำมาใช้ได้หลายอย่างเลยค่ะ แต่วันนี้แอดมินจะมาสอนวิธีการสร้าง JavaScript ในการเช็กค่าว่างของ text box กันค่ะ
เริ่มกันที่สร้าง form เพื่อรับค่ากันก่อนค่ะ
โค้ด: เลือกทั้งหมด
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Java Script check null</title>
</head>
<body>
<FORM METHOD="POST" NAME="forms" ACTION="#" onsubmit="javascript:return checkNull();">
<h1>Welcome to Mindphp</h1>
ชื่อ : <input type="text" name="firstname" /> <br />
นามสกุล : <input type="text" name="lastname" /> <br />
ชื่อเล่น : <input type="text" name="nickname" /> <br />
<input type="submit" Value="Submit" />
</form>
</body>
</html>
อย่าลืมสร้าง form เพื่อไว้ใช้เรียกฟังก์ชันใน JavaScript มาใช้งานด้วยนะค่ะ ในที่นี้แอดมินตั้งชื่อ formว่า name="forms" ในส่วนของ onsubmit จำเป็นต้องมีนะค่ะเพราะใช้สำหรับเรียกฟังก์ชันใน JavaScript โดยแอดมินกำหนดให้เป็น onsubmit="javascript:return checkNull();" นั่นหมายความว่าเรีกใช้ฟังก์ชัน checkNull นั่นเองค่ะ เรามาดูรูปแบบของฟอร์มที่เราสร้างกันค่ะ
- form_JS.png (23.05 KiB) Viewed 1692 times
จากนั้น
เรามาสร้าง JavaScript ของฟังก์ชัน checkNull กันค่ะ
JavaScript โดยส่วนใหญ่เราจะสร้างไว้ในส่วนของ head กันนะค่ะ
โค้ด: เลือกทั้งหมด
<script language="javascript">
function checkNull() {
if(document.forms.firstname.value=="") { // เป็นการเช้กค่าว่าช่องนี้เป็นค่าว่างมั้ย (forms = ชื่อ form), (firstname = ชื่อหรือ name ของ textbox )
alert("กรุณาระบุชื่อ") ; // alert จะเป็นการแจ้งเตือนว่า กรุณากรอกชื่อ ^^
document.forms.firstname.focus() ; // .focus() ตรงนี้คือระบุตำแหล่งที่เราต้องการเช็กค่ะ
return false ;
}
if(document.forms.lastname.value=="") {
alert("กรุณาระบุนามสกุล") ;
document.forms.lastname.focus() ;
return false ;
}
if(document.forms.nickname.value=="") {
alert("กรุณาระบุชื่อเล่น") ;
document.forms.nickname.focus() ;
return false ;
}
else
return true ;
}
</script>
ลอง coppy โค้ดหรือลองสร้างตามนี้แล้วลอง run ผลดูนะค่ะ ^^ ถ้าถูกต้องผลจะออกมาตามรูปด้านล่างค่ะ หากเราลืมกรอกช่องไหนมันจะแจ้งเตือนแบบนี้
- JS_test.png (28.53 KiB) Viewed 1692 times
สำหรับ [url=https://www.mindphp.com/%E0%B8%9A%E0%B8%97%E0%B9%80%E0%B8%A3%E0%B8%B5%E0%B8%A2%E0%B8%99%E0%B8%AD%E0%B8%AD%E0%B8%99%E0%B9%84%E0%B8%A5%E0%B8%99%E0%B9%8C/%E0%B8%AA%E0%B8%AD%E0%B8%99-javascript.html]JavaScript[/url]นั้นสมารถนำมาใช้ได้หลายอย่างเลยค่ะ แต่วันนี้แอดมินจะมาสอนวิธีการสร้าง JavaScript ในการเช็กค่าว่างของ text box กันค่ะ
[u][color=#FF4000]เริ่มกันที่สร้าง form เพื่อรับค่ากันก่อนค่ะ [/color][/u]
[code=php]
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Java Script check null</title>
</head>
<body>
<FORM METHOD="POST" NAME="forms" ACTION="#" onsubmit="javascript:return checkNull();">
<h1>Welcome to Mindphp</h1>
ชื่อ : <input type="text" name="firstname" /> <br />
นามสกุล : <input type="text" name="lastname" /> <br />
ชื่อเล่น : <input type="text" name="nickname" /> <br />
<input type="submit" Value="Submit" />
</form>
</body>
</html>
[/code]
อย่าลืมสร้าง form เพื่อไว้ใช้เรียกฟังก์ชันใน JavaScript มาใช้งานด้วยนะค่ะ ในที่นี้แอดมินตั้งชื่อ formว่า name="forms" ในส่วนของ onsubmit จำเป็นต้องมีนะค่ะเพราะใช้สำหรับเรียกฟังก์ชันใน JavaScript โดยแอดมินกำหนดให้เป็น onsubmit="javascript:return checkNull();" นั่นหมายความว่าเรีกใช้ฟังก์ชัน checkNull นั่นเองค่ะ เรามาดูรูปแบบของฟอร์มที่เราสร้างกันค่ะ
[attachment=1]form_JS.png[/attachment]
จากนั้น[u][color=#FF4000]เรามาสร้าง JavaScript ของฟังก์ชัน checkNull กันค่ะ[/color][/u]
:arrow: JavaScript โดยส่วนใหญ่เราจะสร้างไว้ในส่วนของ head กันนะค่ะ
[code=php]
<script language="javascript">
function checkNull() {
if(document.forms.firstname.value=="") { // เป็นการเช้กค่าว่าช่องนี้เป็นค่าว่างมั้ย (forms = ชื่อ form), (firstname = ชื่อหรือ name ของ textbox )
alert("กรุณาระบุชื่อ") ; // alert จะเป็นการแจ้งเตือนว่า กรุณากรอกชื่อ ^^
document.forms.firstname.focus() ; // .focus() ตรงนี้คือระบุตำแหล่งที่เราต้องการเช็กค่ะ
return false ;
}
if(document.forms.lastname.value=="") {
alert("กรุณาระบุนามสกุล") ;
document.forms.lastname.focus() ;
return false ;
}
if(document.forms.nickname.value=="") {
alert("กรุณาระบุชื่อเล่น") ;
document.forms.nickname.focus() ;
return false ;
}
else
return true ;
}
</script>
[/code]
ลอง coppy โค้ดหรือลองสร้างตามนี้แล้วลอง run ผลดูนะค่ะ ^^ ถ้าถูกต้องผลจะออกมาตามรูปด้านล่างค่ะ หากเราลืมกรอกช่องไหนมันจะแจ้งเตือนแบบนี้
[attachment=0]JS_test.png[/attachment]