หน้าหลัก โค้ด-บทความ php โค้ด-บทความ javascript โค้ด-บทความ css สารบัญ สารบัญ

ทักทายครับ

สวัสดีครับ หลังจากที่ blog นี้หยุดการอัพเดททบความเกี่ยวกับโค้ดในการใช้ทำเวปไปนานไม่ว่าจะเป็น code php, html, javascript, css, ajax เนื่องจากผมไม่ค่อยมีเวลาจนลืม blog นี้ไปเลย นึกขึ้นได้ตอนปีใหม่ ไปค้นหาใน google แล้วตกใจ เนื่องจาก blog นี้ไปอยู่ลำดับที่ 1 ของการค้นหา ไม่เชื่อลองดู เลยขอถือโอกาสเริ่มต้นใหม่ในช่วงปีใหม่นี้เริ่มอัพเดทบทความตั้งแต่ตอนนี้เป็นต้นไป หวังเป็นอย่างยิ่งว่าจะมีผู้ติดตามบทความของผมต่อไปน่ะครับ ปล.ท่านใดสนใจลงโฆษณาสามารถติดต่อได้ที่ hotcodephp@gmail.com

26 มี.ค. 2555

การเปิดหน้าเวปใหม่ภายใน frame

โค้ดตามนี้เลย

<form name="jumpy">
<select name="example" size="1" onChange="gone()">
<!-- CHANGE THE BELOW URLS TO YOUR OWN-->
<option value="http://www.yahoo.com" selected>Yahoo.com</option>
<option value="http://www.google.com">Google</option>
<option value="http://www.lycos.com">Lycos</option>
<option value="http://www.AltaVista.com">AltaVista</option>
</select>

<input type="button" name="test" value="Go!" onClick="gone()">
</form>

<script language="javascript">
<!--

//Drop-down Document Viewer- © Dynamic Drive (www.dynamicdrive.com)
//For full source code, 100's more DHTML scripts, and TOS,
//visit http://www.dynamicdrive.com

//Specify display mode (0 or 1)
//0 causes document to be displayed in an inline frame, while 1 in a new browser window
var displaymode=1
//if displaymode=0, configure inline frame attributes (ie: dimensions, intial document shown
var iframecode='<iframe id="external" style="width:95%;height:400px" src="http://www.yahoo.com"></iframe>'

/////NO NEED TO EDIT BELOW HERE////////////

if (displaymode==0)
document.write(iframecode)

function gone(){
var selectedurl=document.jumpy.example.options[document.jumpy.example.selectedIndex].value
if (document.getElementById&&displaymode==0)
document.getElementById("external").src=selectedurl
else if (document.all&&displaymode==0)
document.all.external.src=selectedurl
else{
if (!window.win2||win2.closed)
win2=window.open(selectedurl)
//else if win2 already exists
else{
win2.location=selectedurl
win2.focus()
}
}
}
//-->
</script>
Read more >>
เขียนโดย Unknown ที่ 08:49 0 ความคิดเห็น

การแสดงคำอธิบายในฟอร์ม


Username: [?]
Password:   [?]

จากตัวอย่างด้านบนหากเราเอาเมาส์ไปชี้ที่เครื่องหมาย ? ก็จะมีคำอธิบายขึ้นมา
โค้ด
เอาไปวางในส่วนของ head
<style type="text/css">

#hintbox{ /*CSS for pop up hint box */
position:absolute;
top: 0;
background-color: lightyellow;
width: 150px; /*Default width of hint.*/ 
padding: 3px;
border:1px solid black;
font:normal 11px Verdana;
line-height:18px;
z-index:100;
border-right: 3px solid black;
border-bottom: 3px solid black;
visibility: hidden;
}

.hintanchor{ /*CSS for link that shows hint onmouseover*/
font-weight: bold;
color: navy;
margin: 3px 8px;
}

</style>

<script type="text/javascript">

/***********************************************
* Show Hint script- © Dynamic Drive (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for this script and 100s more.
***********************************************/
var horizontal_offset="9px" //horizontal offset of hint box from anchor link

/////No further editting needed

var vertical_offset="0" //horizontal offset of hint box from anchor link. No need to change.
var ie=document.all
var ns6=document.getElementById&&!document.all

