Question

I have a radio button like below

Apple
<input type="radio" id="one" name="apple" data-price="10" value="light"/> Light
<input type="radio" id="two" name="apple" data-price="20" value="dark" /> Dark
<input type="text" id="appleqty" name="appleqty" value="" />

Mango
<input type="radio" id="three" name="Mango" data-price="30" value="light"/> Light
<input type="radio" id="one" name="Mango" data-price="40" value="dark" /> Dark
<input type="text" id="Mangoqty" name="Mangoqty" value="" />

Pine Apple
<input type="radio" id="four" name="Pineapple" data-price="50" value="light"/> Light
<input type="radio" id="five" name="Pineapple" data-price="60" value="dark" /> Dark
<input type="text" id="Pineappleqty" name="Pineappleqty" value="" />

Grape
<input type="radio" id="six" name="Grape" data-price="70" value="light"/> Light
<input type="radio" id="seven" name="Grape" data-price="80" value="dark" /> Dark
<input type="text" id="Pineappleqty" name="Pineappleqty" value="" />

I this i need to create a array like below

   array
      0 => 
        array
          'apple' => string 'light' (length=10)
          'price' => string '50' (length=1)
      1 => 
        array
          'Pineapple' => string 'dark' (length=10)
          'price' => string '60' (length=1)

A Kind Note : the array key should be the radio button name, the price should be taken from data-price in radio button and i need to serilize this array
This should be done using javascript.

Answer 1

You’ll need to iterate the <input>s. In order to do so:

1. If you know beforehand the element names you’ll be looking for (i.e. apple, Mango, and so on), you can do document.getElementsByName on each of those names, as explained in In JavaScript, how can I get all radio buttons in the page with a given name?.

2. If you don’t know them (they are dynamic), just wrap them in a <div> with a given id and iterate its children, as in how to loop through some specific child nodes.

While iterating the radios of a given name, inspect the checked property of each in order to know which of them is selected, as in How can i check if a radio button is selected in javascript?.

You’ll want to build an associative array with keys the following key-value pairs, as in Dynamically creating keys in javascript associative array:

1. <input>‘s name and value attributes.
2. literal price and data-price attribute. You’ll need to use getAttribute('data-price') to get the data-price attribute’s value.

Example:

function createArray() {

    var myArr = new Array();
    myArr[0] = createSubArray('apple');
    myArr[1] = createSubArray('Mango');
    myArr[2] = createSubArray('Pineapple');
    myArr[3] = createSubArray('Grape');
    return myArr;
}


function createSubArray(name) {
    var arr = new Array();
    elems = document.getElementsByName(name);
    for (var i = 0; i < elems.length; i++) {
        if (elems[i].checked) {
            arr[name] = elems[i].value;
            arr['price'] = elems[i].getAttribute('data-price');
        }
    }
    return arr;
}​

You can see this example working in this JSFiddle.