Autofill a radiobutton

Question

I am trying to auto fill a radio button type, I was training on this website and used it's code to test it on my google chrome console, but it returns undefined.

The website : https://benalexkeen.com/autofilling-forms-with-javascript/

the html: view-source:https://benalexkeen.com/autofilling-forms-with-javascript/

I'm trying to tick the thrid radio button using this code:

var radioElements = document.getElementsByName("input3");

    for (var i=0; i<radioElements.length; i++) {
      if (radioElements[i].getAttribute('value') == 'Radio3') {
        radioElements[i].checked = true;
      }
    }

output:

I tried to adapt this code to tick on another website and still have this undefined output

Can you post the HTML that the JS is supposed to work on? [The code works](https://jsfiddle.net/j08691/1ng8s2v0/1/), provided the HTML is properly created and the JS is run after the page is loaded — j08691, Jul 07 '20 at 16:07
Please provide a minimal reproducible example so we can help you. — Unmitigated, Jul 07 '20 at 16:07
I am unable to make this run on my google chrome console, why ? — volvic2L, Jul 07 '20 at 16:08
is this possible `document.getElementsByName` or it is`document.getElementsByTagName` — Umutambyi Gad, Jul 07 '20 at 16:09
Just had a look at your example page. It's not working because the radio buttons are coming from an iframe on codepen. When I run your code on that iframe it works fine. — j08691, Jul 07 '20 at 16:28

score 0 · Answer 1 · answered Jul 07 '20 at 16:12

0

I hope this will help. You might be mistaken with the attribute value

var radioElements = document.getElementsByName("input3");

    for (var i=0; i<radioElements.length; i++) {
      if (radioElements[i].getAttribute('value') == 'radio3') {
        radioElements[i].checked = true;
      }
    }

<input type="radio" id="radio1" name="input3" value="radio1">
<label for="radio1">Redio 1</label><br>
<input type="radio" id="radio2" name="input3" value="radio2">
<label for="radio2">Redio 2</label><br>
<input type="radio" id="radio3" name="input3" value="radio3">
<label for="radio3">Radio 3</label>

answered Jul 07 '20 at 16:12

Niloy

576
4
13

Thanks but I don't think the problem is the code... the google chrome is just throwing me: undefined – volvic2L Jul 07 '20 at 16:16
In general, in chrome console, if you just declare a variable it gives undefined, that's not a error but in general the terminal give some output upon input but as you are not printing anything, it just print undefined for no reason. Don't forget to mark this as a correct answer :) – Niloy Jul 07 '20 at 16:18
Ok, but I ran your code and still get undefined, it's probably a wrong setting but I don't know which one – volvic2L Jul 07 '20 at 16:19
No, It's a normal behavior of chrome console. Go to chrome console and try to to run var a = 1 also here it will give you undefined, same for me. It's nothing important or a error. If you still feel to remove that follow this article: https://stackoverflow.com/questions/14633968/chrome-firefox-console-log-always-appends-a-line-saying-undefined#:~:text=If%20a%20function%20does%20not,value%2C%20JavaScript%20automatically%20returns%20undefined.&text=log()%20in%20Chrome%20console,of%20this%20function%20is%20undefined. – Niloy Jul 07 '20 at 16:21
@volvic2L Things that are not intended to return something will do that. Something like: `1 + 1` will return `2`, given that's an operation that returns a result. Something like `var test = 2` will show `undefined` because that's just an assignment and it's not computing anything, it doesn't actually return anything for you. – kachus22 Jul 07 '20 at 16:23
exactly, that's what the chrome console wants, it wants you to return something that it can show as output, – Niloy Jul 07 '20 at 16:25

score 0 · Answer 2 · answered Jul 07 '20 at 16:21

Here is another approach in case you want something easier to read IMO.

// Instead of var I used let.
let radioElements = document.getElementsByName("input3");
radioElements.forEach((input) => {
    if(input.value === "Radio3") input.checked = true;
})

<input type="radio" id="Radio1" name="input3" value="Radio1">
<label for="radio1">Radio 1</label><br>
<input type="radio" id="Radio2" name="input3" value="Radio2">
<label for="radio2">Radio 2</label><br>
<input type="radio" id="radio3" name="input3" value="Radio3">
<label for="radio3">Radio 3</label>

And about undefined, if the code you are writing doesn't return anything, it will do that. Although, it doesn't mean is not working.

Autofill a radiobutton

2 Answers2