CODEWITHSUNDEEP
htmlradio-buttonbuttonclick
avani jain
avani jain

Reputation: 119

html sending data from radio selection

I have above html code. Which has table with rows and each row has selection radio button. There is confirm button. I need to send the row data for selected radio option on button click. How should I find what was selected and send that rows data on button click. I want to use javascript but I am very novice in it. Please suggest.

{% extends "base.html" %} {% block title %}Login{% endblock %} {% block content
%}
<html>
   <div class="container ">
      <h1>You are proposing trade for:: {{desired_item_details[2]}}</h1>
      <style>
         th, td
         {
         border:1px solid blue;
         padding:10px;
         text-align:left;
         }
         table
         {
         border-collapse: collapse;
         font-size:12px;
         text-align: left;
         }
      </style>
      <!-- Content here -->
   </div>
   <body>
      <div class="home">
         <br><br><br>
         <label>Please Choose Your Proposed Items::</label>
         <table>
            <tr>
               <th>Item#</th>
               <th>Game Type</th>
               <th>Title</th>
               <th>Condition</th>
            </tr>
            {% for item in proposed_items %}
            <tr>
               <td>{{item[0]}}</td>
               <td>{{item[1]}}</td>
               <td>{{item[2]}}</td>
               <td>{{item[3]}}</td>
               <td>
                  <input value="{{item[0]}}" id="type_radio_1" name="select" type="radio" /> Select
               </td>
            </tr>
            {% endfor %}
         </table>
      </div>
      <div class="col">
         <a class="btn btn-primary btn-lg"  role="button">Confirm</a>
      </div>
   </body>
</html>
{% endblock %}

enter image description here

Upvotes: 1

Views: 470

Answers (1)

Vishal Kalansooriya
Vishal Kalansooriya

Reputation: 520

Here is a simple solution for your question.

document.getElementById("confirmButton").onclick = ( function(event) {
for(var i = 1; i < 4; i++) {
    var radioButton = document.getElementById("type_radio_"+i)
    if(radioButton.checked){
        alert("You have selected" + radioButton.value);
    }
}
});
<input value="{{item[0]}}" id="type_radio_1" name="select" type="radio" /><label for="type_radio_1">Select</label>
<input value="{{item[1]}}" id="type_radio_2" name="select" type="radio" /><label for="type_radio_2">Select</label>
<input value="{{item[2]}}" id="type_radio_3" name="select" type="radio" /><label for="type_radio_3">Select</label>
<input type="button" class="btn btn-primary btn-lg" id="confirmButton" value="Confirm">

You can easily do this using a loop and a condition to check whether the current radio button's id in the loop is selected or not. I have changed your confirm button which was a "a" HTML element to a "input" element.

If you want to change the id of the radio input field dynamically, try to use the below code.

document.getElementById("confirmButton").onclick = ( function(event) {
  for(var i = 0; i < 3; i++) {
      var radioButton = document.getElementById("{{item["+i+"]}}")
      if(radioButton.checked){
          alert("You have selected" + radioButton.value);
      }
  }
});
<input value="{{item[0]}}" id="{{item[0]}}" name="select" type="radio" /><label for="{{item[0]}}">Select</label>
<input value="{{item[1]}}" id="{{item[1]}}" name="select" type="radio" /><label for="{{item[1]}}">Select</label>
<input value="{{item[2]}}" id="{{item[2]}}" name="select" type="radio" /><label for="{{item[2]}}">Select</label>
<input type="button" class="btn btn-primary btn-lg" id="confirmButton" value="Confirm">

Thanks and best regards!

Upvotes: 2

Related Questions