ปันโค้ดฟรี บล็อก

วิธีเช็คค่าว่างใน Form ก่อน Submit ด้วย Javascript

Unknown
บทความนี้จะขอกล่าวถึงการเช็คค่าว่างในกล่องรับข้อมูลรูปแบบต่างๆอาทิเช่น Text field , Text area , Check box , Radio button , List/menu , File Field

1. การเช็คค่าว่างด้วย JavaScript ใน Text field
<html> <script type="text/javascript"> function fncSubmit() { if(document.getElementById('textfield').value == "") { alert('PLEASE INPUT DATA'); return false; } } </script> <body > <form action="" method="post" onSubmit="JavaScript:return fncSubmit();"> <input type="text" name="textfield" id="textfield"> <input type="submit" name="button" id="button" value="Submit"> </form> </body> </html>

DEMO

2. การเช็คค่าว่างด้วย JavaScript ใน Text area
<html> <script type="text/javascript"> function fncSubmit() { if(document.getElementById('textarea').value == "") { alert('PLEASE INPUT DATA'); return false; } } </script> <body > <form action="" method="post" onSubmit="JavaScript:return fncSubmit();"> <textarea name="textarea" id="textarea" cols="45" rows="5"></textarea> <input type="submit" name="button" id="button" value="Submit"> </form> </body> </html>

DEMO

3. การเช็คค่าว่างด้วย JavaScript ใน Check box
<html> <script type="text/javascript"> function fncSubmit() { if(document.getElementById('checkbox').checked == false) { alert('PLEASE CHECK BOX TRUE'); return false; } } </script> <body > <form action="" method="post" onSubmit="JavaScript:return fncSubmit();"> <input type="checkbox" name="checkbox" id="checkbox"> <input type="submit" name="button" id="button" value="Submit"> </form> </body> </html>

DEMO

4. การเช็คค่าว่างด้วย JavaScript ใน Radio button
<html> <script type="text/javascript"> function fncSubmit() { if(document.getElementById('radio1').checked == false && document.getElementById('radio2').checked == false ) { alert('PLEASE CHECK radio1 OR radio2 TRUE'); return false; } } </script> <body > <form action="" method="post" onSubmit="JavaScript:return fncSubmit();"> <input type="radio" name="radio" id="radio1" value="radio">xxx <input type="radio" name="radio" id="radio2" value="radio">yyy <input type="submit" name="button" id="button" value="Submit"> </form> </body> </html>

DEMO 

 5. การเช็คค่าว่างด้วย JavaScript ใน List/menu
<html> <script type="text/javascript"> function fncSubmit() { if(document.getElementById('select').value == "0" ) { alert('PLEASE SELECT LIST'); return false; } } </script> <body > <form action="" method="post" onSubmit="JavaScript:return fncSubmit();"> <select name="select" id="select"> <option value="0">Please Select</option> <option value="1">DOG</option> <option value="2">CAT</option> <option value="3">PIG</option> </select> <input type="submit" name="button" id="button" value="Submit"> </form> </body> </html>

DEMO

6. การเช็คค่าว่างด้วย JavaScript ใน File Field
<html> <script type="text/javascript"> function fncSubmit() { if(document.getElementById('fileField').value == "" ) { alert('PLEASE CHOOSE FILE'); return false; } } </script> <body > <form action="" method="post" enctype="multipart/form-data" onSubmit="JavaScript:return fncSubmit();"> <input type="file" name="fileField" id="fileField"> <input type="submit" name="button" id="button" value="Submit"> </form> </body> </html>

DEMO

7. การประยุกต์ใช้ตั้งแต่สองคำสั่งขึ้นไปใน 1 ฟอร์ม
<html> <script type="text/javascript"> function fncSubmit() { if(document.getElementById('checkbox').checked == false ) { alert('PLEASE CHECK IN BOX'); return false; } if(document.getElementById('textfield').value == "" ) { alert('PLEASE INPUT YOURTEXT'); return false; } } </script> <body > <form action="" method="post" enctype="multipart/form-data" onSubmit="JavaScript:return fncSubmit();"> <input type="checkbox" name="checkbox" id="checkbox">xxxx <input type="text" name="textfield" id="textfield"> <input type="submit" name="button" id="button" value="Submit"> </form> </body> </html>

DEMO

จบแล้วครับสำหรับบทความการเช็คค่าว่าง (NULL) ใน INPUT ต่างๆด้วย  javascript ขอเป็นกำลังใจให้นักพัฒนาเว็บไซต์ทุกท่านประสบความสำเร็จในการโค้ดโปรแกรมและพัฒนาต่อยอดเว็บไซต์ครับผม