function getposOffset(what, offsettype){
var totaloffset=(offsettype=="left")? what.offsetLeft : what.offsetTop;
var parentEl=what.offsetParent;
while (parentEl!=null){
totaloffset=(offsettype=="left")? totaloffset+parentEl.offsetLeft : totaloffset+parentEl.offsetTop;
parentEl=parentEl.offsetParent;
}
return totaloffset;
}

function iecompattest(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}

function clearbrowseredge(obj, whichedge){
var edgeoffset=(whichedge=="rightedge")? parseInt(horizontal_offset)*-1 : parseInt(vertical_offset)*-1
if (whichedge=="rightedge"){
var windowedge=ie && !window.opera? iecompattest().scrollLeft+iecompattest().clientWidth-30 : window.pageXOffset+window.innerWidth-40
dropmenuobj.contentmeasure=dropmenuobj.offsetWidth
if (windowedge-dropmenuobj.x < dropmenuobj.contentmeasure)
edgeoffset=dropmenuobj.contentmeasure+obj.offsetWidth+parseInt(horizontal_offset)
}
else{
var windowedge=ie && !window.opera? iecompattest().scrollTop+iecompattest().clientHeight-15 : window.pageYOffset+window.innerHeight-18
dropmenuobj.contentmeasure=dropmenuobj.offsetHeight
if (windowedge-dropmenuobj.y < dropmenuobj.contentmeasure)
edgeoffset=dropmenuobj.contentmeasure-obj.offsetHeight
}
return edgeoffset
}

function showhint(menucontents, obj, e, tipwidth){
if ((ie||ns6) && document.getElementById("hintbox")){
dropmenuobj=document.getElementById("hintbox")
dropmenuobj.innerHTML=menucontents
dropmenuobj.style.left=dropmenuobj.style.top=-500
if (tipwidth!=""){
dropmenuobj.widthobj=dropmenuobj.style
dropmenuobj.widthobj.width=tipwidth
}
dropmenuobj.x=getposOffset(obj, "left")
dropmenuobj.y=getposOffset(obj, "top")
dropmenuobj.style.left=dropmenuobj.x-clearbrowseredge(obj, "rightedge")+obj.offsetWidth+"px"
dropmenuobj.style.top=dropmenuobj.y-clearbrowseredge(obj, "bottomedge")+"px"
dropmenuobj.style.visibility="visible"
obj.onmouseout=hidetip
}
}

function hidetip(e){
dropmenuobj.style.visibility="hidden"
dropmenuobj.style.left="-500px"
}

function createhintbox(){
var divblock=document.createElement("div")
divblock.setAttribute("id", "hintbox")
document.body.appendChild(divblock)
}

if (window.addEventListener)
window.addEventListener("load", createhintbox, false)
else if (window.attachEvent)
window.attachEvent("onload", createhintbox)
else if (document.getElementById)
window.onload=createhintbox

</script>
ส่วนอันนี้เป็นส่วนของ form
<form>
<b>Username:</b> <input type="text" class="test" /> <a href="#" class="hintanchor" onMouseover="showhint('Please choose a username. Should consist of alphanumeric characters only.', this, event, '150px')">[?]</a><br />
<b>Password:</b>  <input type="text" class="test" /> <a href="#" class="hintanchor" onMouseover="showhint('Enter the desired password. <b>Must</b> be 8 characters or longer.', this, event, '200px')">[?]</a><br />
</form>
Read more >>
เขียนโดย Unknown ที่ 08:40 0 ความคิดเห็น

19 มี.ค. 2555

เร่งความเร็วให้กับโค้ด php

