Get a Radio Button Value Array with JS

Question

Let's say I've got a form like this:

<form id="formid" action="?a=do" method="POST" onChange="doSomething();>
    <input type="radio" name="buttonGroup_A[1]" value="1">
    <input type="radio" name="buttonGroup_A[1]" value="3">
    <input type="radio" name="buttonGroup_A[1]" value="2">

    <input type="radio" name="buttonGroup_A[2]" value="1">
    <input type="radio" name="buttonGroup_A[2]" value="3">
    <input type="radio" name="buttonGroup_A[2]" value="2">

    <input type="radio" name="buttonGroup_B[1]" value="1">
    <input type="radio" name="buttonGroup_B[1]" value="3">
    <input type="radio" name="buttonGroup_B[1]" value="2">

    <input type="radio" name="buttonGroup_B[2]" value="1">
    <input type="radio" name="buttonGroup_B[2]" value="3">
    <input type="radio" name="buttonGroup_B[2]" value="2">

    <input type="radio" name="buttonGroup_B[3]" value="1">
    <input type="radio" name="buttonGroup_B[3]" value="3">
    <input type="radio" name="buttonGroup_B[3]" value="2">
</form>

The number of groups (and their name) is unknown. Now I want to forward that data to a soap interface. However, to do so I need an array of 1. the groups and 2. of the selected values:

Result should be something like

array (
    "buttonGroup_A" => array(
        "1" => 2,
        "2" => 3
    ),
    "buttonGroup_B" => array(
        "1" => 1,
        "2" => 3,
        "3" => 2
    )
)

What I'm basically looking for is the function doSomething()

function doSomething() {
    var resultArray;
    // Clever magic happens here
    return resultArray;    
}

Sidenotes:

The index of the buttonGroup is an UID of an entity
If needed the available (or expected) group names (like buttonGroup_A) could be loaded via a soap interface

Terry Seidler · Accepted Answer · 2014-12-04 10:54:29Z

1

JavaScript arrays have numeric keys, so array("buttonGroup_A"... will never work.

This is what I came up with for filling an object:

function doSomething(oEvent) {
    var resultObj = {};
    var radios = $('input[type="radio"]', $('#formid'));

    // Parse group/uid regex
    var regex = /(.*)\[(\d+)\]/;

    // Get all the radios
    for(var i=0; i<radios.length; i++) {
        var radio = $(radios[i]);

        // If this isn't checked, skip it
        if(radio.is(':checked') === false) { continue; }

        var results = radio.attr('name').match(regex);
        if(results) {
            var group = results[1];
            var uid = results[2];

            // add the group/values
            if (typeof resultObj[group] === 'undefined') {
                resultObj[group] = [];
            }
            resultObj[group][uid] = radio.val();
        }            
    }
    console.log(resultObj);
}

http://jsfiddle.net/ewub9agt/4/

answered Dec 4, 2014 at 10:54

Terry Seidler

2,04316 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Terry Seidler Over a year ago

(instead of using an object containing arrays, I'd prefer to use a 100% object :))

eLBo Over a year ago

That's pretty much what I was looking for. Thank's. I changed a few thinks, the selector for instance: $('#preferences :radio:checked');

Stanislav · Accepted Answer · 2014-12-04 11:39:45Z

function doSomething() {
    var results = [];
    var regex = /[\[\]]/;

    var form = document.getElementById('formid');
    var inputs = form.getElementsByTagName('input');

    for (i = 0; i < inputs.length; i++) {
        if (inputs[i].checked) {
            var parts = inputs[i].name.split(regex);
            var group = parts[0];
            var index = parts[1];

            if (results[group] == undefined) {
                results[group] = [];
            }

            results[group][index] = inputs[i].value;
        }
    }

    console.log(results);
}

<form id="formid" action="?a=do" method="POST" onChange="doSomething();">
    <input type="radio" name="buttonGroup_A[1]" value="1">
    <input type="radio" name="buttonGroup_A[1]" value="3">
    <input type="radio" name="buttonGroup_A[1]" value="2">

    <input type="radio" name="buttonGroup_A[2]" value="1">
    <input type="radio" name="buttonGroup_A[2]" value="3">
    <input type="radio" name="buttonGroup_A[2]" value="2">

    <input type="radio" name="buttonGroup_B[1]" value="1">
    <input type="radio" name="buttonGroup_B[1]" value="3">
    <input type="radio" name="buttonGroup_B[1]" value="2">

    <input type="radio" name="buttonGroup_B[2]" value="1">
    <input type="radio" name="buttonGroup_B[2]" value="3">
    <input type="radio" name="buttonGroup_B[2]" value="2">

    <input type="radio" name="buttonGroup_B[3]" value="1">
    <input type="radio" name="buttonGroup_B[3]" value="3">
    <input type="radio" name="buttonGroup_B[3]" value="2">
</form>

Collectives™ on Stack Overflow

Get a Radio Button Value Array with JS

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related