เคดิต : http://www.code108.com
Read More
07:51 , , ,

เทคนิคการเขียน javascript ควบคุม css

Unknown
เมื่อเราเขียน CSS มาจนถึงระดับหนึ่งแล้ว เราจะพบว่า CSS ก็คือการตกแต่งหน้าตาเว็บไซต์ ให้สวยงาม เป็นการแสดงผลเท่านั้น เหมือน HTML ไม่สามารถโต้ตอบกับผู้ใช้ได้เหมือน javacript , php หรือ asp เราจะทำอย่างไรหากต้องการให้ หน้าตาเว็บไซต์ ถูกกำหนดโดยผู้ใช้ เลือกสีกรอบได้ โดยการคลิกแล้วเปลี่ยนกรอบได้ ฟังดูน่าสนใจใช่มั้ยล่ะครับ

ในกรณีนี้ เราจะใช้ จาวาสคริป เข้ามาช่วยควบคุม ลองมาดูตัวอย่าง การทำ TextBox เปลี่ยนสีโดยการคลิก ปุ่ม

เริ่มต้นเรามี HTML ดังนี้ (โดยจะมี Bootstrap เข้ามาช่วยในการตกแต่งนิดหน่อย)






<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="dist/css/bootstrap.css" rel="stylesheet" />
<link href="dist/css/bootstrap.min.css" rel="stylesheet" />
<link href="dist/css/bootstrap-theme.css" rel="stylesheet" />
<link href="dist/css/bootstrap-theme.min.css" rel="stylesheet" />
<style type="text/css">
.block-2 {
 width: 100%;
 height: 120px;
 margin-top:100px;
 float: left;
 text-align:center;
}
</style>
<title>Pancode Free.</title>
</head>

<body>
 <div class="block-2">
     <div class="form-inline">
         <input type="text" class="form-control" id="InputTxt" placeholder="Input Text">
            <a href="javasript:void(0)" class="btn btn-default" >ปกติ</a>
            <a href="javasript:void(0)" class="btn btn-info" >ฟ้า</a>
            <a href="javasript:void(0)" class="btn btn-danger" >แดง</a>
            <a href="javasript:void(0)" class="btn btn-success" >เขียว</a>
     </div>
</body>
</html>





















เราจะมาเขียน Class ของ css เพิ่มเพื่อตกแต่ง TextBox






<style type="text/css">
.bgcolor1 { 
 border-color:#00F;
 background-color:#0CF;
}
.bgcolor2 { 
 border-color:#F00; 
 background-color:#F9C;
}
.bgcolor3 { 
 border-color:#0F0;
 background-color:#0F9;
}
</style>







และเขียน javascript เพื่อเพิ่ม style ให้กับ TextBox






<script type="text/jscript">
function checkTxtbox(n) {
 txt = document.getElementById('InputText');
 txt.className = "form-control";
 if(n==1)
 txt.className += " bgcolor1";   //เพิ่ม class bgcolor1 ถ้า n==1
 else if(n==2)
 txt.className += " bgcolor2";   //เพิ่ม class bgcolor2 ถ้า n==2
 else if(n==3)
 txt.className += " bgcolor3";   //เพิ่ม class bgcolor3 ถ้า n==3
 else
 txt.className = txt.className;
} 
</script>






เมื่อนำโค้ดทั้งหมดมาประกอบกันก็จะได้






<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="dist/css/bootstrap.css" rel="stylesheet" />
<link href="dist/css/bootstrap.min.css" rel="stylesheet" />
<link href="dist/css/bootstrap-theme.css" rel="stylesheet" />
<link href="dist/css/bootstrap-theme.min.css" rel="stylesheet" />
<style type="text/css">
.block-2 {
 width: 100%;
 height: 120px;
 margin-top:100px;
 float: left;
 text-align:center;
}

.bgcolor1 { 
 border-color:#00F;
 background-color:#0CF;
}
.bgcolor2 { 
 border-color:#F00; 
 background-color:#F9C;
}
.bgcolor3 { 
 border-color:#0F0;
 background-color:#0F9;
}
</style>
<script type="text/jscript">
function checkTxtbox(n) {
 txt = document.getElementById('InputText');
 txt.className = "form-control";
 if(n==1)
 txt.className += " bgcolor1";   //เพิ่ม class bgcolor1 ถ้า n==1
 else if(n==2)
 txt.className += " bgcolor2";   //เพิ่ม class bgcolor2 ถ้า n==2
 else if(n==3)
 txt.className += " bgcolor3";   //เพิ่ม class bgcolor3 ถ้า n==3
 else
 txt.className = txt.className;
} 
</script>
<title>Pancode Free.</title>
</head>

