How to I create radio buttons dynamically assigning them values entered by user?

Question

I have just started learning jQuery. I was trying to make a todo list from user inputs. I have attempted to capture the value from input field and pass on to the input type of radio. But though, the value is passed, the created element is not displaying the user input. My code is given below

jQuery

$("#addtodo").click(function(){
    var newtodo = $("#todoinputval").val(); /*Getting input value when and                                            storing it*/

    $("#todoinputval").val(" "); /*Resetting input field*/

    var newradio = $("<input type='radio'>").val(newtodo); /*creating a variable to be appended to my desired div */

    $("#radiotodo").append(newradio); /* Appending it to my desired div*/
});

HTML

<input id="todoinputval" type="text"><br>
<button id="addtodo">Add</button>
<div id="radiotodo"></div>

A radio button does not contains any kind of visible text that the user will see. If you want to display some text next to the input, you have to add something like an label — Carsten Løvbo Andersen
– Carsten Løvbo Andersen, Commented Feb 26, 2019 at 15:03
@CarstenLøvboAndersen I wanted to create a list of radio buttons, where each contains input from the user. — zorbamj
– zorbamj, Commented Feb 26, 2019 at 15:12
What do you mean with "contains the input", should the radio button have the value or? because that is already what you have — Carsten Løvbo Andersen
– Carsten Løvbo Andersen, Commented Feb 26, 2019 at 15:16
@CarstenLøvboAndersen I want the radio button to display the user input. — zorbamj
– zorbamj, Commented Feb 26, 2019 at 16:39

Carsten Løvbo Andersen · Accepted Answer · 2019-02-26 15:08:55Z

If you want to display some text next to your radio, i suggest that you use a label and bind it to the radio with the attribute for.

$("#addtodo").click(function() {
  var newtodo = $("#todoinputval").val();
  var inputCount = $("#radiotodo input").length;
  $("#todoinputval").val("");
  var newradio = $("<input type='radio'>").val(newtodo).attr("id","radio"+inputCount);
  var RadioLabel = $("<label>").attr("for","radio"+inputCount).text(newtodo);
  $("#radiotodo").append(newradio).append(RadioLabel); 
});

Working demo

$("#addtodo").click(function() {
  var newtodo = $("#todoinputval").val();
  var inputCount = $("#radiotodo input").length;
  $("#todoinputval").val(""); /*Resetting input field*/
  var newradio = $("<input type='radio'>").val(newtodo).attr("id","radio"+inputCount);
  var RadioLabel = $("<label>").attr("for","radio"+inputCount).text(newtodo);
  $("#radiotodo").append(newradio).append(RadioLabel); /* Appending it to my desired div*/
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="todoinputval" type="text"><br>
<button id="addtodo">Add</button>
<div id="radiotodo"></div>

chandra shekhar joshi · Accepted Answer · 2019-02-26 15:05:14Z

1

                 <!DOCTYPE html>
                 <html>
                <head>
               <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
               <script>
              $(document).ready(function(){
                $("#addtodo").click(function(){
                var value=$('#todoinputval').val();
                 $('#radiotodo').append('<input type="radio"  value="'+value+'">                            '+value+'<br>');
                });
           });
       </script>
      </head>
      <body>

       <input id = "todoinputval" type = "text"><br>
       <button id ="addtodo">Add</button>
       <div id= "radiotodo"></div>

     </body>
      </html>

please try this

answered Feb 26, 2019 at 15:05

chandra shekhar joshi

16312 bronze badges

2 Comments

Carsten Løvbo Andersen Over a year ago

You should always add an explanation to why this helps and solves the OP's problem

chandra shekhar joshi Over a year ago

thanks for suggestion....I will keep this in my mind in my future answer :)

Collectives™ on Stack Overflow

How to I create radio buttons dynamically assigning them values entered by user?

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related