জাভাস্ক্রিপ্ট দিয়ে রেডিও বাটনের মান PHP-তে কীভাবে পাঠাবেন?

রেডিও বাটন ভ্যালু জাভাস্ক্রিপ্টে সংগ্রহ করে সার্ভারে পাঠানো

রেডিও বাটন গ্রুপ থেকে বেছে নেওয়া ভ্যালু জাভাস্ক্রিপ্ট দিয়ে সংগ্রহ করে AJAX/Fetch ব্যবহার করে PHP ব্যাকএন্ডে পাঠানো সম্ভব। নিচে একটি সरल এবং বাস্তব উদাহরণ দেওয়া হলো।

HTML ফর্ম (রেডিও গ্রুপ)

<form id="optionForm">
  <fieldset>
    <legend>অপশন বেছে নিন</legend>
    <label>
      <input type="radio" name="option_avail" value="Option_one" checked> প্রথম অপশন
    </label>
    <label>
      <input type="radio" name="option_avail" value="Option_two"> দ্বিতীয় অপশন
    </label>
    <label>
      <input type="radio" name="option_avail" value="Option_three"> তৃতীয় অপশন
    </label>
  </fieldset>
  <button type="submit">জমা দিন</button>
</form>
<div id="result"></div>

জাভাস্ক্রিপ্ট: ভ্যালু সংগ্রহ এবং Fetch API দিয়ে পাঠানো

document.getElementById('optionForm').addEventListener('submit', async (e) => {
  e.preventDefault(); // ডিফল্ট সাবমিট বন্ধ
  
  // বেছে নেওয়া রেডিও বাটনের ভ্যালু পান
  const selectedRadio = document.querySelector('input[name="option_avail"]:checked');
  
  if (!selectedRadio) {
    document.getElementById('result').textContent = 'দয়া করে একটি অপশন বেছে নিন।';
    return;
  }
  
  const value = selectedRadio.value;
  console.log('বেছে নেওয়া ভ্যালু:', value);
  
  // PHP-তে পাঠান (Fetch API)
  try {
    const response = await fetch('process.php', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        // CSRF টোকেন থাকলে এখানে যোগ করুন
      },
      body: JSON.stringify({ option_avail: value })
    });
    
    const data = await response.json();
    document.getElementById('result').textContent = 'সার্ভার রেসপন্স: ' + JSON.stringify(data);
  } catch (err) {
    console.error(err);
    document.getElementById('result').textContent = 'এরর: ' + err.message;
  }
});

PHP ব্যাকএন্ড (process.php)

<?php
header('Content-Type: application/json');

// JSON ইনপুট পড়ুন
$input = json_decode(file_get_contents('php://input'), true);

if (isset($input['option_avail'])) {
    $selected = $input['option_avail'];
    // ডাটাবেস কোয়েরি, লজিক ইত্যাদি এখানে
    echo json_encode([
        'success' => true,
        'message' => "আপনি বেছে নিয়েছেন: $selected",
        'received' => $selected
    ]);
} else {
    http_response_code(400);
    echo json_encode(['success' => false, 'message' => 'কোনো ডেটা পাওয়া যায়নি']);
}
?>

জাভাস্ক্রিপ্টে ভ্যালু পাওয়ার অন্যান্য পদ্ধতি

সামान्य ভুল এড়ান

• ইউনিক ID: প্রতিটি রেডিও বাটনের আলাদা `id` দিন (লেবেলের `for` এর জন্য), কিন্তু `name` একই রাখন যাতে গ্রুপ কাজ করে।
• ভ্যালু না পাওয়া: `querySelector` নাল রিটার্ন করতে পারে যদি কিছুই সিলেক্ট না থাকে — নাল চেক করুন।
• CSRF প্রোটেকশন: প্রোডাকশনে অবশ্যই CSRF টোকেন ব্যবহার করুন।

ফর্ম সাবমিট ছাড়া রিয়েল-টাইম আপডেট

যদি সাবমিট বাটন ছাড়া রেডিও বাটন পরিবর্তন হলে সাথে সাথে সার্ভারে পাঠাতে চান:

document.querySelectorAll('input[name="option_avail"]').forEach(radio => {
  radio.addEventListener('change', async () => {
    const value = radio.value;
    await fetch('process.php', {
      method: 'POST',
      headers: {'Content-Type': 'application/json'},
      body: JSON.stringify({ option_avail: value, auto: true })
    });
  });
});