<body>
 <div class="block-2">
  <div class="form-inline">
   <input type="text" class="form-control" id="InputText" placeholder="Text Name">
      <a href="javasript:void(0)" class="btn btn-default" onClick="checkTxtbox(0)">ปกติ</a>
      <a href="javasript:void(0)" class="btn btn-info" onClick="checkTxtbox(1)">ฟ้า</a>
      <a href="javasript:void(0)" class="btn btn-danger" onClick="checkTxtbox(2)">แดง</a>
      <a href="javasript:void(0)" class="btn btn-success" onClick="checkTxtbox(3)">เขียว</a>
  </div>
 </div>
</body>
</html>









เมื่อเราคลิกที่ปุ่ม onClick="checkTxtbox(2)" ก็จะมีการส่งค่าไปถาม Javascript เมื่อตรงเงื่อนไขไหน ก็จะนำเอาชื่อ class นั้นมาต่อ แล้วได้ผลออกมาดังนี้



















































































                            Read More
                          















07:18






                              ,
                            











โปรแกรมซูมหน้าจอ ZoomIt v4.5 








Unknown




















“โปรแกรม ZoomIt เป็นโปรแกรมที่มีไว้ให้สำหรับการใช้สื่อคอมพิวเตอร์ สามารถนำไปขยายหน้าจอ ซึ่งบางครั้ง สิ่งที่อยู่ในหน้าจอ อาจจะมีขนาดเล็กเกินไป “



โปรแกรม ZoomIt  ปัจจุบันพัฒนามาถึงเวอร์ชั่น 4.5 แล้ว ZoomIt v4.5 ซึ่งถือว่าเป็นโปรแกรมตัวเล็กๆที่ได้รับความนิยมมากมายเลยทีเดียว


และที่สำคัญ ZoomIt v4.5 เป็นโปรแกรมฟรี ที่ให้เราได้โหลดไปใช้ได้ฟรี ไม่มีโฆษณามากวนใจอีกด้วย
ใช้งานง่าย ไม่ต้องติดตั้ง เป็นไฟล์ .EXE ใช้งานได้เลย



วิธีการใช้งานที่สำคัญ



1. โหมดการขยาย (Zoom)



กดแป้น Ctrl+1 (ค่าปกติ) หน้าจอจะถูกขยายโดยอัตโนมัติ คุณสามารถหมุนลูกกลิ้งที่เมาท์ (mouse wheel) เดินหน้า-ถอยหลัง



หรือใช้แป้นลูกศรขึ้น-ลง เพื่อขยายหรือย่อภาพหน้าจอ (zoom-in / zoom-out) กดแป้น Esc หรือคลิกเมาท์ปุ่มขวา เพื่อออกจากโหมดการขยายหน้าจอ



2. โหมดการขีดเขียน (Draw)



เข้าสู่โหมดการขีดเขียนโดยไม่ต้องเข้าโหมด zoom ก่อนได้ โดยการกดแป้น Ctrl+2 (ค่าปกติ)



หรือในขณะที่อยู่ในโหมดขยายหน้าจอ (Zoom) คุณสามารถ
คลิกเมาท์ปุ่มซ้าย เพื่อเข้าสู่โหมดการขีดเขียน (Draw)
คลิกเมาท์ปุ่มซ้ายค้างไว้ แล้วลากเมาท์ เพื่อขีดเขียนได้ตามต้องการ (Freehand)
กดแป้น Ctrl+Z เพื่อลบสิ่งที่ขีดเขียนล่าสุด
กดแป้น e เพื่อลบทุกสิ่งที่ขีดเขียนลงไป
กดแป้นเว้นวรรค เพื่อให้เคอร์เซอร์มาอยู่ตรงกลางจอ
กดแป้น Esc หรือคลิกเมาท์ปุ่มขวา เพื่อออกจากโหมดการขีดเขียน



การเปลี่ยนสีปากกา



กดแป้น r เพื่อเปลี่ยนสีปากกาเป็น สีแดง
กดแป้น g เพื่อเปลี่ยนสีปากกาเป็น สีเขียว
กดแป้น b เพื่อเปลี่ยนสีปากกาเป็น สีน้ำเงิน
กดแป้น o เพื่อเปลี่ยนสีปากกาเป็น สีส้ม
กดแป้น y เพื่อเปลี่ยนสีปากกาเป็น สีเหลือง
กดแป้น p เพื่อเปลี่ยนสีปากกาเป็น สีชมพู



