Creative Commons License

Tutorial : หมวด HTML & SCRIPT & PHP

Title : แสดงข้อความเตือนหากกรอกข้อมูลไม่ครบ

--------------------------------------------------------

วันนี้เรามาเรียนรู้วิธีการทำยังไง เมื่อกรอกข้อมูลในฟอร์ม พอกดส่งค่าแล้ว ขึ้นข้อความเตือน หากในฟิลด์นั้นๆไม่มีค่า

เริ่มแรกนะครับ เขียน form ส่งค่าขึ้นมาก่อน ดังตัวอย่างด้านล่าง

 

<form action="ส่งค่าไปยัง..." method="post" enctype="multipart/form-data" name="form" onsubmit="return check_form();">
            <table width="80%" cellspacing="0">
            <tr>
                    <td width="30%" height="25">ชื่อ</td>
                    <td align=left><input type="text" name="name"></td>
            </tr>
            <tr>
                    <td height="25">นามสกุล</td>
                    <td align=left><input type="text" name="lastname"></td>
            </tr>
            <tr>
                    <td align="center" colspan="2"><input type="submit" name="Submit" value="submit"></td>
            </tr>
            <table>
</form>

 

จากนั้นเขียน Javascript ขึ้นมาเพื่อใช้สำหรับแสดงข้อความเตือนครับ

function check_form(){
    var name = document.form.name.value;   
    var lastname = document.form.lastname.value;   
        if(name.length < 1){
            alert("โปรดใส่ชื่อของท่าน");
            document.form.name.focus();
            return false;
        }
        else if(lastname.length < 1){
            alert("โปรดใส่นามสกุลของท่าน");
            document.form.lastname.focus();
            return false;
        }
        else {
            document.form.Submit.disabled=true;
            return true;
        }
}

 

เซฟไว้ที่ functions.js ครับ หรือจะใส่ไว้ระหว่าง <head>...</head> ก็ได้
ในกรณีนี้ต้องใส่ระหว่าง <SCRIPT language="JavaScript">...</SCRIPT>

จากนั้นวิธีการเรียนสคริปมาใช้ เขียนดังนี้ครับ

<SCRIPT language="JavaScript" src="functions.js"></SCRIPT>

เอาไว้บน form หรือจะไว้ระหว่าง ...ก็ได้ครับ

-------------------------------------------------------

อธิบายสคริป

onsubmit="return check_form();" : เรียกฟังก์ชั่นขึ้นมาโดยการส่งค่าไปยังสคริป js

var name = document.form.name.value; : สร้างตัวแปรชื่อ name มารับค่า name จาก form

if(name.length < 1) : เช็คค่า ถ้าเกิดว่าค่าของ name มีตัวอักษรน้อยกว่า 1 ให้ทำคำสั่งใน if

alert("โปรดใส่ชื่อของท่าน"); : ขึ้นข้อความเตือนว่า โปรดใส่ชื่อของท่าน

document.form.name.focus(); : ย้าย cursor ไปยังชื่อใส่ชื่อ

return false; : ส่งค่า false กลับ ทำให้ไม่ทำการส่งค่าไปยังเพจถัดไป (ที่คอยรับค่ามาเก็บ)

document.form.Submit.disabled=true; : หากไม่ติดเงื่อนไขใดๆ จะมายังส่วนนี้ เซ็ตว่า Submit (มีค่า name กับ lastname อยู่) เป็นจริง เพื่อจะส่งค่าไปยังเพจถัดไป

return true; : ส่งค่า true กลับทำให้ form ทำการส่งค่าไปยังเพจถัดไป

 

สรุป :

false -> ทำให้ค่าไม่ถูกส่งไป , true -> ทำให้ค่าส่งไป

false -> ค่าเป็นเท็จจึงไม่ทำการส่งค่า Submit , true -> ค่าเป็นจริง Submit แล้วจึงส่งค่าไปได้

-------------------------------------------------------- 

ลองเอาไปใช้กันดูนะครับ ถ้าไม่ได้ก็ถามได้ครับ ^^

edit @ 19 Nov 2008 16:10:21 by Rij-J

Comment

Comment:

Tweet

ขอบคุณมากเลยครับ^^

#29 By ชินดนัย (122.155.43.119) on 2015-12-04 16:59

#28 By (122.155.38.120|122.155.38.120) on 2015-09-09 20:22

#27 By (180.180.77.99|180.180.77.99) on 2015-07-16 15:57

#26 By ัั (203.158.160.5|203.158.160.5) on 2015-07-08 14:53

#25 By (182.52.241.205|182.52.241.205) on 2015-07-08 14:18

ถ้าไม่เอาแบบ alert แต่ echo ตรงล่างบรรทัด ของช่องให้กรอก user name ละครับ จะทำได้ไหม

#24 By aa (183.88.132.122|183.88.132.122) on 2015-06-27 21:03

#23 By (202.29.32.159|202.29.32.159) on 2015-06-10 13:30

#22 By (203.172.182.90|203.172.182.90) on 2015-03-30 11:36

สิ่งต้องการคือ ไม่ให้เตือนเรื่อง SCRIPT

#21 By (14.207.161.129|14.207.161.129) on 2015-03-28 13:41

บังเอิญโง่ อธิบายมาไม่เข้าใจ เข้าไปแก้ตรงไหน แก้เพื่ออะไร

#20 By (14.207.161.129|14.207.161.129) on 2015-03-28 13:39

angry smile

#19 By (110.49.233.208|110.49.233.208) on 2015-02-28 00:14

#18 By (14.207.228.65|14.207.228.65) on 2015-02-02 22:06

#17 By (223.205.60.122|223.205.60.122) on 2014-11-14 09:37

#16 By (223.205.60.122|223.205.60.122) on 2014-11-14 09:36

#15 By ม่เ (180.183.25.31|180.183.25.31) on 2014-08-26 10:35

#14 By (115.31.137.119|115.31.137.119) on 2014-06-26 10:46

#13 By (49.0.118.226|49.0.118.226) on 2014-06-04 16:25

#12 By (49.0.118.226|49.0.118.226) on 2014-06-04 16:25

#11 By (58.137.132.250|58.137.132.250) on 2014-04-09 18:51

#10 By (49.230.157.29|49.230.157.29) on 2014-03-17 12:21

#9 By (171.101.190.67|171.101.190.67) on 2014-03-14 15:46

#8 By (171.101.190.67|171.101.190.67) on 2014-03-14 15:12

งง ง embarrassed
แต่ก็ขอบคุณมาก ๆ เลยเด๋วจะลองมั่ว ๆ ไปละกัน

#2 By `iS ,, n ueng ★ on 2009-04-30 14:29

มึนๆๆ sad smile



เมื่อวานเพิ่งอ่านเรื่องบอทในพันทิปมา เกี่ยวกับลอคอินในพันทิปอ่ะ
surprised smile ฮาดี

#1 By Paa orKant on 2008-11-26 10:22