Tell me more ×
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
@SVarun Now only i am learning about javascript so i am trying.. but not yet got the answer... sorry now i am unable to give your the source that i have tried – S Varun Sep 17 '12 at 9:29

1 Answer

up vote 0 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
i need to create a array when any of the radio button is clicked – S Varun Sep 17 '12 at 10:14
can you show me an example code sir – S Varun Sep 17 '12 at 10:16
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
I am realy unable to understand those code so kindly if possible show me an example of the need.. please – S Varun Sep 17 '12 at 10:21
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
show 6 more comments

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.