การเร่งความเร็วโค้ด PHP (PHP Bench Mark) เป็นปัจจัยหนึ่งที่จะทำให้เว็บของเราเร็วขึ้นได้ ในงานอย่างใดอย่างหนึ่งของ PHP อาจมีหลายฟังก์ชั่นให้เลือกใช้งาน ซึ่งฟังก์ชั่นที่แตกต่างกันของ PHP ย่อมมีขีดความสามารถแตกต่างกัน ดังนั้นการเลือกฟังก์ชั่นที่ดี ตลอดจนการใช้งานฟังก์ชั่นต่างๆอย่างถูกต้องย่อมทำให้เว็บของเราเร็วขึ้นได้

  • for และ while 2 คำสั่งนี้ใช้สำหรับการวนลูป ซึ่ง while จะเร็วกว่า for ครับ
  • echo และ print ใช้ echo แทน print ได้เลยครับ เพราะมันทำงานอย่างเดียวกัน แต่ echo เร็วกว่า เห็นๆ
  • empty และ isset ทั้ง 2 ฟังก์ชั่นนี้ใช้ทดสอบตัวแปรเช่นกัน แต่ทำกลับกัน ซึ่ง empty จะเร็วกว่า isset ครับ แต่ !isset ไม่ได้เร็วกว่า empty นะครับ
  • while(list($key) = each($aHash)) เร็วกว่า foreach($aHash as $key)
  • if เร็วกว่า case เนื่องจาก if เป็นรูปแบบพื้นฐานที่สุดนั่นเอง
  • ' (single quote) และ " (double quote) อันแรกจะเร็วกว่าเล็กน้อย เนื่องจากมันไม่ต้องตรวจหาตัวแปรภายในข้อความ
  • count และ sizeof ใช้สำหรับนับจำนวนแอเรย์ ซึ่ง sizeof จะเร็วกว่า count เล็กน้อย ครับ
  • เราไม่ควรใช้ count ภายใน loop for ครับ เนื่องจากจะทำให้ PHP คำนวณขนาดของตัวแปรทุกครั้ง ซึ่งจะนานกว่าการอ่านจำนวนของตัวแปร เตรียมไว้ก่อนส่งเข้า for
<?php
   // fast
   $size = count($x);
   for ($i = 0 ; $i < $size; $i++) {
   }

   // slow
   for ($i = 0; $i < count($x); $i++) {
   }
?>
  • require และ include  require จะเร็วกว่าเล็กน้อยครับ
  • include_once และ include (ระหว่างที่มี once กับไม่มี) ที่มี once จะเร็วกว่าครับ
  • การทดสอบไฟล์ว่ามีอยู่หรือไม่ก่อนการ include เร็วกว่าการใช้ @ ปิดการแจ้งข้อผิดพลาดเพื่อไม่พบไฟล์ (และหากพบไฟล์ก็ยังเร็วกว่าอยู่ดี)
<?php
   // fast
   if(is_file('inc.php')) {
      include('inc.php');
   }

   // slow
    @include('inc.php');
?>
Read more >>
เขียนโดย Unknown ที่ 14:29 0 ความคิดเห็น

การปรับแต่งไฟล์ php.ini



การปรับแต่ง php.ini
1. การปรับแต่ง short_open_tag เพื่อให้การประกาศ Tag php แบบสั้นได้ เช่น
      แบบสั้น <?.........?>
     แบบยาว <?php........?>
    ให้แก้ไฟล์ php.ini ส่วนของ short_open_tag จาก Off เป็น On
     short_open_tag = On
2. การปรับแต่ง register_globals เพื่อให้การส่งค่าแบบ GET POST โดยไม่ต้องประกาศ
     ให้แก้ไฟล์ php.ini ส่วนของ register_globals = Off จาก On เป็น Off
     register_globals = Off
3. max_execution_time = 60 เป็นกำหนดเวลาในการ execute ของ script ถ้าเครื่องช้า เพิ่มเวลาให้ได้
4. Cross Site Script คือการ On ไว้ จะทำให้ผู้ไม่ประสงค์ดี สามารถ Upload ไฟล์ที่มีปัญหาขึ้นมา แล้วสั่งให้ Execute ตัวเอง ก่อนจะทำการ DoS ไปยัง Server อื่นๆ ได้
5. magic_quotes_gpc = On – เป็นค่าที่ตั้งเป็น On ไว้เสมอ เพื่อป้องกันการแทรกโค้ดเข้ามาจากหน้าเวบ
6. default_charset = “tis-620″ – แก้ไขให้เป็นภาษาไทยได้ทันทีครับ
7. file_uploads = On – ตั้งค่าเป็น On เพื่อให้สามารถทำการ Upload ผ่าน PHP Scripts ได้
    upload_tmp_dir = – หากต้องการตั้งค่า temporary Directory ให้การ Upload ก็ระบุ path ได้ที่นี่
    upload_max_filesize = 5M – ถ้ามี Ram สูง สามารถเพิ่มขนาดไฟล์ Upload ได้ ค่า Default จะเป็น 2M ทั้งนี้ขึ้นอยู่กับ Ram ที่ระบบมีอยู่ด้วย
