GORAGOD.com

freelance, web developer, web designer, hosting, domain name

ช่วยด้วยครับ...งมโข่งมาหลายวันแล้ว

เบิร์ด

คือผมได้แก้ไขเวปโปรเจคของผม เปนแบบตามบทความ บทที่ 19 การสร้างเว็บไซต์แบบ AJAX (ตอนที่ 1)  อะครับก็แสดงออกมาถูกต้องทุกหน้าร่วมถึงหน้าที่เกิดเปนปัญหาด้วยก็แสดงอกมาถูกต้อง
ซึ่งก็คือหน้าสมัครสมาชิก(member.php)  มันไม่สามารถใช้ฟังชั่นการตรวจสอบการกรอกข้อมูลขณะพิมได้ ทั้งๆที่ก็ก๊อบคำสั่งฟังชั่นไปไว้หน้าหลัก(index.php)แล้ว แต่ทำไมถึงไม่ยอมทำงาน  ได้โปรดบอกผมที ผมหยุดอยู่ตรงนี้มาหลายวันแล้วครับ

โค้ดหน้าindex.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Computer Hardware Online</title>
<link href="styles.css" rel="stylesheet" type="text/css" />
</head>
<script type="text/javascript">
window.onload =function(){
  Event.observe("USERNAME","keyup",checkUser);
  Event.observe("USER_E_MAIL","keyup",checkEmail);
  Event.observe("PASSWORD","keyup",checkPass);
  Event.observe("PASSWORD1","keyup",conPass);
  Event.observe("USER_NAME","keyup",checkFirst);
  Event.observe("USER_LASTNAME","keyup",checkLast);
  $('USERNAME').focus();
  $('USER_E_MAIL').focus();
  }

//==============================================
  
function checkUser(event){
  
  var user=Event.element(event).value;

     if(user=="")
     {
       $("erruser").innerHTML="<font color=#FF0000>*คุณยังไม่ได้กรอก Username!</font>";
     }
      else{//else1
        if(user.length<4)
          {
            $("erruser").innerHTML="<font color=#FF0000>ต้องไม่น้อยกว่า4ตัวอักษร!</font>";
           }
        
         else{//else
           if(user.length>8)
          {
            $("erruser").innerHTML="<font color=#FF0000>ต้องไม่เกินกว่า8ตัวอักษร!</font>";
           }
        
         else{//else
          var user= Event.element(event).id.value; 
            new Ajax.Request("checkUser.php",
             { method:"GET",
                 parameters:$('regis').serialize(true),
                 onComplete:showMsg
              }
           );
       }//else
       }//else
     }//else1
} 

//=========================================

 function checkPass(event){
    var pass=Event.element(event).value;
    
  if(pass=="")
   {
     $("errpass").innerHTML="<font color=#FF0000>*คุณยังไม่ได้กรอก ระหัสผ่าน!</font>";
    } 
     else{//else     
       if(pass.length<4)
        {
         $("errpass").innerHTML="<font color=#FF0000>ห้ามน้อยกว่า4ตัว!</font>";
        }
        else{
         if(pass.length>8)
         {
         $("errpass").innerHTML="<font color=#FF0000>ต้องไม่เกิน8ตัว!</font>";
         }
        else{
         $("errpass").innerHTML="<font color = #00ff00>ผ่าน</font>";
         }
         }
       }//else
   }//func 
//==========================================

  function conPass(event)
  {
    var pass = document.getElementById('PASSWORD').value;
    var conpass = Event.element(event).value;

if(conpass=="")

 {
  $("errconpass").innerHTML="<font color=#FF0000>*คุณยังไม่Confirm Password!</font>";
 }   
 else{  
    if(conpass.length<4)
     { 
      $("errconpass").innerHTML="<font color=#FF0000>ห้ามน้อยกว่า4ตัว!</font>";
      }
       else{  
          if( conpass != pass)
            {
              $("errconpass").innerHTML="ระหัสผ่านไม่ตรงกัน!";
             }
             else{
                 $("errconpass").innerHTML="<font color = #00ff00>ผ่าน</font>";
                }//else
       }//else

   }//else
 }//func
 
//======================

function checkEmail(event){

    
  var email = document.getElementById('USER_E_MAIL').value;

  if(email==""){
     $("erremail").innerHTML="<font color = #FF0000>*ยังไม่ได้กรอกE-mail</font>";
    }else{
       var email= Event.element(event).id.value; 
       new Ajax.Request("checkEmail.php",
        { method:"GET",
            parameters:$('regis').serialize(true),
            onComplete:showEmail
         }
      );
  }//else

}


