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

ทักทายครับ

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

20 ก.ค. 2555

การทำ form ให้เลือกที่ radio buttom ก่อนถึงจะใส่ข้อมูลใน text field ได้

ใครเคยเขียนโค้ด php ทำ form ที่ให้ผู้ใช้งานบันทึกข้อมูลแล้วมีให้เลือกตรง radio buttom ไหมครับ แล้วเคยเจอปัญหาไหมว่าบางครั้งเราทำทั้ง radio buttom และ text field ในตัวเลือกเดียวกัน แต่ผู้ใช้งานบางคนเลือกแค่ radio buttom แต่ไม่ใส่ข้อมูลใน text field บางคนใส่ข้อมูลใน text field แต่ไม่เลือก radio buttom แล้วเราจะมีวิธีเขียน code ป้องกันยังไง ลองอ่านบทความนี้ดูครับ ก่อนอื่นดูรูปด้านล่างครับเพื่อจะได้ไม่งงกัน

คราวนี้มาดูโค้ดตัวอย่างกันครับ

<body>
<form id="form" name="form" method="post" action="add1.php" >
  <table width="100%" border="2" cellpadding="10" cellspacing="0" bordercolor="#000099">
    <tr>
      <td><strong>การดำเนินการ</strong><br />
        <input name="case1" type="radio" id="rdo2" onclick="document.form.case11.disabled=true;" value="กรณีที่ 1" />
        กรณีที่ 1
        <br />
        <input name="case1" type="radio" id="rdo3" onclick="document.form.case11.disabled=true;" value="กรณีที่ 2" />
        กรณีที่ 2<br />
        <input name="case1" type="radio" id="rdo4" onclick="document.form.case11.disabled=true;" value="กรณีที่ 3" />
        กรณีที่ 3<br />
        <input name="case1" type="radio" id="rdo5" onclick="document.form.case11.disabled=false;" value="อื่นๆ" />
        อื่น ๆ โปรดระบุ 
      <input  type="text" id="case11" size="60"  name="case11" disabled /></td>
    </tr>
  </table>
  <br />
  <p align="center">
    <input type="submit" name="Submit" value="บันทึก" />
    &nbsp;
    <input type="reset" name="Submit2" value="ยกเลิก" />
  </p>
</form>
</body>

จากโค้ดตัวคำสั่งหลักที่สำคัญก็คือตัวหนังสือสีแดงที่ใช้ onclick เข้ามาช่วย หลักการง่าย ๆ คือถ้าเราเลือกที่ช่อง กรณี 1 - กรณี 3 ช่อง อื่น ๆ โปรดระบุ ก็จะเป็น disabled แต่ถ้าเลือกที่ช่อง อื่นๆ ช่อง อื่น ๆ โปรดระบุ ก็จะเป็น abled ลองนำไปประยุกต์ใช้ดูน่ะครับ หวังว่าโค้ดตัวนี้คงเป็นประโยชน์กับทุกคน



1 ความคิดเห็น:

lookmee กล่าวว่า...

ใช้ Javascript เข้ามาช่วยยังงัยค่ะ เมื่อเลือกอื่นๆ แต่จะให้สิ่งที่กรอกในtextbox บัยทึกลงฐานข้อมูล