Read more >>
เขียนโดย Unknown ที่ 09:44 0 ความคิดเห็น

17 มี.ค. 2555

เอา scrollbar ออกจาก textarea ด้วย CSS


<html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=windows-874" />
 <title>css textarea scrollbar </title>
 </head>
 <style type="text/css">
.no_scroll{
overflow:hidden;
}
 </style>
 <body>
 <form id="form1" name="form1" method="post" action="">
   <p>ยังไม่กำหนด CSS  </p>
   <p>
     <textarea name="textarea" cols="40" rows="5"> </textarea>
   </p>
   <p>กำหนด CSS  </p>
   <p>
     <textarea name="textarea" class="no_scroll" cols="40" rows="5"> </textarea>
       </p>
 </form>
 </body>
 </html>
Read more >>
เขียนโดย Unknown ที่ 10:02 0 ความคิดเห็น

16 มี.ค. 2555

ซ่อน link ที่แสดงตรง status bar

เทคนิคนี้ใช้กันมากในหลายๆเว็บคือไม่อยากให้เวลานำ mouse ไปวางไว้ที Link แล้วมีการดู URL ตรง Status Bar Script ด้านล่างคือการซ่อนไม่ให้แสดงออกมา ก็ถือว่าดีทีเดียว

นำ Code ส่วนนี้ไปไว้ระหว่าง TAG HEAD
<script>
function hidestatus(){
window.status=''
return true
}

if (document.layers)
document.captureEvents(Event.MOUSEOVER | Event.MOUSEOUT)

document.onmouseover=hidestatus
document.onmouseout=hidestatus
</script>
Read more >>
เขียนโดย Unknown ที่ 09:30 0 ความคิดเห็น

15 มี.ค. 2555

การใส่ comma ในช่อง textbox ที่เป็นตัวเลข


<script type="text/javaScript">
//เติม , (คอมมา)
function dokeyup( obj )
{
  var key = event.keyCode;
  if( key != 37 & key != 39 & key != 110 )
  {
    var value = obj.value;
    var svals = value.split( "." ); //แยกทศนิยมออก
    var sval = svals[0]; //ตัวเลขจำนวนเต็ม
 
    var n = 0;
    var result = "";
    var c = "";
    for ( a = sval.length - 1; a >= 0 ; a-- )
    {
      c = sval.charAt(a);
      if ( c != ',' )
      {
        n++;
        if ( n == 4 )
        {
          result = "," + result;
          n = 1;
        };
        result = c + result;
      };
    };
 
    if ( svals[1] )
    {
      result = result + '.' + svals[1];
    };
 
    obj.value = result;
  };
};

//ให้ text รับค่าเป็นตัวเลขอย่างเดียว
function checknumber()
{
  key = event.keyCode;
  if ( key != 46 & ( key < 48 || key > 57 ) )
  {
    event.returnValue = false;
  };
};
</script>
<input name="text1" type="text" value='1200' onkeyup="dokeyup(this);" onchange="dokeyup(this);" onkeypress="checknumber()" size="30" maxlength="30">
Read more >>
เขียนโดย Unknown ที่ 16:15 0 ความคิดเห็น

ทำให้ textbox รับค่าได้เฉพาะตัวเลข


<input type="text" name="number" onkeypress="checknumber()">