//=========================================

 
function checkFirst(event){
    var first=Event.element(event).value;
    
  if(first=="")
   {
     $("errfirst").innerHTML="<font color=#FF0000>*คุณยังไม่ได้กรอกชื่อ!</font>";
    } 
     else{//else     
       if(first.length<4)
        {
         $("errfirst").innerHTML="<font color=#FF0000>ชื่อห้ามน้อยกว่า4ตัว!</font>";
        }else{
         $("errfirst").innerHTML="<font color = #00ff00>ผ่าน</font>";
         }
       }//else
   }//func 
//==========================================


 
function checkLast(event){
    var last=Event.element(event).value;
    
  if(last=="")
   {
     $("errlast").innerHTML="<font color=#FF0000>*คุณยังไม่ได้กรอกนามสกุล!</font>";
    } 
     else{//else     
       if(last.length<4)
        {
         $("errlast").innerHTML="<font color=#FF0000>นามสกุลห้ามน้อยกว่า4ตัว!</font>";
        }else{
         $("errlast").innerHTML="<font color=#00ff00>   ผ่าน</font>";
         }
       }//else
   }//func 

//==========================================

  function showMsg(result){
    $("erruser").innerHTML=result.responseText;
   }
   
  function showEmail(result){
    $("erremail").innerHTML=result.responseText;
   }
   
    
//==========================================
    
  function startRequest(){
   var pForm= document.forms[0];
   new Ajax.Request(pForm.action,
           { method: "POST",
           parameters:$("regis").serialize(true),
           onComplete:saveResult
           }
           );
           
        }

//============================================
        
   function saveResult(result){
   if(result.responseText== 'Y')
      {
        window.location = 'login.php';
      }
   else
      {
        $("info").innerHTML=result.responseText;
      }

    }    
</script>
<script type="text/javascript" src="js/prototype.js"></script>


<script src="ajax_framework.js"> </script>
<script type="text/javascript">
<!--

function Inint_AJAX() {
   try { return new ActiveXObject("Msxml2.XMLHTTP");  } catch(e) {} //IE
   try { return new ActiveXObject("Microsoft.XMLHTTP"); } catch(e) {} //IE
   try { return new XMLHttpRequest();          } catch(e) {} //Native Javascript
   alert("XMLHttpRequest not supported");
   return null;
}

function loaddoc(module) {
     var req=Inint_AJAX();
     //แสดง icon คอยการ load ก่อนเลยถ้ามีการเรียกใช้ AJAX
     document.getElementById("rightmodule").innerHTML='<div id="wait"><img src="images/K65872-2.gif" alt="" /><br /><br />กำลังโหลด...</div>';
     req.onreadystatechange = function () {
          if (req.readyState==4) {
               if (req.status==200) {
                    var data=req.responseText; //รับค่ากลับมา
                    document.getElementById("rightmodule").innerHTML=data; //แสดงผล แทนรูปรอโหลด
     Set_Cookie( 'module' , module ); //บันทึก module ที่เรียก ลง cookie สำหรับการ refresh หน้า
               }
          }
     };
     req.open("GET", module, true);
     req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); // set Header
     req.send(null); //ส่งค่า
}
function Set_Cookie(name, value, expires, path, domain, secure){
     var today=new Date();
     today.setTime(today.getTime());
     if(expires){
          expires = expires*1000*60*60*24;
     };
     var expires_date = new Date(today.getTime() + (expires));
     document.cookie = name + "=" +escape(value) +
          ((expires) ? ";expires=" + expires_date.toGMTString() : "") +
          ((path) ? ";path=" + path : "") +
          ((domain) ? ";domain=" + domain : "") +
          ((secure) ? ";secure" : "");
};
</script>
</head>
<body onload="loaddoc('page1.php')"><!-- สำหรับการ refresh หน้า -->

<div id="bgrigth"><img src="images/body-bg1.jpg" width="163" height="738" /></div>
<div id="search">
  <table width="231" border="0">
    <tr>
      <td width="148"><input type="text" name="textfield" id="textfield" /></td>
      <td width="95">&nbsp;
      <input type="submit" name="button" id="button" value="Search" /></td>
    </tr>
  </table>
