Jquery-Dynamic Radio Buttons

Question

I am trying to create radio buttons in a container. The total number of radio buttosn is supplied from the value selected in Combobox that is in another container, when I am trying to do this, I am getting only 1 radio button displayed even the supplied number is more than 1, also I am getting those appended to the previous selection buttons, instead of that I need to clear the contents when the selection is changed and new number of buttons should only be displayed.

$(document).ready(function(){

$("#choice").change(function(){

    var radio_name=$("#choice option:selected").text();
    var a=$("#choice option:selected").val();
    var element=$('<input type="radio" name='+ radio_name +'/><br>');
    for(i=1;i <= a;i++){

       element.prependTo('#reports');
    }
 });

 });
      </script> 
     </head>
     <body>
    <div style="padding-top:20px;padding-left: 300px;color: orange;">
    Select Your Choice:&nbsp;&nbsp;<select id='choice' style="width:100px;">
       <option>Select Your Choice</option>
    <option value="4">Sales</option>
    <option value="2">Income</option>
    <option value="3">Consumer</option>
    <option value="5">Exports</option>
    </select>

    </div>
    <div id="reports" style='float: left;padding-top: 100px;color:orange;'>

    </div>

I'm not sure why moving the new input code into the prepend works, but it does http://jsfiddle.net/j08691/dyHAh/ — j08691, Jul 28 '14 at 16:07

rlatief · Accepted Answer · 2014-07-28T16:19:56.433

1

element's value can't be duplicated in the HTML.

You need to define element inside the loop, or, since I don't see any use of defining the radios into a variable you can simply do:

$("#choice").change(function(){

    $( '#reports' ).empty();

    var radio_name=$("#choice option:selected").text();
    var a=$("#choice option:selected").val();

    for(i=1;i <= a;i++)
        $( '<input type="radio" name='+ radio_name +'/><br>' ).prependTo('#reports');

});

empty() is used to clear the container.

edited Jul 28 '14 at 16:19

answered Jul 28 '14 at 16:12

rlatief

715
5
14

Hello @ rlatief, it works for me when I exclude empty statement, when I include that even I didnt get single button, Can u please help em out ? – Satya Jul 28 '14 at 16:20
hello rlatief, yeah it is working in fiddle but not in my browser, i used the same code – Satya Jul 28 '14 at 16:26
Hello @rlatief,I have another question for you, can you let me know how to generate event when the dynamically generated radio button is selected. I have tried $(".click").click(function(){}); – Satya Jul 28 '14 at 18:24

score 0 · Answer 2 · answered Jul 28 '14 at 15:58

0

Try with the following:

$(document).ready(function(){

    $("#choice").change(function(){
        var radio_name=$(this).text();
        var element=$('<input type="radio" name='+ radio_name +'/><br>');
        element.appendTo('#reports');
     });

});

Get selected item text
Create new radio element using selected item text
Append new element to reports div

Best Regards,

answered Jul 28 '14 at 15:58

jcgarcia

3,762
4
18
32

the code you provided doesn't solve his problem. it's just a little bit refactored and append was used instead of prepend. also the .change function is a pretty bad practice - you should use on('change') at least. – gulty Jul 28 '14 at 16:05

score 0 · Answer 3 · answered Jul 28 '14 at 16:06

I saw a few tweaks, like the name needs a [] to make it part of an array. And I think them main problem was that the element object being created was being reused when a new object needed to be created every time.

I tested on jsFiddle to make sure jsFiddle

$(document).ready(function(){

    $("#choice").change(function(){

        var radio_name=$("#choice option:selected").text();
        var a=$("#choice option:selected").val();
        for(i=1;i <= a;i++){
           $('<input type="radio" name="'+radio_name+'[]" /><br>').prependTo('#reports');
        }
     });

 });

score -1 · Answer 4 · answered Jul 28 '14 at 16:08

-1

In your for statement you start with i=1; and you tell the function to run until i <= a.

It doesn't matter what positive integer you set the value of a to be it will always be at least equal to if not more than i. So you're only appending once.

answered Jul 28 '14 at 16:08

tom

26
4

1

If Exports is selected, the loop reads: for(i= 1;i<5;i++) which will execute 4 times. Seems fine to me. – xDaevax Jul 28 '14 at 16:11
xDaevax ignore me, i'm talking nonsense. Time for sleep after a long nights' coding me thinks. This was the final nail haha. – tom Jul 28 '14 at 16:12

Jquery-Dynamic Radio Buttons

4 Answers4

Linked