HTML

[JS] แสดงข้อความเตือนกับเมื่อกรอกข้อความไม่ครบ

posted on 19 Nov 2008 14:42 by rije  in HTML

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

Tags: form, java, javascript, js, script2 Comments

++ t u t o r i a l ++

posted on 13 Jul 2007 23:38 by rije  in HTML

ดู Tutorial ทั้งหมดที่นี่ >>

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

หากต้องการ tutorial นอกเหนือจากนี้โพสบอกได้ที่ entry นี้ครับ

edit @ 5 Dec 2008 09:34:05 by +{= r i j e =}+

Tags: request, tutorial18 Comments
First | Previous | Next | Last