</div>
<div id="container">
  <!-- #masthead -->
  <div id="masthead">
    <h1><a href="">COMPUTER HARDWARE ONLINE</a></h1>
    <ul>
   
      <li id="home"><a href="javascript:loaddoc('page1.php')">Home</a></li>
      <li id="product"><a href="javascript:loaddoc('page2.php')">Product</a></li>
      <li id="member"><a href="javascript:loaddoc('member.php')">Member</a></li>
      <li id="webborad"><a href="javascript:loaddoc('webboard.php')">Webborad</a></li>
    </ul>
  </div>
</div>
</div>
</p>
<div id="rightmodule">rightmodule</div>

</body>
</html>


โค้ดหน้าmember.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>Computer Hardware Online</title>
<link href="styles.css" rel="stylesheet" type="text/css" />

<script type="text/javascript">
window.onload =function(){
  Event.observe("USERNAME","keyup",checkUser);
  Event.observe("USER_E_MAIL","keyup",checkEmail);
  Event.observe("PASSWORD","keyup",checkPass);
  Event.observe("PASSWORD1","keyup",conPass);
  Event.observe("USER_NAME","keyup",checkFirst);
  Event.observe("USER_LASTNAME","keyup",checkLast);
  $('USERNAME').focus();
  $('USER_E_MAIL').focus();
  }

//==============================================
  
function checkUser(event){
  
  var user=Event.element(event).value;

     if(user=="")
     {
       $("erruser").innerHTML="<font color=#FF0000>*คุณยังไม่ได้กรอก Username!<img src=\"arrowaaa.gif\"/></font>";
     }
      else{//else1
        if(user.length<4)
          {
            $("erruser").innerHTML="<font color=#FF0000>ต้องไม่น้อยกว่า4ตัวอักษร!</font>";
           }
        
         else{//else
           if(user.length>8)
          {
            $("erruser").innerHTML="<font color=#FF0000>ต้องไม่เกินกว่า8ตัวอักษร!</font>";
           }
        
         else{//else
          var user= Event.element(event).id.value; 
            new Ajax.Request("checkUser.php",
             { method:"GET",
                 parameters:$('regis').serialize(true),
                 onComplete:showMsg
              }
           );
       }//else
       }//else
     }//else1
} 

//=========================================

 function checkPass(event){
    var pass=Event.element(event).value;
    
  if(pass=="")
   {
     $("errpass").innerHTML="<font color=#FF0000>*คุณยังไม่ได้กรอก ระหัสผ่าน!</font>";
    } 
     else{//else     
       if(pass.length<4)
        {
         $("errpass").innerHTML="<font color=#FF0000>ห้ามน้อยกว่า4ตัว!</font>";
        }
        else{
         if(pass.length>8)
         {
         $("errpass").innerHTML="<font color=#FF0000>ต้องไม่เกิน8ตัว!</font>";
         }
        else{
         $("errpass").innerHTML="<font color = #00ff00>ผ่าน</font>";
         }
         }
       }//else
   }//func 
//==========================================

  function conPass(event)
  {
    var pass = document.getElementById('PASSWORD').value;
    var conpass = Event.element(event).value;

if(conpass=="")

 {
  $("errconpass").innerHTML="<font color=#FF0000>*คุณยังไม่Confirm Password!</font>";
 }   
 else{  
    if(conpass.length<4)
     { 
      $("errconpass").innerHTML="<font color=#FF0000>ห้ามน้อยกว่า4ตัว!</font>";
      }
       else{  
          if( conpass != pass)
            {
              $("errconpass").innerHTML="ระหัสผ่านไม่ตรงกัน!";
             }
             else{
                 $("errconpass").innerHTML="<font color = #00ff00>ผ่าน</font>";
                }//else
       }//else

   }//else
 }//func
 
//======================

function checkEmail(event){

    
  var email = document.getElementById('USER_E_MAIL').value;

  if(email==""){
     $("erremail").innerHTML="<font color = #FF0000>*ยังไม่ได้กรอกE-mail</font>";
    }else{
       var email= Event.element(event).id.value; 
       new Ajax.Request("checkEmail.php",
        { method:"GET",
            parameters:$('regis').serialize(true),
            onComplete:showEmail
         }
      );
  }//else

}


//=========================================

 
function checkFirst(event){
    var first=Event.element(event).value;
    
  if(first=="")
   {
     $("errfirst").innerHTML="<font color=#FF0000>*คุณยังไม่ได้กรอกชื่อ!</font>";
    } 
     else{//else     
       if(first.length<4)
        {
         $("errfirst").innerHTML="<font color=#FF0000>ชื่อห้ามน้อยกว่า4ตัว!</font>";
        }else{
         $("errfirst").innerHTML="<font color = #00ff00>ผ่าน</font>";
         }
       }//else
   }//func 
