CODEWITHSUNDEEP
javascript
Andy
Andy

Reputation: 115

How to check if a radio button is checked without names or ids in javascript

I'm trying to see the value of all the radio buttons without using names or ids, but whenever I try getElementByID the objects I get are just unidentified.

EDIT: I only want to useJavaScript, I don't know any jQuery 

function getData() {
  var input = document.getElementsByTagName('input type="radio"');
  var inputList = Array.prototype.slice.call(input);
  for (radio in input) {
    if (radio.checked)
      console.log(radio.value + " is checked");
    else
      console.log(radio.value + " is not checked");
  }
}

function toggleButton() {
  this.checked = true;
}
<form>
  <label> radio button 1 
<input type="radio" onclick="toggleButton()" value="radio button 1"> 
		</label>
  <label>
			radio button 2
<input type="radio" onclick="toggleButton()" value="radio button 2">
		</label>
  <label>
			radio button 3
<input type="radio" onclick="toggleButton()" value="radio button 3">
		</label>
</form>
<button onclick="getData()"='submit'>Run Scripts!</button>

Upvotes: 2

Views: 854

Answers (4)

jmargolisvt
jmargolisvt

Reputation: 6088

There may be other issues here, but the reason you are not getting what you are looking for is because of this line:

var input=document.getElementsByTagName('input type="radio"');

You need to select your elements like so:

var input = document.querySelectorAll('input[type=radio]');

UPDATE: It doesn't matter how you loop over your array (or in this case, a NodeList technically), but you need to treat it like an array somehow. You are trying to use a for in loop, which is for objects. If you want to use forEach you can update your code like so:

function getData() {
  var inputs = document.querySelectorAll('input[type=radio]');
  inputs.forEach( function (radio){
      if (radio.checked)
      console.log(radio.value + " is checked");
    else
      console.log(radio.value + " is not checked");
  });
}

Upvotes: 2

zer00ne
zer00ne

Reputation: 44086

If you are using only plain JavaScript and a <form> but no #id,.class, or [attribute] to hook into, use HTMLFormControlsCollection🟉.

Details are commented in Demo

Demo

// Reference the first <form> 🟉
var form = document.forms[0];

// Register form to the change evemt callback is getData()
form.addEventListener('change', getData, false);

// Register form's fourth form control (<button>)🟉 to click event
form.elements[3].addEventListener('click', getData, false);

function getData(e) {
  // Collect all of form's form controls into a HTMLCollection🟉
  var rads = form.elements;

  /* if the clicked node (e.target) [type] attribute is "radio"
  || or "button"...
  */
  if (e.target.type === "radio" || e.target.type === "button") {

    // Loop through the rads HTMLCollection
    for (let r = 0; r < rads.length - 1; r++) {

      // if this particular rad ('radio button') is checked...
      if (rads[r].checked) {
        console.log(rads[r].value + " is checked");
      } else {
        console.log(rads[r].value + " is unchecked");
      }
    }
  }

}
<form>
  <label> radio button 1 
<input type="radio" value="radio button 1"> 
		</label>
  <label>
			radio button 2
<input type="radio" value="radio button 2">
		</label>
  <label>
			radio button 3
<input type="radio" value="radio button 3">
		</label>
  <button type='button'>GetStatus</button>
</form>

Upvotes: 0

FisNaN
FisNaN

Reputation: 2875

  1. Use jQuery to select inputs with same name and then select the checked value
  2. Use getElementsByName to select all inputs (get a NodeList). Convert it to array, and then filter it return the checked value

function getData1() {
  const input = $('input[name="contact"]:checked').val()
  console.log(input);
}

function getData2() {
  const inputs = Array.from(document.getElementsByName('contact'));
  const val = inputs.filter(i => i.checked)[0].value;
  console.log(val);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <input type="radio" id="contactChoice1" name="contact" value="email" checked>
  <label for="contactChoice1">Email</label>

  <input type="radio" id="contactChoice2" name="contact" value="phone">
  <label for="contactChoice2">Phone</label>

  <input type="radio" id="contactChoice3" name="contact" value="mail">
  <label for="contactChoice3">Mail</label>
</form>
<button onclick="getData1()">Run jQuery version!</button>
<button onclick="getData2()">Run vanilla JS version!</button>

Upvotes: 0

31piy
31piy

Reputation: 23869

Have identified the following issues with your script:

  1. getElementsByTagName expects a tag name as the argument. It cannot work on CSS selectors (which is in fact also wrong in your question).
  2. To loop on the selected elements, you should use Array#forEach on inputList, and not on input directly.

Correcting these, following is a working example of your code:

function getData() {
  var input = document.getElementsByTagName('input');
  var inputList = Array.prototype.slice.call(input);

  inputList.forEach(function(radio) {
    if (radio.checked)
      console.log(radio.value + " is checked");
    else
      console.log(radio.value + " is not checked");
  });
}

function toggleButton() {
  this.checked = true;
}
<form>
  <label> radio button 1 
<input type="radio" onclick="toggleButton()" value="radio button 1"> 
		</label>
  <label>
			radio button 2
<input type="radio" onclick="toggleButton()" value="radio button 2">
		</label>
  <label>
			radio button 3
<input type="radio" onclick="toggleButton()" value="radio button 3">
		</label>
</form>
<button onclick="getData()"='submit'>Run Scripts!</button>

Upvotes: 0

Related Questions