การใช้งานฟังก์ชั่น substring() ใน javascript และการตรวจสอบจำนวนเงินกับการสั่งซื้ออัลบั้มออนไลน์

การใช้งานฟังก์ชั่น substring() ใน javascript และการตรวจสอบจำนวนเงินกับการสั่งซื้ออัลบั้มออนไลน์

PHP CODE FATHER โปรแกรมช่วยสร้างโค้ด โปรเจ็ค PHP+MySQL+Boostrap ใช้งานง่าย ๆ


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

โค้ดในส่วนของ javascript
 

<script language="JavaScript"> 
function Check_txt(){     var numbuy=document.getElementById('numbuy').value; // ดึงค่าจำนวนที่จะซื้อ     
var system_point=document.getElementById('system_point').value; // ดึงค่าราคาต่อ 1 แผ่น     
var user_point=document.getElementById('user_point').value; //ดึงค่าจำนวนเงินที่สมาชิกมีอยู่     
var numx=numbuy*system_point; //เอาตัวแปร numx มารับค่า ราคาต่อแผ่น คูณด้วย จำนวนที่จะซื้อ     
var numy=user_point/numx; //จากนั้นก็เอาจำนวนเงินของสมาชิก หารด้วย numx เพื่อหาว่าสามารถสั่งซื้อได้กี่แผ่น     //alert(numy.toString().substring(0,1));     var num_end=numy.toString().substring(0,1); //เนื่องจากตัวแปร numy นั้นจะมีค่าเป็นทศนิยม แต่เราต้องการแค่จำนวนเต็ม จึงต้องมาทำการตัดส่วนที่ไม่ต้องการออกไป ผมได้ลองเอาตัวแปร numy ซึ่งเป็นตัวเลข มาตัดด้วยฟังก์ชั่น substrint() แล้ว ปรากฏว่าไม่สามารถทำได้ จึงต้องแปลงค่าให้เป็นตัวอักษร หรือ string ก่อน ด้วยฟังก์ชั่น toString() นะครับ     
if(num_end=='0'){ // เช็คว่าได้ 0 หรือไม่ ถ้าใช่ก็แจ้งให้ผุ้ใช้ทราบว่าจำนวนที่ต้องการซื้อนั้นเงินมีไม่พอ         
alert("Point ของคุณไม่เพียงพอสำหรับการซื้อ "+numbuy+" อัลบั้มค่ะ");         
document.getElementById('numbuy').value='1'; // เปลี่ยนค่าที่ฟอร์มในส่วนของการเลือกจำนวน เป็น 1 (ถ้าไม่เปลี่ยนตอนนี้ ค่าเก่าจะค้างอยู่ ซึ่งหากผู้ใช้ไม่เลือกใหม่ แล้วไปกด submit ระบบก็จะมีปัญหาได้         
document.getElementById('numbuy').focus(); // แล้วก็เซ็ตโฟกัสไปที่ฟอร์มในส่วนของการเลือกจำนวน         
return false;     } } </script>
 

โค้ดในส่วนของฟอร์มส่งค่า
     

<form name="form2" method="post" action="download_album.php?album_id=<?=$album_id?>&action=buy" onSubmit="return Check_txt()">     
<input type="hidden" name="system_point" id="system_point" value="<?=$system_point?>">     
<input type="hidden" name="user_point" id="user_point" value="<?=$user_point?>">    
<!-- system_point คือ ราคาซื้อสำหรับ 1 แผ่น และ user_point คือ จำนวนเงิน หรือ point ที่สมาชิกมีอยู่          
แล้วทำไมต้องเอามาใส่ใน hidden ด้วย ไม่ส่งค่าไปกับ action เลยหล่ะ
          
เนื่องจากการดึงเอาค่าไปตรวจสอบนั้นต้องใช้ค่าจากฟอร์ม หรือค่าในตัวแปรที่อยู่ใน 
<input type=""> จึงจำเป็นต้องสร้างตัวส่งค่าขึ้นมานั่นเอง    -->
     

<table width="90%" align="center" style="color:#FFFFFF; padding:10px 20px; ">      
 <tr> <td width="27%" align="right">จำนวนแผ่น : </td>         <td width="73%">           
<select name="numbuy" id="numbuy" onChange=" return Check_txt()"><!-- เหตุการณ์เมื่อคลิกเลือก ก็จะทำการตรวจสอบค่า -->              
<? for($i=1;$i<=20;$i++){ // ตรงนี้ก็สร้างจำนวนที่จะให้เลือก ตั้งแต่ 1 - 20                      
 echo '<option value="'.$i.'">'.$i.'</option><br>';                 
}            
 ?>           
</select>         
</td>       
</tr>      
 <tr>         
<td align="right" valign="top">สถานที่จัดส่ง : </td>         
<td>           <textarea name="address" cols="30" rows="5" id="address"> ชื่อ - นามสกุล : ที่อยู่ :           เบอร์โทรศัพท์ : Email :                     </textarea>         </td>       
</tr>     
</table>
 <div align="center">     
<input type="image" src="images/Buy-cd.png" onClick="document.form2.submit();" /> <!-- อันนี้ใช้รูปแทนปุ่ม submit ก็เลยต้องสั่งแบบนี้ครับ -->     &nbsp; 
<a href="#"><img src="images/Close-win.png" width="98" height="28" border="0" onClick="javascript:self.close()"></a>
</div>
 
</form>    

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

ย้อนกลับ กลับหน้าแรก