//==========================================


 
function checkLast(event){
    var last=Event.element(event).value;
    
  if(last=="")
   {
     $("errlast").innerHTML="<font color=#FF0000>*คุณยังไม่ได้กรอกนามสกุล!</font>";
    } 
     else{//else     
       if(last.length<4)
        {
         $("errlast").innerHTML="<font color=#FF0000>นามสกุลห้ามน้อยกว่า4ตัว!</font>";
        }else{
         $("errlast").innerHTML="<font color=#00ff00>   ผ่าน</font>";
         }
       }//else
   }//func 

//==========================================

  function showMsg(result){
    $("erruser").innerHTML=result.responseText;
   }
   
  function showEmail(result){
    $("erremail").innerHTML=result.responseText;
   }
   
    
//==========================================
    
  function startRequest(){
   var pForm= document.forms[0];
   new Ajax.Request(pForm.action,
           { method: "POST",
           parameters:$("regis").serialize(true),
           onComplete:saveResult
           }
           );
           
        }

//============================================
        
   function saveResult(result){
   if(result.responseText== 'Y')
      {
        window.location = 'login.php';
      }
   else
      {
        $("info").innerHTML=result.responseText;
      }

    }
    
    
             
</script>
<script type="text/javascript" src="js/prototype.js"></script>
<style type="text/css">
<!--
#bgpagemember {
 position:absolute;
 left:11px;
 top:12px;
 width:783px;
 height:376px;
 z-index:44;
}
#tablepagemember {
 position:absolute;
 left:74px;
 top:60px;
 width:658px;
 height:495px;
 z-index:45;
}
.style8 {color: #FFFFFF}
-->
</style>


</head>

<body>
<form id="regis" action="register.php" onsubmit="startRequest(); return false">
<div id="bgpagemember"><img src="images/featured-work-bg.jpg" width="783" height="706" /></div>
<div id="tablepagemember">
<div class="center_prod_box_big">
              <div align="center">
                <p align="left"><img src="images/register.jpg" alt="" width="95" height="28" /><img src="images/button-member1.jpg" alt="" width="96" height="28" /></p>
                <p>&nbsp;</p>
                <p>&nbsp;</p>
              

                <fieldset>
                <legend><span class="style4"><span class="style8">ข้อมูลสมาชิก</span></span></legend>
                <p>&nbsp;</p>
                <table width="521" border="0">
               
                  <tr>
                    <th width="210" align="right" scope="row"><div align="right" class="style8">
                      <h5 class="style2">Username:</h5>
                    </div></th>
                    <td width="301"><div align="left">
                      <h5>
                        <input name="txtUsername" type="text" id="USERNAME" size="20" maxlength="15" />
                      &nbsp;&nbsp;<span id="erruser" /></span></span></h5>
                    </div></td>
                  </tr>
                  <tr>
                    <th align="right" scope="row"><div align="right" class="style2 style8">
                      <h5>Password:</h5>
                    </div></th>
                    <td width="301"><div align="left">
                      <h5>
       <input name="txtPass" type="password" id="PASSWORD" size="20" maxlength="15">
       &nbsp;&nbsp;<font color="#FF0000"><span id="errpass" /></span></span></font></h5>
                    </div></td>
                  </tr>
                  <tr>
                    <th align="right" scope="row"><div align="right" class="style2 style8">
                      <h5>Re-Password:</h5>
                    </div></th>
                    <td width="301"><div align="left">
                      <h5>
                        <input name="txtPass1" type="password" id="PASSWORD1" size="20" maxlength="15" />
                      &nbsp;&nbsp;<font color="#FF0000"><span id="errconpass" /></span></span></font></h5>
                    </div></td>
                  </tr>
                  <tr>
                    <th align="right" scope="row"><div align="right" class="style2 style8">
                      <h5>ชื่อ:</h5>
                    </div></th>
                    <td width="301"><div align="left">
                      <h5>
        <input name="txtName" type="text" onkeypress=checkFirst(); id="USER_NAME" maxlength="20">
       &nbsp;&nbsp;<font color="#FF0000"><span id= "" /></span></span></font></h5>
                    </div></td>
                  </tr>
                  <tr>
                    <th align="right" scope="row"><div align="right" class="style2 style8">
                      <h5>นามสกุล:</h5>
                    </div></th>
                    <td width="301"><div align="left">
                      <h5>
                        <input name="txtLName" type="text" id="USER_LASTNAME" maxlength="20" />
                          &nbsp;&nbsp;<font color="#FF0000"><span id="errlast" /></span></span></font></h5>
                    </div></td>
                  </tr>
                  <tr>
                    <th align="right" scope="row"><div align="right" class="style2 style8">
                      <h5>หมายเลขบัตรประชาชน:</h5>
                    </div></th>
                    <td width="301"><div align="left">
                      <h5>
        <input name="txtID_Person" type="text" onkeypress=check_number();id="USER_ID_CARD" maxlength="13">
         &nbsp;&nbsp;</h5></td>
                  </tr>
                  <tr>
                       <th align="right" scope="row"><div align="right" class="style2 style8">
                         <h5>เบอร์โทรศัพท์ :</h5>
                    </div></th>
                    <td width="301"><label>
                      <div align="left">
                        <h5>
                          <input name="txtPhone" type="text" onkeypress=check_number(); id="USER_PHONE" size="20" maxlength="13" />
                        </h5>
                      </div>
                      <h5>
                        </label>
                    </h5></td>
                  </tr>
                  <tr>
                    <th align="right" scope="row"><div align="right" class="style2 style8">
                      <h5>E-Mail:</h5>
                    </div></th>
                    <td width="301"><div align="left">
                      <h5>
         <input name="txtMail" type="text" id="USER_E_MAIL" maxlength="25">
        &nbsp;&nbsp;<font color="#FF0000"><span id="erremail" /></span></span></font></h5>
                    </div></td>
                  </tr>
                  <tr>
                  <tr>
                    <th align="right" scope="row"><div align="right" class="style2 style8">
                      <h5>ที่อยู่ :</h5>
                    </div></th>
                    <td width="301" align="left"><div align="left">
                      <h5>
                        <textarea name="txtAddress" id="USER_ADDRESS" cols="25" rows="5"></textarea>
                      </h5></td>
                  </tr>
                    <tr>
                      <th colspan="2" align="center" scope="row">&nbsp;</th>
                    </tr>
                 <tr>
                    <th colspan="2" align="center" scope="row"><input name="submit" type="submit" value="ตกลง">
                      <label>
                      <input name="reset" type="reset" value="ยกเลิก" />
                      </label>
                      <label> <div  id="info"></div></label></th>
                  </tr>
                </table>
                </fieldset>
                <p>&nbsp;</p>
    </div>
  </div>
</div>
</body>
</html>

16 พ.ย. 2552 3 3,841
กรกฎ วิริยะ

Javascript ไม่ทำงานในหน้าที่ถูก Ajax เรียกครับ คือคำตอบ

ปัญหาก็คือ ถึงจะย้ายฟังก์ชั่นต่างๆไปไว้ที่หน้าหลักแล้ว แต่ก็คงยังมีบางส่วนที่ไม่สามารถนำไปไว้หน้าหลักได้ เช้นฟังก์ชั่นในกลุ่มดัก Event

window.onload =function(){
  Event.observe("USERNAME","keyup",checkUser);
  Event.observe("USER_E_MAIL","keyup",checkEmail);
  Event.observe("PASSWORD","keyup",checkPass);
  Event.observe("PASSWORD1","keyup",conPass);
  Event.observe("USER_NAME","keyup",checkFirst);
  Event.observe("USER_LASTNAME","keyup",checkLast);
  $('USERNAME').focus();
  $('USER_E_MAIL').focus();
}

ซึ่งมันคงไม่ทำงาน ทำให้ไม่สามารถตรวจสอบการพิมพ์ได้

ถ้าเคยได้อ่านบทความของผม น่าจะรู้ว่า onload จะไม่เกิดกับการเรียกใช้โดย Ajax
การแก้ปัญหา

1. ย้ายฟังก์ชั่นทั้งหมดไปไว้หน้าหลัก หรือ js ภายนอก แหละถูกแล้ว
2. ดักอีเวนต์ด้วย DOM ระดับ 1
    <input type="text" onkeyup="checkUser(this)"....
3. อาจต้องมีการแก้ไขฟังก์ชั่นต่างๆเล็กน้อย
4. อ่านบทความของผมประกอบ
#1
เบิร์ด

ขอบคุณอาจารย์มากครับ เดี๋ยวผมจะแก้ไขตามที่อาจารย์แนะนำ

#2
เบิร์ด

ได้แล้วครับ ขอบคุณอาจารย์มากเลยครับ ทำให้งานผมได้เดินต่อสักที.....

#3
ความคิดเห็น
ไฟล์อัปโหลด ชนิด jpg, jpeg ขนาดไฟล์ไม่เกิน 2M
^