วิธาส่งค่า Radio Button ไปยัง PHP ด้วย JavaScript

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

ตัวอย่างนี้แสดงวิธีดึงค่าจาก Radio Button ที่ถูกเลือก (checked) โดยใช้ jQuery แล้วส่งไปยัง PHP ผ่าน AJAX หรือฟอร์มทั่วไป

<!-- HTML สำหรับ Radio Button Group -->
<div id="controls">
  <label class="btn btn-primary active">
    <input type="radio" class="form-control" name="option_avail" value="Option_one" checked /> ตัวเลือกที่ 1
  </label>
  <label class="btn btn-primary">
    <input type="radio" class="form-control" name="option_avail" value="Option_two" /> ตัวเลือกที่ 2
  </label>
  <label class="btn btn-primary">
    <input type="radio" class="form-control" name="option_avail" value="Option_three" /> ตัวเลือกที่ 3
  </label>
</div>

<!-- JavaScript (jQuery) -->
<script>
// ดึงค่าที่ถูกเลือก
var option_avail = $('input[name=option_avail]:checked', '#controls').val();
console.log("ค่าที่เลือก:", option_avail);

// ตัวอย่างส่งไป PHP ด้วย AJAX
$.ajax({
  url: 'process.php',
  method: 'POST',
  data: { option_avail: option_avail },
  success: function(response) {
    console.log("ตอบกลับจากเซิร์ฟเวอร์:", response);
  }
});
</script>

คำอธิบาย

• ID ต้องไม่ซ้ำกัน ในเอกสาร HTML เดียวกัน
• Selector 'input[name=option_avail]:checked', '#controls' ค้นหา radio button ที่มี name="option_avail" อยู่ใน #controls และถูกเลือก
• .val() จะคืนค่า value ของ radio button ที่ถูกเลือก

วิธีส่งข้อมูลไป PHP (2 วิธี)

1. ผ่าน Form Submit (แบบเดิม)

<form action="process.php" method="POST">
  <!-- radio buttons here -->
  <button type="submit">ส่งข้อมูล</button>
</form>

ใน PHP: $option = $_POST['option_avail'];

2. ผ่าน AJAX (แบบไม่โหลดหน้าใหม่)

fetch('process.php', {
  method: 'POST',
  headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
  body: 'option_avail=' + encodeURIComponent(option_avail)
}).then(res => res.text()).then(console.log);

ข้อควรระวัง

• ตรวจสอบว่ามี radio button ถูกเลือกเสมอ (required attribute หรือ validation)
• Sanitize input ใน PHP ด้วย htmlspecialchars() หรือ prepared statements
• ใช้ HTTPS ในการส่งข้อมูลจริง