<script language="JavaScript">
function checknumber() {
  key=event.keyCode
  if (key<48 || key>57) {
    event.returnValue = false;
    alert("กรุณากรอกค่า number เป็นตัวเลขเท่านั้น !!");
    number.focus();
}
</script>
Read more >>
เขียนโดย Unknown ที่ 16:01 0 ความคิดเห็น

การใส่ icon ใน address bar

การใส่ ไอคอนลงใน Address Bar ของ Browser ให้ใส่โค้ดในส่วน HEAD ดังนี้

<HEAD>
  <LINK REL="SHORTCUT ICON" HREF="http://www.mydomain.com/myicon.ico" />
  <TITLE>My Title</TITLE>
</HEAD>

ถ้าวางไอคอนบน root ของระบบให้ใช้ HREF="favicon.ico" และเปลี่ยนไอคอนเป็นชื่อ favicon.ico ด้วย แต่ถ้าวางไว้ที่โฟลเดอร์อื่นหรือใช้ชื่ออื่น ให้อ้าง HREF รวม path ด้วยเช่น HREF="http://www.mydomain.com/myicon.ico"

ให้ใช้ ไอคอนขนาด 16*16 พิกเซลเท่านั้น สามารถสร้างได้จากโปรแกรมสร้าง icon ทั่วไปครับ

โค้ดจาก http://msdn.microsoft.com/library/default.asp?url=/workshop/Author/dhtml/howto/ShortcutIcon.asp
Read more >>
เขียนโดย Unknown ที่ 15:55 0 ความคิดเห็น

14 มี.ค. 2555

การทำ input ให้อ่านได้อย่างเดียว

ทำช่อง input ให้อ่านได้อย่างเดียว
<input name="name" type="text" size="20" maxlength="25" value='อ่านอย่างเดียว' readonly="true">
Read more >>
เขียนโดย Unknown ที่ 16:31 0 ความคิดเห็น

12 มี.ค. 2555

ตรวจสอบเลขบัตรประจำตัวประชาชน


โค้ดตามนี้เลยครับ
<script language="javascript">

function checkID(id) {

if(id.length != 13) return false;

for(i=0, sum=0; i < 12; i++)

sum += parseFloat(id.charAt(i))*(13-i);

if((11-sum%11)%10!=parseFloat(id.charAt(12))) return false;

return true;

}

function checkForm() {

if(!checkID(document.form1.txtID.value))

alert('เลขประชาชนไม่ถูกต้อง');

}

</script>
Read more >>
เขียนโดย Unknown ที่ 13:56 0 ความคิดเห็น

การดึงข้อมูล แบบ real time

เป็นการดึงข้อมูลแบบ real time ซึ่งจะเป็นการกำหนดเวลาให้หน้าเวปมีการเปลี่ยนแปลงตามเวลาที่เรากำหนดโดยใช้ jquery ช่วย
โค้ด
ใช้โค้ดนี้เมื่อต้องการแสดงผล
<div id="showData"></div>
โค้ด ajax เพื่อเรียกใช้งาน

<script type="text/javascript" src="js/jquery-1.4.1.min.js"></script>
<script type="text/javascript">
$(function(){
setInterval(function(){ // เขียนฟังก์ชัน javascript ให้ทำงานทุก ๆ 30 วินาที
// 1 วินาที่ เท่า 1000
// คำสั่งที่ต้องการให้ทำงาน ทุก ๆ 3 วินาที
var getData=$.ajax({ // ใช้ ajax ด้วย jQuery ดึงข้อมูลจากฐานข้อมูล
url:"gdata.php",
data:"rev=1",
async:false,
success:function(getData){
$("div#showData").html(getData); // ส่วนที่ 3 นำข้อมูลมาแสดง
}
}).responseText;
},3000);
});
</script>
ส่วนอันนี้คือไฟล์ที่ต้องการแสดงผล

<?php  
header("Content-type:text/html; charset=UTF-8");      
header("Cache-Control: no-store, no-cache, must-revalidate");      
header("Cache-Control: post-check=0, pre-check=0", false);      
if($_GET['rev']==1){
echo date("Y-m-d H:i:s");
exit;
}
?>

Read more >>
เขียนโดย Unknown ที่ 10:42 3 ความคิดเห็น

การสร้างเมนูหลายภาษา

เป็นตัวอย่างง่ายๆ ในการสร้างเวป 2 ภาษาน่ะครับ
index.php ไฟล์หลักสำหรับทดสอบการแสดง

<?php
// ส่วนกำหนดสำหรับการเรียกใช้เมนูภาษา ตามที่ผู้ใช้เลือก กรณีเริ่มต้น จะเป็นภาษาอังกฤษ
$pathLang=(!isset($_COOKIE['ck_lang']) || $_COOKIE['ck_lang']=="")?"en":$_COOKIE['ck_lang'];
include($pathLang."/index.php");
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
</head>

<body>


<div style="margin:auto;width:600px;">
<br />
<a href="javascript:setLang('th');">Thai</a>
<a href="javascript:setLang('en');">Eng</a>
<br />
<br />
<br />
<a href="#"><?=_Home?></a> |
<a href="#"><?=_About_Us?></a> |
<a href="#"><?=_Contact_Us?></a>

 </div>




<script type="text/javascript">
function setLang(langID){ //ฟังก์ชัน javascript สำหรับกำหนด ตัวแปร cookie ภาษา
var days=365; // กำหนดจำนวนวันที่ต้องการให้จำค่า
var date = new Date();
date.setTime(date.getTime()+(days*24*60*60*1000));
var expires = "; expires="+date.toGMTString();
document.cookie = "ck_lang=" +langID+ "; expires=" + expires + "; path=/";
window.location.reload()
}
</script>

</body>
</html>

อันนี้หน้าเวปภาษาอังกฤษ

<?php
define("_Home","Home");
define("_About_Us","About Us");
define("_Contact_Us","Contact Us");
?>

อันนี้หน้าเวปภาษาไทย

<?php
define("_Home","หน้าแรก");
define("_About_Us","เกี่ยวกับเรา");
define("_Contact_Us","ติดต่อเรา");
?>




Read more >>
เขียนโดย Unknown ที่ 10:10 0 ความคิดเห็น

9 มี.ค. 2555

การแสดงข้อมูลให้เห็นในหน้าจอ แต่ไม่เห็นตอนสั่งพิมพ์

หากเราต้องการแสดงข้อมูลให้เห็นเฉพาะในหน้าจออย่างเดียว แต่เวลาสั่งพิมพ์งานไม่ต้องการให้พิมพ์ออกมา สามารถแก้ปัญหาได้โดย
โค้ด

<STYLE type=text/css>

#printable { display: block; }

@media print
{
     #non-printable { display: none; }
     #printable { display: block; }
}

</STYLE>


<DIV id=non-printable>
     <CENTER><FONT color=red><B>สิ่งที่จะให้แสดงออกมาทางหน้าจอ แต่ว่าไม่เห็นเวลา Print หน้านี้ออกมา</B></FONT></CENTER>
</DIV>
<BR>
<DIV id=printable>
     <CENTER><FONT color=blue><B>สิ่งที่จะให้แสดงออกมาทางหน้าจอ และจะเห็นเวลา Print หน้านี้ออกมาด้วย</B></FONT></CENTER>
</DIV>

Read more >>
เขียนโดย Unknown ที่ 10:50 0 ความคิดเห็น

ซ่อนหรือแสดงข้อมูลในตาราง

เป็นโค้ดที่ใช้ซ่อนหรือแสดงข้อมูลในตาราง โดยคลิกเลือกที่ checkbox
โค้ด

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-874" />
<title>Untitled Document</title>
</head>

<body>

<table width="100%" border="1" cellpadding="1" cellspacing="1">
<tr>
<td width="14%" valign="top"><input name="cb1" type="checkbox" id="cb1" onClick="if(this.checked){document.all.tb1.style.display='none';}else{document.all.tb1.style.display='';}" value="1"></td>
<td width="86%">
<table width="100%" border="1" cellpadding="1" cellspacing="1" id="tb1" style="display='none';">
<tr>
<td>XXXX</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>XXXX</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>XXXX</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table>
  </td>
</tr>
<tr>
<td valign="top"><input name="cb2" type="checkbox" id="cb2" value="2" onClick="if(this.checked){document.all.tb2.style.display='none';}else{document.all.tb2.style.display='';}"></td>
<td><table width="100%" border="1" cellpadding="1" cellspacing="1" id="tb2" style="display='none';">
<tr>
<td width="19%">XXXX</td>
<td width="81%"><input type="text" name="textfield4"></td>
</tr>
<tr>
<td>XXXX</td>
<td><input type="text" name="textfield5"></td>
</tr>
<tr>
<td>XXXX</td>
<td><input type="text" name="textfield6"></td>
</tr>
</table>
&nbsp; </td>
</tr>
</table>
</form>

</body>
</html>

Read more >>
เขียนโดย Unknown ที่ 10:03 0 ความคิดเห็น

การแสดงและซ่อนข้อความ

สามารถเลือกที่จะแสดง หรือซ่อนข้อความได้โดยการคลิกเลือกที่ checkbox
โค้ด

<html>

<body>
<form action="page.cgi" method="post" name="form1" onSubmit="JavaScript:return fncSubmit();">
<input name="txt1" type="text" id="txt1" value="Value">
<input name="rdo1" type="radio" value="Y" checked onClick="javaScript:if(this.checked){document.all.txt1.style.display='';}">
Show
<input name="rdo1" type="radio" value="N" onClick="javaScript:if(this.checked){document.all.txt1.style.display='none';}">
Hide
<br>
<br>
<input name="chk1" type="checkbox" id="chk1" value="Y" checked>
Checkbox
<input name="rdo2" type="radio" value="Y" checked onClick="javaScript:if(this.checked){document.all.chk1.style.display='';}">
Show
<input name="rdo2" type="radio" value="N" onClick="javaScript:if(this.checked){document.all.chk1.style.display='none';}">
Hide<br>
<br>
<table width="196"  border="1" id="tbName">
  <tr>
    <td>&nbsp;</td>
    </tr>
</table>
<input name="rdo3" type="radio" value="Y" checked onClick="javaScript:if(this.checked){document.all.tbName.style.display='';}">
Show
<input name="rdo3" type="radio" value="N" onClick="javaScript:if(this.checked){document.all.tbName.style.display='none';}">
Hide<br>
<br>
<span id="spName">Text</span>
<input name="rdo4" type="radio" value="Y" checked onClick="javaScript:if(this.checked){document.all.spName.style.display='';}">
Show
<input name="rdo4" type="radio" value="N" onClick="javaScript:if(this.checked){document.all.spName.style.display='none';}">
Hide<br>
<br>
<input name="btnSubmit" type="submit" value="Submit" onClick="JavaScript:this.disabled=true;">
</form>
</body>
</html>
Read more >>
เขียนโดย Unknown ที่ 10:00 0 ความคิดเห็น

การตรึงแนวหัว และคอลัมภ์ของตาราง

จากที่ผมได้เคยเขียนถึงการตรึงแนวห้วตาราง ดูบทความ ซึ่งเป็นโค้ดสำหรับตรึงแนวห้วตารางอย่างเดียวก็เกิดปัญหาอีกว่าถ้าเราจะเลื่อนหน้าจอไปดูข้อมูลด้านขวาอีก เมื่อเราเลื่อนเราก็จะไม่เห็นข้อมูลด้านซ้ายมือ ผมก็เลยค้นหาโค้ดเพิ่มเติมอีกไม่ว่าจะเป็นภาษา html หรือ ภาษา php ก็เลยได้โค้ดด้านล่างนี้  ซึ่งเป็นโค้ดสำหรับการตรึงแนวห้วตาราง และคอลัมภ์พร้อม ๆ กันทำให้การดูข้อมูลในตารางดูได้ง่ายขึ้นลองทำดูนะครับ
โค้ด
Read more >>
เขียนโดย Unknown ที่ 09:00 1 ความคิดเห็น

ตรวจสอบค่าที่กรอกใน textbox

เป็นตัวอย่างในการตรวจสอบค่าที่กรอกใน textbox ว่าตรงกับที่เรากำหนดหรือไม่ ลองนำไปประยุกต์ใช้กันนะ
โค้ด

<script type="text/javascript">
function checkform()
{
submitResult = false;

eUsername = document.getElementById('txtUsername');
ePassword = document.getElementById('txtPassword');
eConfirm = document.getElementById('txtConfirm');
select7 = document.getElementById('select7');
textfield = document.getElementById('textfield');
eEmail = document.getElementById('txtEmail');
date = document.getElementById('date');
desline = document.getElementById('desline');
// toline = document.getElementById('toline');
// select2 = document.getElementById('select2');
// select3 = document.getElementById('select3');
select4 = document.getElementById('select4');
select6 = document.getElementById('select6');
ePhone = document.getElementById('txtPhone');
textfield2 = document.getElementById('textfield2');

if((eUsername.value != '') && (ePassword.value != ''))
{
submitResult = true;

if(submitResult && (eUsername.value.length < 6))
{
submitResult = false;
alert('กรุณากรอก Username อย่างน้อย 6 หลัก');
}
if(submitResult && !eUsername.value.match(/^[\wก-ฮะ-์]+$/))
{
submitResult = false;
alert('กรุณากรอก Username ด้วยตัวเลขหรือตัวอักษรเท่านั้น\nไม่มีการเว้นวรรค และใช้เครื่องหมายใดๆ');
}
if(submitResult && !ePassword.value.match(/^[\wก-ฮะ-์]+$/))
{
submitResult = false;
alert('กรุณากรอก Password ด้วยตัวเลขหรือตัวอักษรเท่านั้น\nไม่มีการเว้นวรรค และใช้เครื่องหมายใดๆ');
}
if(submitResult && (ePassword.value != eConfirm.value))
{
submitResult = false;
alert('กรุณายืนยัน Password ให้ถูกต้องตรงกัน');
}

if(submitResult && (select7.value == ""))
{
submitResult = false;
alert('กรุณาระบุรุ่นรถยนต์ที่ต้องการทดลองขับ');
}
if(submitResult && (textfield.value == ""))
{
submitResult = false;
alert('กรุณาระบุชื่อ และนามสกุล');
}
if(submitResult && (textfield2.value == ""))
{
submitResult = false;
alert('กรุณาระบุเบอร์โทรศัพท์');
}
if(submitResult && (date.value == "" ))
{
submitResult = false;
alert('กรุณาระบุวันที่');
}
if(submitResult && (date.value == desline.value))
{
submitResult = false;
alert('กรุณาเลือกจองล่วงหน้า1วัน หรือมากว่านั้น แต่ไม่เกิน 2 เดือน');
}
//if(submitResult && (date.value < toline.value))
// {
// submitResult = false;
// alert('ระยะการจองต้องไม่เกิน 2 เดือน');
// }

// if(submitResult && (select2.value == ""))
// {
// submitResult = false;
// alert('กรุณาระบุเดือน');
// }
// if(submitResult && (select3.value == ""))
// {
// submitResult = false;
// alert('กรุณาระบุปี');
//}
if(submitResult && (select4.value == ""))
{
submitResult = false;
alert('กรุณาระบุเวลาที่ต้องการทดลองขับ');
}
if(submitResult && (select6.value == ""))
{
submitResult = false;
alert('กรุณาระบุพื้นที่ต้องการทดลองขับ');
}
if(submitResult && (eEmail.value.length == 0) && (ePhone.value.length == 0) && (textfield2.value.length == 0))
{
submitResult = false;
alert('กรุณากรอก E-mail หรือ กรอกเบอร์โทรศัพท์ในกรณีที่ไม่มี E-mail ');
}
if(submitResult && (textfield2.value.length > 0) && (textfield2.value.length < 10))
{
submitResult = false;
alert('กรุณากรอกเบอร์โทรศัพท์มือถือให้ครบ 10 หลัก');
}
if(submitResult && (textfield2.value.substring(0,2) != "08"))
{
submitResult = false;
alert('เบอร์โทรศัพท์ของคุณรูปแบบไม่ถูกต้อง กรุณาขึ้นต้นด้วย "08" เช่น 081 หรือ 0812345678');
}
if(submitResult && (eEmail.value.length > 0) && !eEmail.value.match(/^[\w][\w\-\.]*\@[\w][\w\-]*(\.[\w][\w\-]*)+([\s,]+[\w][\w\-\.]*\@[\w][\w\-]*(\.[\w][\w\-]*)+)?$/))
{
submitResult = false;
alert('กรุณากรอก Email ให้ถูกต้อง');
}
if(submitResult && (eEmail.value.length > 0) && eEmail.value.match(/@example\.com/))
{
submitResult = false;
alert('e-mail ที่ท่านแจ้งไม่ถูกต้อง\nเนื่องจาก @example.com เป็น e-mail ตัวอย่าง ไม่มีอยู่จริง\nหากท่านไม่มี e-mail ไม่จำเป็นต้องกรอกข้อความในส่วนนี้');
}
if(submitResult && (eEmail.value.length > 0) && eEmail.value.match(/@example\.co.th/))
{
submitResult = false;
alert('e-mail ที่ท่านแจ้งไม่ถูกต้อง\nเนื่องจาก @example.co.th เป็น e-mail ตัวอย่าง\nหากท่านไม่มี e-mail ไม่จำเป็นต้องกรอกข้อความในส่วนนี้');
}
if(submitResult && (eEmail.value.length > 0) && eEmail.value.match(/^www/))
{
if(!confirm('โดยปรกติ E-mail จะไม่นำหน้าด้วย www\nยืนยัน E-mail "' + eEmail.value + '" หรือไม่?'))
submitResult = false;
}
}
else
{
alert('กรุณากรอก Username และ Password');
}

/*if(submitResult)
{
alert('ผ่านการตรวจสอบ');
submitResult = false;
}*/

return submitResult;
}

</script>
Read more >>
เขียนโดย Unknown ที่ 08:48 0 ความคิดเห็น
สมัครสมาชิก: บทความ (Atom)