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

ทักทายครับ

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

22 ส.ค. 2555

การสั่งให้ textfield จำค่าที่กรอกข้อมูลไว้ตลอด


เป็นการใช้โค้ด javascript เพื่อเรียกใช้งาน Cookie ในการจำค่าที่เรากรอกในช่อง textfield ลักษณะการทำงานของ code ก็คือเมื่อกรอกข้อมูลใน textfield แล้วกดปุ่ม submit ค่าที่เรากรอกก็จะถูกบันทึกไว้ และแสดงค่าใน textfield ตลอด ไม่ว่าเราจะ refresh กี่ครั้ง ข้อมูลก็จะยังอยู่ จนกว่าเราจะบันทึกข้อมูลใหม่ลงไปข้อมูลถึงจะเปลี่ยน โดย Cookie ตัวนี้ผมตั้งไว้ที่ 60 วันน่ะครับ ลองนำไปใช้ดู

ตัวอย่างโค้ด

<script type="text/javascript">

/***********************************************
* Remember Text INPUT field values- by JavaScriptKit.com
* This notice MUST stay intact for use
* Visit JavaScript Kit at http://www.javascriptkit.com/ for this script and more
***********************************************/

var remembervalues_days=60 //Remember text input values for how many days?
var dyncookiename=encodeURI(window.location.pathname) //Name of cookie. Changes depending on the page.

var recallinput=function(){
var cookienamevalue=rememberinput.getCookie(dyncookiename).split("##")
for (var i=0; i<cookienamevalue.length; i++){
var cookiename=cookienamevalue[i].split("#")[0]
var cookievalue=cookienamevalue[i].split("#")[1]
if (document.getElementById(cookiename)!=null && document.getElementById(cookiename).type=="text") //if this text field has a stored value
document.getElementById(cookiename).value=decodeURI(cookievalue)
}
}

var rememberinput=function(){
var rememberit=""
for (var i=0; i<arguments.length; i++){
if (document.getElementById(arguments[i]).type=="text" && document.getElementById(arguments[i]).value!="") //if this is a form text INPUT and not empty
rememberit+=arguments[i]+"#"+encodeURI(document.getElementById(arguments[i]).value)+"##"
}
rememberinput.setCookie(dyncookiename, rememberit, remembervalues_days)
}

rememberinput.getCookie=function(Name){ //get cookie value
var re=new RegExp(Name+"=[^;]+", "i"); //construct RE to search for target name/value pair
if (document.cookie.match(re)) //if cookie found
return document.cookie.match(re)[0].split("=")[1] //return its value
return ""
}

rememberinput.setCookie=function(name, value, days){ //set cookie value
var expireDate = new Date()
//set "expstring" to either future or past date, to set or delete cookie, respectively
var expstring=expireDate.setDate(expireDate.getDate()+parseInt(days))
document.cookie = name+"="+value+"; expires="+expireDate.toGMTString()+";";
}

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

</script>
<form onSubmit="rememberinput('yourname', 'youremail')">

Name:*<br /><input type="text" id="yourname" size="25" /><br />

Email Address:*<br /><input type="text" id="youremail" size="25" /><br />

Feedback:<br />
<textarea cols="25" rows="6"></textarea>

<br />
<input type="submit" value="Submit" />

</form>
Read more >>

ตัวอย่างฟอร์มการกรอกข้อมูลส่วนตัวโดยใช้ code php

จากบทความ ตัวอย่างฟอร์มการกรอกข้อมูลส่วนตัวโดยใช้ Javascript ผมได้เขียนถึงการกรอกข้อมูลในแบบฟอร์มโดยใช้โค้ด php + javascript มาบทความนี้เลยขอกล่าวถึงการใช้เฉพาะโค้ด php อย่างเดียวบ้าง ซึ่งมันก็ดูดีไปอีกแบบ ลักษณะการทำงานก็เหมือนเดิมคือเวลากรอกข้อมูลผิด หรือกรอกไม่ครบถ้วนก็จะมีข้อความเตือนขึ้นมา มาดูตัวอย่างกันครับ


