current community

your communities

more stack exchange communities

Stack Exchange
tour help
careers 2.0
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote -1 down vote favorite
1

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.

share|improve this question
1  
Please, show the code you've got so far and explain where did you get stuck. –  Xavi López Sep 17 '12 at 9:28

1 Answer 1

up vote 2 down vote accepted

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.

share|improve this answer
    
There are lots of code examples in the questions in this very same site that the answers links to. –  Xavi López Sep 17 '12 at 10:18
2  
I've prepared a fiddle for you. What didn't you understand about the code? –  Xavi López Sep 17 '12 at 10:35
    
kindly check this the alert is not comming jsfiddle.net/sC2LC/1 –  S.Varun Sep 17 '12 at 10:43
    
you're doing the alert after the function return. –  Xavi López Sep 17 '12 at 10:45
    
there is no value is storing in the array –  S.Varun Sep 17 '12 at 10:52

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.