0

I have an embedded form where field names are generated dynamically. I am trying to get the field name and selected value of a group of radio buttons.

<div class="Business_Type">
    <input type="radio" name="12234_1212" value="Private"> Channel<br>
    <input type="radio" name="12234_1212" value="Public"> Direct
</div>

Here is my attempted script which does not work:

<script>    
    var fieldContainer_Business_Type = document.getElementsByClassName('Business_Type')[0];
    var radios_Business_Type = fieldContainer_Business_Type.getElementsByTagName("input");
    var Business_Type;

    function businessType() {
        for (var i = 0; i < radios_Business_Type.length; i++) {
            if (radios_Business_Type[i].type === 'radio' && radios_Business_Type[i].checked) {
                Business_Type = radios_Business_Type[i].value;
                console.log(Business_Type);
            }
        }   
    }

    radios_Business_Type.onclick = businessType();
</script>

Any help is much appreciated. Vanilla JavaScript only please (not jQuery).

ianhman
  • 73
  • 1
  • 12
  • `radios_Business_Type.onclick = businessType();` should be `radios_Business_Type.onclick = businessType;` or better yet `radios_Business_Type.addEventListener("click", businessType);`, see the linked question's answers for why. – T.J. Crowder Sep 18 '19 at 09:11
  • BTW, you can get the list of radio buttons (and just radio buttons, rather than all `input`s) more easily: `var radios_Business_Type = document.querySelector(".Business_Type").querySelectorAll("input[type=radio]");` If there's only ever one `.Business_Type` element, then it can be simpler still: `var radios_Business_Type = document.querySelectorAll(".Business_Type input[type=radio]");` – T.J. Crowder Sep 18 '19 at 09:13

1 Answers1

3

var fieldContainer_Business_Type = document.getElementsByClassName('Business_Type')[0];
var radios_Business_Type = fieldContainer_Business_Type.getElementsByTagName("input");
var Business_Type;

function businessType() {

    for (var i = 0; i < radios_Business_Type.length; i++) {
        if (radios_Business_Type[i].type === 'radio' && radios_Business_Type[i].checked) {
            Business_Type = radios_Business_Type[i].value;
            console.log(Business_Type);
        }
    }
}

for (var i = 0; i < radios_Business_Type.length; i++) {
    radios_Business_Type[i].addEventListener('click', businessType);
}
<div class="Business_Type">
    <input type="radio" name="12234_1212" value="Private"> Channel<br>
    <input type="radio" name="12234_1212" value="Public"> Direct
</div>
Mahmudur Rahman
  • 745
  • 5
  • 13