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.

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.

• javascript

Share Improve this question Follow asked Sep 17, 2012 at 9:26 Varun SridharanVarun Sridharan 1,97822 gold badges2121 silver badges5656 bronze badges 1

• 1 Please, show the code you've got so far and explain where did you get stuck. – Xavi López Commented Sep 17, 2012 at 9:28

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 3

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.