ตัวอย่างโค้ด simple2.php

 <!DOCTYPE html PUBLIC
          "-//W3C//DTD XHTML 1.0 Transitional//EN"
          "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Sample 2</title>
<style>
body { padding: 10px 0px 0px 0px; }
td
{
  padding: 2px 5px;
  text-align: left;
}
h4 { margin: 0px; }
input.editfield, select.editfield, textarea.editfield { width: 18em; }
</style>
</head>
<body>
<center>
<form method="post" action="sample2.php">
<input type="hidden" name="form_validation_rules"      value="" />
<input type="hidden" name="form_validation_behaviours" value="
Details : count details_count 20 black red;
Year : next 4;
Month Day : next 2;
Month Day : prev;
" />
<table>
<?php
if (isset($_POST['submit']))
{
  include 'form-validation.php';
  $result = form_validation_validate($_POST, "
  Username Password Year Month Day Details : empty;
  Username Password : len >= 3;
  Username Password : chnum_;
  E-mail: email;
  Membership : select 0;
  Year : > 1900;
  Year Month Day : date;
  Sex : radio;
  Details: len <= 20;
  Categories[] Newsletters[] : cnt >= 2;
  Agree : terms;
  ");
  ?>
  <tr>
  <td colspan="2">
  <?php

  if ($result === true)
  {
    echo '<span style="color: green;">The form is successfully submitted!</span>';
    $_POST = Array();
  }
  else echo '<span style="color: red;">' . $result . '</span>';
  ?>
  </td>
  </tr>
  <?php
}
function __post($name, $val = '')
{
  return isset($_POST[$name]) ? $_POST[$name] : $val;
}
function __checked($name, $val)
{
  return isset($_POST[$name]) && ($_POST[$name] == $val)  ? 'checked="checked"' : '';
}
function __checked2($name, $ind)
{
  return isset($_POST[$name]) && in_array($ind, $_POST[$name]) ? 'checked="checked"' : '';
}
function __selected($name, $val)
{
  return isset($_POST[$name]) && ($_POST[$name] == $val) ? 'selected="selected"' : '';
}
function __selected2($name, $ind)
{
  return isset($_POST[$name]) && in_array($ind, $_POST[$name]) ? 'selected="selected"' : '';
}
?>
<tr>
  <td style="padding-bottom: 10px;" colspan="2"><h4>Sample 2</h4></td>
</tr>
<tr>
  <td>Username:</td>
  <td><input class="editfield" type="text" name="Username" value="<?=__post('Username');?>" /></td>
</tr>
<tr>
  <td>Password:</td>
  <td><input class="editfield" type="password" name="Password" value="<?=__post('Password');?>" /></td>
</tr>
<tr>
  <td>E-mail:</td>
  <td><input class="editfield" type="text" name="E-mail" value="<?=__post('E-mail');?>" /></td>
</tr>
<tr>
  <td>Membership:</td>
  <td>
  <select class="editfield" name="Membership">
    <option value="0" <?=__selected('Membership', 0);?>></option>
    <option value="1" <?=__selected('Membership', 1);?>>Silver</option>
    <option value="2" <?=__selected('Membership', 2);?>>Gold</option>
    <option value="3" <?=__selected('Membership', 3);?>>Platinum</option>
  </select>
  </td>
</tr>
<tr>
  <td>Age:</td>
  <td>
  <input type="text" name="Year"  value="<?=__post('Year'); ?>" size="4" maxlength="4" />
  <input type="text" name="Month" value="<?=__post('Month');?>" size="2" maxlength="2" />
  <input type="text" name="Day"   value="<?=__post('Day');  ?>" size="2" maxlength="2" />
  <small>yyyy/mm/dd</small>
  </td>
</tr>
<tr>
  <td>Sex:</td>
  <td>
  <input type="radio" name="Sex" value="male"   <?=__checked('Sex', 'male'  );?> /> Male
  <input type="radio" name="Sex" value="female" <?=__checked('Sex', 'female');?> /> Female
  </td>
</tr>
<tr>
  <td>Details:</td>
  <td>
  <textarea class="editfield" name="Details" rows="4"><?=__post('Details');?></textarea>
  <br />
  <small><span id="details_count">0</span> out of 20 characters</small>
  </td>
</tr>
<tr>
  <td>Categories:</td>
  <td>
  <select class="editfield" name="Categories[]" multiple="multiple" size="4">
    <option value="0" <?=__selected2('Categories', 0);?>>Cars</option>
    <option value="1" <?=__selected2('Categories', 1);?>>Computers</option>
    <option value="2" <?=__selected2('Categories', 2);?>>Dogs</option>
    <option value="3" <?=__selected2('Categories', 3);?>>Food</option>
  </select>
  <br />
  <small>Use ctrl+mouse to select multiple categories</small>
  </td>
</tr>
<tr>
  <td>Newsletters:</td>
  <td>
  <input type="checkbox" name="Newsletters[]" value="0" <?=__checked2('Newsletters', 0);?> /> Cars <br />
  <input type="checkbox" name="Newsletters[]" value="1" <?=__checked2('Newsletters', 1);?> /> Computers <br />
  <input type="checkbox" name="Newsletters[]" value="2" <?=__checked2('Newsletters', 2);?> /> Dogs <br />
  <input type="checkbox" name="Newsletters[]" value="3" <?=__checked2('Newsletters', 3);?> /> Food
  </td>
</tr>
<tr>
  <td></td>
  <td>
  <input type="checkbox" name="Agree" value="Yes" <?=__checked('Agree', 'Yes');?> />
  <small>By checking this box you agree to some terms</small>
  </td>
</tr>
<tr>
  <td></td>
  <td><input type="submit" name="submit" value="Submit" /></td>
</tr>
</table>
</form>
<script src="form-validation.js">
</script>
</center>
</body>
</html>
      
ส่วนอันนี้เป็นไฟล์ประกอบน่ะครับ form-validation.js และ form-validation.php download

Read more >>

21 ส.ค. 2555

ตัวอย่างฟอร์มการกรอกข้อมูลส่วนตัวโดยใช้ Javascript เข้ามาช่วย

บทความนี้เป็นตัวอย่างการทำฟอร์มไว้ใช้สำหรับกรอกข้อมูลประวัตส่วนตัว ซึ่งหลายท่านอาจเคยเห็นมาหลายแบบแล้ว แต่โค้ดที่ผมจะนำมาให้ดูนี้เป็นการใช้งานของโค้ด php + javascript ซึ่งลักษณะการทำงานคือ เมื่อเรากรอกข้อมูลในฟอร์มแล้วหากกรอกไม่ครบถ้วน หรือกรอกไม่ถูกต้อง มีจะข้อความเตือนตลอด ซึ่งทำให้ง่ายต่อการกรอกข้อมูล มาดู code กันเลยครับ


ตัวอย่าง code simple1.php


<!DOCTYPE html PUBLIC
          "-//W3C//DTD XHTML 1.0 Transitional//EN"
          "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Sample 1</title>
<style>
body { padding: 10px 0px 0px 0px; }
td
{
  padding: 2px 5px;
  text-align: left;
}
h4 { margin: 0px; }
input.editfield, select.editfield, textarea.editfield { width: 18em; }
</style>
</head>
<body>
<center>
<form method="post" action="sample1.php">
<input type="hidden" name="form_validation_rules" value="
Username Password Year Month Day Details : empty;
Username Password : len >= 3;
Username Password : chnum_;
E-mail: email;
Membership : select 0;
Year : > 1900;
Year Month Day : date;
Sex : radio;
Details: len <= 20;
Categories[] Newsletters[] : cnt >= 2;
Agree : terms;
" />
<input type="hidden" name="form_validation_behaviours" value="
Details : count details_count 20 black red;
Year : next 4;
Month Day : next 2;
Month Day : prev;
" />
<table>
<tr>
  <td style="padding-bottom: 10px;" colspan="2"><h4>Sample 1</h4></td>
</tr>
<tr>
  <td>Username:</td>
  <td><input class="editfield" type="text" name="Username" /></td>
</tr>

<tr>
  <td>Password:</td>
  <td><input class="editfield" type="password" name="Password" /></td>
</tr>
<tr>
  <td>E-mail:</td>
  <td><input class="editfield" type="text" name="E-mail" /></td>
</tr>
<tr>
  <td>Membership:</td>
  <td>
  <select class="editfield" name="Membership">
    <option value="0"></option>
    <option value="1">Silver</option>
    <option value="2">Gold</option>
    <option value="3">Platinum</option>
  </select>
  </td>
</tr>
<tr>
  <td>Age:</td>
  <td>
  <input type="text" name="Year"  size="4" maxlength="4" />
  <input type="text" name="Month" size="2" maxlength="2" />
  <input type="text" name="Day"   size="2" maxlength="2" />
  <small>yyyy/mm/dd</small>
  </td>
</tr>
<tr>
  <td>Sex:</td>
  <td>
  <input type="radio" name="Sex" value="male"   /> Male
  <input type="radio" name="Sex" value="female" /> Female
  </td>
</tr>
<tr>
  <td>Details:</td>
  <td>
  <textarea class="editfield" name="Details" rows="4"></textarea>
  <br />
  <small><span id="details_count">0</span> out of 20 characters</small>
  </td>
</tr>
<tr>
  <td>Categories:</td>
  <td>
  <select class="editfield" name="Categories[]" multiple="multiple" size="4">
    <option value="0">Cars</option>
    <option value="1">Computers</option>
    <option value="2">Dogs</option>
    <option value="3">Food</option>
  </select>
  <br />
  <small>Use ctrl+mouse to select multiple categories</small>
  </td>
</tr>
<tr>
  <td>Newsletters:</td>
  <td>
  <input type="checkbox" name="Newsletters[]" value="0" /> Cars <br />
  <input type="checkbox" name="Newsletters[]" value="1" /> Computers <br />
  <input type="checkbox" name="Newsletters[]" value="2" /> Dogs <br />
  <input type="checkbox" name="Newsletters[]" value="3" /> Food
  </td>
</tr>
<tr>
  <td></td>
  <td>
  <input type="checkbox" name="Agree" />
  <small>By checking this box you agree to some terms</small>
  </td>
</tr>
<tr>
  <td></td>
  <td><input type="submit" value="Submit" /></td>
</tr>
</table>
</form>
<script src="form-validation.js"></script>
</center>
</body>
</html>


ส่วนอันนี้เป็นโค้ด form-validation.js เป็นไฟล์ประกอบน่ะครับ download ไปใช้กันได้เลย




Read more >>

20 ส.ค. 2555

การทำหน้ารอระหว่างโหลดข้อมูล (preloader)

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

code หน้า index.html

<!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>Ajax Preloader example</title>
<link href="style/style.css" rel="stylesheet" type="text/css" />
<script language="javascript" type="text/javascript" src="max.js"></script>
</head>

<body onload="loadSite();" id="myBody">
   <div id="loader"><img src="loader.gif" border="1"/></div>
</body>

รูปตัวอย่าง



ส่วนอันนี้เป็นไฟล์ตัวย่างน่ะครับ download
Read more >>

17 ส.ค. 2555

php กับการ upload ไฟล์ โดยนำ ajax เข้ามาช่วย

เป็นการใช้โค้ด php มาเขียนคำสั่งในการ upload ไฟล์ และใช้ ajax มาช่วยในการแสดงสถานะการ upload และการทำงานขณะ upload ไฟล์อยู่ และเมื่อ upload เสร็จก็จะมีข้อความเตือน เป็นการเพิ่มลูกเล่นให้กับเวปของเราได้ดีเลยครับ มาดูตัวอย่าง code กันเลย

code ไฟล์ 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>Max's AJAX File Uploader</title>
   <link href="style/style.css" rel="stylesheet" type="text/css" />
 
<script language="javascript" type="text/javascript">
<!--
function startUpload(){
      document.getElementById('f1_upload_process').style.visibility = 'visible';
      document.getElementById('f1_upload_form').style.visibility = 'hidden';
      return true;
}

function stopUpload(success){
      var result = '';
      if (success == 1){
         result = '<span class="msg">The file was uploaded successfully!<\/span><br/><br/>';
      }
      else {
         result = '<span class="emsg">There was an error during file upload!<\/span><br/><br/>';
      }
      document.getElementById('f1_upload_process').style.visibility = 'hidden';
      document.getElementById('f1_upload_form').innerHTML = result + '<label>File: <input name="myfile" type="file" size="30" /><\/label><label><input type="submit" name="submitBtn" class="sbtn" value="Upload" /><\/label>';
      document.getElementById('f1_upload_form').style.visibility = 'visible';    
      return true;  
}
//-->
</script>  
</head>

<body>
       <div id="container">
            <div id="header"><div id="header_left"></div>
            <div id="header_main">Max's AJAX File Uploader</div><div id="header_right"></div></div>
            <div id="content">
                <form action="upload.php" method="post" enctype="multipart/form-data" target="upload_target" onsubmit="startUpload();" >
                     <p id="f1_upload_process">Loading...<br/><img src="loader.gif" /><br/></p>
                     <p id="f1_upload_form" align="center"><br/>
                         <label>File:
                              <input name="myfile" type="file" size="30" />
                         </label>
                         <label>
                             <input type="submit" name="submitBtn" class="sbtn" value="Upload" />
                         </label>
                     </p>
                   
                     <iframe id="upload_target" name="upload_target" src="#" style="width:0;height:0;border:0px solid #fff;"></iframe>
                 </form>
             </div>
             <div id="footer"><a href="http://www.ajaxf1.com" target="_blank">Powered by AJAX F1</a></div>
         </div>
               
</body>  




ส่วนอันนี้เป็นไฟล์ประกอบน่ะครับ download

Read more >>

โค้ดการจำกัดจำนวนอักษรที่จะกรอกใน textbox

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

ตัวอย่าง code หน้าหลัก

<html>
<head>
<title></title>

<script type="text/javascript" src="Bs_Misc.lib.js"></script>
<script type="text/javascript" src="Bs_LimitedTextarea.class.js"></script>
<script type="text/javascript" src="Bs_ColorUtil.lib.js"></script>
<script>
function init() {
myLimitedFoo = new Bs_LimitedTextarea('foo', 50);
myLimitedFoo.setBgColorWarning();
myLimitedFoo.draw();

myLimitedBar = new Bs_LimitedTextarea('bar', 100);
myLimitedBar.setBgColorWarning(60, 'char', 'FFC0C0');
myLimitedBar.draw();
}
</script>
</head>

<body onLoad="init();">
<table border="0" cellspacing="0" cellpadding="10" width="580">
<tr>
<td valign="top">
<b>Field 1</b><br>
When 80% of the 50 chars are used, the background color starts to transform into red.<br><br>
<textarea name="foo" id="foo" cols="25" rows="4"></textarea>
</td>
<td valign="top">
<b>Field 2</b><br>
When 60 chars are used, the background color starts to transform into red.<br><br>
<textarea name="bar" id="bar" cols="25" rows="4" style="background-color:#C0FFFF;">this is a default value. this is a default value.</textarea>
</td>
</tr>
</table>

</body>
</html>

ส่วนอันนี้เป็นไฟล์ประกอบน่ะครับ download
โค้ดอาจจะเยอะหน่อยน่ะครับ ลองนำไปประยุกต์ดูครับ
Read more >>

16 ส.ค. 2555

โค้ด php กับ Banner Manager ระบบจัดการป้ายโฆษณา

ระบบจัดการป้ายโฆษณา สามารถจัดการป้ายโฆษณา และยังสามารถดูสถิติได้



วิธีการติดตั้ง
เมื่อ Downloads ได้แล้ว ให้ แตกไฟล์ Zip ใว้ใน Folder ทีก่ำหนดแต่ต้องอยู่ภายใน Path ของ Server เท่านั้น ในที่นี้ผม แตกไฟล์ใว้ที่ C:\Appserv\www\ad_banner การติดตั้งให้แก้ Config ที่ไฟล์ common/config.inc.php

config.inc.php
//(1) ตั้งค่าต่างๆ ของ MySQL Server
$host = "localhost";
$user = "";
$passwd = "";
$dbname = "ad_banner";

จากนั้นให้ใช้ phpMyAdmin ทำการ dump ตารางจากไฟล์ db.sql



หลังจาก dump ตารางเสร็จเรียบร้อยแล้ว สามารถใช้งานได้เลย Run http://localhost/ad_banner/test.php


ระบบ Admin
http://localhost/ad_banner/admin/index.php


User : admin
Pass : admin



สามารถเข้าไปแก้ไขจัดการ Banner ต่าง ๆ ได้เลยครับ 
ส่วนอันนี้เป็นไฟล์ประกอบครับ 
Read more >>

6 ส.ค. 2555

ตัวอย่างการซ่อนหรือแสดง textbox เมื่อเปลี่ยนเงื่อนไขใน listbox

ตัวอย่างโค้ดนี้จะเป็นการใช้ javascript ในการซ่อนหรือแสดง textbox เมื่อเปลี่ยนเงื่อนไขใน listbox ซึ่งจาก code ตัวอย่างนี้เมื่อเปลี่ยนค่าใน listbox เป็น โสด ก็จะมี textbox ปรากฏขึ้นมาให้กรอก ชื่อ, นามสกุล และเลขประจำตัวประชาชน ขึ้นมา แต่ถ้าเปลี่ยนเป็นกรณีอื่น ๆ ก็จะไม่มี text box ปรากฏขึ้นมา ยังไงก็ลองนำไปประยุกต์ใช้ในการทำฟอร์มสำหรับกรอกข้อมูลได้น่ะครับ
ตัวอย่าง code 

<script>
function chksatatus(sx){
if (sx=="โสด"){
    document.getElementById('det1').style.display='none';
    document.getElementById('det2').style.display='none';
}else{
     document.getElementById('det1').style.display='block';
    document.getElementById('det2').style.display='block';
}
}
</script>
                    <select  onChange="chksatatus(this.value);" name="citizen_satatus"id="citizen_satatus">
            <option value="โสด">โสด</option>
            <option  value="สมรส"selected>สมรส</option>
            <option   value="หย่า">หย่า</option>
            <option   value="หม้าย">หม้าย</option>
          </select>

<table>

  <tr id='det1'>
    <td><div align="right">ชื่อคู่สมรส :&nbsp;</div></td>
    <td><label>
      <input name="citizen_namesamee" type="text" id="citizen_namesamee"  />
    </label></td>
    <td><div align="right">นามสกุล :&nbsp;</div></td>
    <td><label>
      <input name="citizen_surnamesamee" type="text" id="citizen_surnamesamee"  />
    </label></td>
  </tr>
  <tr id='det2'>
    <td><div align="right">รหัสบัตรประจำตัวประชาชนคู่สมรส :&nbsp;</div></td>
    <td><label>
      <input name="citizen_sameeid" type="text" id="citizen_sameeid" />
    </label></td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  </table>
Read more >>

1 ส.ค. 2555

php กับการ upload ไฟล์แบบไม่เปลี่ยนหน้า

code php นี้เกี่ยวกับวิธีการทำ upload ไฟล์ ซึ่งหลายท่านอาจะเคยทำมาแล้วแต่ code ตัวนี้มีความพิเศษกว่าวิธีที่ผมเคยใช้มาก่อน นั้นก็คือมันเป็นโค้ดที่ทำการ upload โดยที่ไม่มีการเปลี่ยนหน้าให้รำคาญใจเลยทุกอย่างทำเสร็จในหน้าเดียว แต่ดูโค้ดแล้วอาจจะยุ่งยากนิดหน่อย แต่ก็ได้ผลลัพธ์ที่คุ้มค่าทีเดียวครับ ดูตัวอย่าง code php ด้านล่างเลยครับ
ขั้นตอนแรกเขียน Form Upload และ Script Upload ก่อน
โค้ดไฟล์ upload.html

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-874">
<title>Upload ไม่เปลี่ยนหน้า</title>

<script language="javascript">
function clickupload()
{

if ( document.getElementById('fileupload').value.length == 0 )
{
alert( 'ระบุ File ที่จะ Upload ' ) ;
return false ;
}


document.getElementById('upmsg').innerHTML = 'กำลัง Upload อยู่ รอซักครู่...' ;
document.getElementById('btnUpload').value = "ส่งไปแล้วไม่ต้องคลิกซ้ำ";
document.getElementById('btnUpload').disabled = true ;


return true ;
}

function uploadok(pathfile)
{
document.getElementById('fileupload').value ="";
document.getElementById('upmsg').innerHTML = 'Upload เสร็จแล้ว <br> file อยู่ที่<Br><a href="'+pathfile+'" target="_blank">'+pathfile+'</a><br>ระบุ File ใหม่ต่อไปได้เลย' ;
document.getElementById('btnUpload').value = "Upload เลย";
document.getElementById('btnUpload').disabled = false;
document.getElementById('frmUpload').reset() ;
return true ;
}



</script>


</head>
<body>
<iframe id="uploadtarget" name="uploadtarget" src="" style="width:0px;height:0px;border:0"></iframe>
<form id="frmUpload" action="upload.php" method="post" enctype="multipart/form-data" onsubmit="return clickupload();" target="uploadtarget">
<span id="upmsg">ระบุ File ที่จะ Upload</span><br>
<input id="fileupload" name="fileupload" type="file">&nbsp;
<input id="btnUpload" type="submit" value="Upload เลย">
</form>
</body>
</html>

คำอธิบายโค้ดสีสีเขียว คือ เมื่อกด Submit มันจะ Load หน้าใหม่ ฉะนั้นผมจึงเพิ่ม Target เข้าไปให้ ผลที่ได้ไปลงไว้ที่ Window ชื่อ uploadtarget โดย Window ชื่อ uploadtarget นี้ผมกำหนดเป็นแบบ iframe ซะเลย แถมกำหนดให้แสดงผลแบบ 0 ด้วย และผมก็เพิ่ม Javascript เพื่อตรวจสอบข้อมูลก่อนว่า คนกดต้องระบุ path File เข้ามา

คำอธิบายโค้ดสีแดง คือ การบอกสถานะการดำเนินการ คราวนี้เมื่อคลิก submit ระบบจะทำการเปลี่ยน ข้อความเป็น กำลัง Upload และทำการล๊อกปุ่มไม่ให้คลิกเข้ามาซ้ำอีก

และตามด้วยโค้ดไฟล์ upload.php

<?

sleep(3);

$file = $_FILES['fileupload']['name'];
$typefile = $_FILES['fileupload']['type'];
$sizefile = $_FILES['fileupload']['size'];
$tempfile = date("Y-m-d")."-".$file;
copy($_FILES['fileupload']['tmp_name'],$tempfile);

?>
<script language="JavaScript">
<!--
window.parent.uploadok('<?=$tempfile?>');
//-->
</script>



พอ Script upload.php ทำงานก็จะส่งค่ากลับมาที่หน้าหลักและรายงานผลเรียบร้อยแล้ว




Read more >>