CODEWITHSUNDEEP
javascripthtml
HashSu
HashSu

Reputation: 1517

Radio button value is printing 'on' instead of value that it holds

function perform_global(tablecounter) 
{
  for (index = 1; index <= 2; ++index) {
      var dnsname = "dns_name"+index;
      oRadio = document.getElementsByName(dnsname);

      alert (" radio ID " + dnsname + "  " + index + "length " + oRadio.length);
      for(var i = 0; i < oRadio.length; i++)
      {
        if(oRadio[i].checked)
        {
          alert( "Checked Value is " + oRadio[i].value );
        }
      }
    }
}
<form id=globe>
   <table id=x >
      <THEAD><TR>
      <TH> DNSNAME </TH>
      </TR> </THEAD>
      <TBODY id="tbody_1_1"> <TR>
      <TD>
        <input type='radio' name='dns_name1' value='service_name_xx' checked>  service_names_xx 
      </TD>

      <TD>
        <input type='radio' name='dns_name1' value='service_name_yy' >  service_name_yy  
      </TD>
     </TR></TBODY>
   </table>
   <table id=y>
     <THEAD><TR>
     <TH> DNSNAME </TH>
     </TR> </THEAD>
     <TBODY id="tbody_1_2"> <TR>
     <TD>
      <input type='radio' name='dns_name2' value='service_name_xxx' checked>  service_names_xxx 
     </TD>
      <TD>
        <input type='radio' name='dns_name2' value='service_name_yyy'>  service_name_yyy 

      </TD>
     </TR></TBODY>
    </table>
<button onclick="perform_global()">
</form>

Upvotes: 1

Views: 57

Answers (1)

Dacre Denny
Dacre Denny

Reputation: 30360

If I understand your question correctly, then one option to achieve what you require would be via the querySelectorAll() and getAttribute() methods.

First, pass the following selector to querySelectorAll() to acquire all radio input elements that are checked:

querySelectorAll('input[type="radio"]:checked')

Next, iterate the list of matching elements that this query returned, and get the corresponding value attribute (and name attribute if required) of each element via the getAttribute() method:

radio.getAttribute("value")

These ideas can be combined together as follows:

function perform_global(event) {

  // Prevent button from submitting
  event.preventDefault();

  // Use querySelectorAll to select radio elements that are checked
  for (let radio of document.querySelectorAll(`input[type="radio"]:checked`)) {

    // Use getAttribute to aquire value attribute for checked radio
    console.log("Checked group:" + radio.getAttribute("name") + ", value:" + radio.getAttribute("value"));
  }
}
<form id=globe>
  <table id=x>
    <TH> DNSNAME </TH>
    <TD>
      <input type='radio' name='dns_name1' value='service_name_xx' checked> service_names_xx
    </TD>
    <TD>
      <input type='radio' name='dns_name1' value='service_name_yy'> service_name_yy
    </TD>
  </table>
  <table id=y>
    <TH> DNSNAME </TH>
    <TD>
      <input type='radio' name='dns_name2' value='service_name_xx' checked> service_names_xx
    </TD>
    <TD>
      <input type='radio' name='dns_name2' value='service_name_yy'> service_name_yy
    </TD>
  </table>
  <!-- Pass event to onclick handler -->
  <button onclick="perform_global(event)">Button</button>
</form>

Upvotes: 1

Related Questions