How to get the selected radio buttons value?

Question

i am trying to get the value of selected radio buttons so i can submit my form using Ajax i searched here for some help but i couldn't find any useful solution

<input type="radio" id="answer" name="answer<?php echo $function::escape_string($question_row->question_id); ?>"
                         value="<?php echo $function::escape_string($answer_row>answer_id); ?>"/>

-HTML Output

<input type="radio" id="answer" name="answer16" value="107"/>

<input type="radio" id="answer" name="answer17" value="109"/>

<input type="radio" id="answer" name="answer15" value="104"/>

i found this function here

function findSelection(field) {
    var test = document.getElementsByName(field);
    var sizes = test.length;

    alert("Size is " + sizes);
        for (i=0; i < sizes; i++) {
            if (test[i].checked==true) {
            alert(test[i].value + ' you got a value');     
            return test[i].value;
        }
    }
}

var radioinputs = findSelection("answer");

But I do not know what to change so I can make it work with me properly

You can use `name="someName[]"` to create a array with the data. Maybe you can use that — Koen Hollander, Sep 17 '18 at 22:20
There's no need to get the value; you can create a `new FormData(form)` and pass the `
` element into it to grab all the form's values. Still, please create an [mcve], mostly by replacing the PHP parts with what ends up in the browser. — , Sep 17 '18 at 22:20
Possible duplicate of [How to get value of selected radio button?](https://stackoverflow.com/questions/15839169/how-to-get-value-of-selected-radio-button) — Matthew Spence, Sep 17 '18 at 22:22

score 1 · Answer 1 · answered Sep 17 '18 at 22:24

1

From the looks of it you have a dynamic name field, i.e. name="answer2", name="answer3", etc. Because of that your query document.getElementByName(field) will not find a field matching "answer".

To remedy this either get rid of the dynamic name or if you really need it then I would say add a class to all those radio buttons and use document.getElemenetsByClassName.

answered Sep 17 '18 at 22:24

Ronak

23
1
5

-they all have the same id can i use it – mohammed Sep 17 '18 at 22:28
No you can not use the same `id`, the general convention is to not reuse `id`s. They have to be unique. Also, you're fetching the data using `document.getElementsByName("answer")`, which means its looking at their `name` field, not `id` field. – Ronak Sep 17 '18 at 22:32

protoproto · Accepted Answer · 2018-09-18T00:13:22.420

You can structure like this:

function findSelection(field) {
    var test = document.getElementsByClassName(field);
    var sizes = test.length;

    //alert("Size is " + sizes);
    result = [];
    // result[16]=107;
    // result[17]=109;
    // result[15]=104;
    for (i=0; i < sizes; i++) {
        var index = test[i].dataset.index;
        if(test[i].checked == true){
            result[index] = test[i].value;
        }else{
            result[index] = undefined; // for a answer doesn't have a value
        }
    }
    
    return result;
}
function checkfunction(){
    var radioinputs = findSelection("radioanswer"); 
    console.log(radioinputs);
    console.log(radioinputs[15]);
};

<form id="form1">
    <input type="radio" class="radioanswer" name="answer16" data-index="16" value="107"/>

    <input type="radio" class="radioanswer" name="answer17" data-index="17" value="109"/>

    <input type="radio" class="radioanswer" name="answer15" data-index="15" value="104"/>

    <button type="button" onclick="checkfunction();"> Check </button>
</form>

A class can has multiple instances, but id has only one! And you can see document about data attributes here: https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes

How to get the selected radio buttons value?

2 Answers2