การเขียนรูปทรง



กดแป้น Shift ค้างไว้ ขณะลากเมาท์ เมื่อต้องการขีด เส้นตรง
กดแป้น Ctrl ค้างไว้ ขณะลากเมาท์ เมื่อต้องการวาดรูป สี่เหลี่ยม
กดแป้น Tap ค้างไว้ขณะลากเมาท์ เมื่อต้องการวาด วงกลม
กดแป้น Shift+Ctrl ค้างไว้ ขณะลากเมาท์ เมื่อต้องการเขียน เส้นหัวลูกศร



การล้างหน้าจอ (Clear Screen) เพื่อจะขีดเขียนข้อความใดๆ



กดแป้น w เพื่อให้หน้าจอเป็นพื้นสีขาว
กดแป้น k เพื่อให้หน้าจอเป็นพื้นสีดำ
กดแป้น Ctrl+S เพื่อบันทึกภาพหน้าจอที่เขียนไว้
กดแป้น Ctrl+C เพื่อคัดลอกหน้าจอ (สำหรับเวอร์ชัน 3.0 ขึ้นไป)



3. โหมดการพิมพ์ (Type)



ในขณะที่อยู่ในโหมดการขีดเขียน



กดแป้น t เพื่อเข้าสู่โหมดการพิมพ์
กดแป้น Esc หรือคลิกเมาท์ปุ่มขวา เพื่อออกจากโหมดการพิมพ์
หมุนลูกกลิ้งที่เมาท์ (mouse wheel) เดินหน้า-ถอยหลัง หรือใช้แป้นลูกศรขึ้น-ลง เพื่อปรับขนาดตัวอักษร














                            Read More
                          















06:53






                              ,
                            











เทคนิค...การทำให้ Textbox กรอกหรือป้อนได้เฉพาะตัวเลขด้วย Javascript ง่ายๆ








ไม่ระบุชื่อ














หลาย ๆ คนคงอาจจะเคยเจอกันแล้ว และหากเป็นคนที่ไม่ยอมแพ้ก็คงจะค้นในใน google จนเจอและแก้ไขผ่านไปได้เรียบร้อยแล้ว
ผมเองก็เช่นกัน ความรู้มันมีอยู่ในเน็ต แค่ค้นหาเราก็เจอ วันนี้จึงขอเอามาลงไว้เผื่อจะได้ใช้หรือเปิดดูได้ง่าย ๆ
และถือโอกาสแบ่งปันไว้ได้สำหรับผู้ที่กำลังหาวิธีอยู่
เท่าที่ลองค้นหาดู ก็มีหลายแบบหลายสไตล์ แล้วแต่เทคนิคของใครของมัน
มาลองดูกันเลยดีกว่าครับ
อันนี้เพ่ิ่มเติมนะครับมาใหม่ใช้ฟังก์ชั่น isNaN สั้น ๆ ง่าย ๆ ไม่ยุ่งยากอีกต่อไป (ลอดูครับ)















                            Read More
                          















22:39













ขั้นตอนและวิธีการติดตั้ง Internet Information Services(IIS) บน Windows 7








Unknown













สำหรับใครที่เป็นนักพัฒนาหรือโปรแกรมเมอร์ .NET โดยเฉพาะเว็บ Application สิ่งที่ขาดไม่ได้บนวินโดวส์ 7 ก็คือ IIS(Internet Information Services) ซึ่งเป็นบริการหนึ่งของวินโดวส์ ที่ช่วยจำลองเครื่องของคุณให้เป็นเซิร์ฟเวอร์ เพื่อให้สามารถให้คุณสามารถทดสอบ ทดลองรัน Application ที่คุณเขียนหรือพัฒนาขึ้นมา ก่อนที่จะนำไป deploy ใช้งานบนเซิร์ฟเวอร์จริง ใครหาวิธีหรือติดตั้ง IIS บนวินโดวส์ 7 ไม่ได้ บทความนี้มีคำตอบครับ

วิธีการติดตั้ง Internet Information Services(IIS) บน Windows 7 สามารถทำได้ตามขั้นตอน ต่อไปนี้ครับ

1. ให้ไปที่ Start > Control Panel จากนั้นคลิกที่เมนู Programs ตัวอย่างดังรูป









2. เมื่อคลิกที่เมนู Programs แล้ว จะมีหน้าจอ Programs ปรากฏขึ้นมา ให้คลิกที่เมนู Turn Windows features on or off ตัวอย่างดังรูป









3. จากนั้นให้รอสักครู่ จะมีหน้าจอWindows Features ปรากฏขึ้นมา แล้วให้ติ๊กเครื่องหมายถูกหน้าข้อความ Internet Information Services ตัวอย่างดังรูป









4. จากนั้นให้คลิกปุ่ม OK วินโดวส์ 7 ก็จะทำการติดตั้ง Internet Information Services(IIS) ลงเครื่องให้ (ถ้าวินโดวส์ถามหาแผ่น ก็ให้ใส่แผ่น windows 7 เข้าไปใน cd-rom/dvd-rom) ซึ่งอาจจะใช้เวลานาน หลายนาทีพอสมควร ตัวอย่างดังรูป









5. และเมื่อวินโดวส์ 7 ทำการติดตั้ง IIS ลงเครื่องให้เรียบร้อยแล้ว หน้าจอWindows Features จะปิดไป ซึ่งสามารถเช็คการติดตั้งIIS ลง windows 7 ว่าเสร็จ สมบูรณ์หรือไม่ เปิด Internet Explorer(IE)  ขึ้นมา แล้วพิมพ์ Url ต่อไปนี้ http://localhost ลงไปในช่อง address แล้ว Enter









ถ้าไม่มีอะไรผิดพลาด ก็สามารถใช้งาน IIS ได้แล้วหล่ะครับ

ลองนำขั้นตอนวิธีการติดตั้ง Internet Information Services(IIS) บน Windows 7 ไปใช้กันดูนะครับ





เคดิต : http://webmonster.sapaan.net/windows-7-tips-tricks/%E0%B8%95%E0%B8%B4%E0%B8%94%E0%B8%95%E0%B8%B1%E0%B9%89%E0%B8%87-internet-information-services-iis-on-windows-7.html














                            Read More
                          















05:45






                              ,
                            











การจัดระยะห่างระหว่างขอบของวัตถุ และเนื้อหา CSS








Unknown













padding จัดระยะห่างระหว่างขอบของวัตถุ และเนื้อหา เช่น ระยะห่างระหว่างเส้นตาราง และเนื้อหาในตาราง 



    หลายคนคงสงสัยว่าแล้วมันต่างจาก margin ยังไง ก็ดูที่รูปด้านล่าง จะแสดงให้เห็นว่า margin และ padding ต่างกันยังไง 















ลองพิมพ์ดูง่ายนิดเดียว คลิกที่หัวข้อเพื่อทดลองพิมพ์



    1.ตัวอย่างการใช้งาน padding

    ในตัวอย่างแสดงการใช้งาน padding ซึ่งจะใช้คำสั่ง padding เพื่อบอกระยะห่างระหว่างตารางและเนื้อหา เช่นเดียวกับการกำหนดระยะใน margin สามารถใช้หน่วย cm , px หรือบอกเป็น % ก็ได้



    2.กำหนดระยะห่างด้านบน

    ในตัวอย่างเป็นการกำหนดระยะห่างด้านบนของวัตถุ



    3.กำหนดระยะห่างด้านขวา

    ในตัวอย่างเป็นการกำหนดระยะห่างด้านขวาของวัตถุ 



    4.กำหนดระยะห่างด้านล่าง

    ในตัวอย่างเป็นการกำหนดระยะห่างด้านล่างของวัตถุ 



    5.กำหนดระยะห่างด้านซ้าย

    ในตัวอย่างเป็นการกำหนดระยะห่างด้านซ้ายของวัตถุ



เคดิต : http://www.hellomyweb.com/index.php/main/content/31










                            Read More
                          















03:01






                              ,
                            


                              ,
                            


                              ,
                            











วิธีสร้างหน้า Error 402, 403, 404 และ 500 เป็นของเราเองด้วยไฟล์ httpd.conf








Unknown



















วิธีสร้างหน้า Error 402, 403, 404 และ 500 เป็นของเราเองด้วยไฟล์ /httpd.conf (Server CentOS 6.4)

1. สร้างไฟล์ Error404 ขึ้นมา แล้ว Save เป็นชื่ออะไรก็ได้ เช่น error404.html หรือ 404.php ก็ได้


    

  • error402.php
    • 

  • error403.php
    • 

  • error404.php
    • 

  • error500.php
    • 


แล้วโยนไปไว้บน WebServer ตัวอย่างที่ /var/www/html











                            Read More
                          















22:26






                              ,
                            


                              ,
                            


                              ,
                            


                              ,
                            


                              ,
                            


                              ,
                            








                    

                  















สมัครสมาชิก:

บทความ
                      (
                      Atom
                      )
                    















































Subscribe