Add Radio buttons to Html form using Javascript or Jquery

Question

In my HTML code I have

<form id="approve">
    <input name="myDate" id="monthYearPicker" />
    <button type="button"onclick="monthlytimesheets()">Submit</button>
</form>

In my Javascript file I have the following:-

function monthlytimesheets() {
    $.post('http://localhost:8000/timer/monthly_timesheet/',
        function(returnedData) {
            for(i=0;i<returnedData.length;i++) {
                for(j=i+1;j<returnedData.length;j++) {
                    if(returnedData[i]['id']==returnedData[j]['id']) {
                        returnedData.splice(j,1)
                    }
                }
            }
        });

Now i want my returnedData[i]['full_name'] rendered on html page as radio buttons. How can i do that. How do you dynamically create radio buttons from JS? Also can i assign values to these radio buttons?

Find some documentation on how append() works. On another note you should put the `returnedData.length` value in a variable instead of recalculating it over and over. — RST, Aug 22 '16 at 07:42
@user2181397 returnedData.splice(j,1) returns an array devoid of duplicate values. — Aniruddha Bhondwe, Aug 22 '16 at 08:05

score 1 · Answer 1 · answered Aug 22 '16 at 16:25

you can create radio buttons easily using jquery as you want. I wrote a code to show how to create radio button dynamically. automatically and when a button clicked.change the inside conditions as your needs. try below code.

<html>
<head></head>
<title></title>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>


<body>


<!-- Example one , add radio button using jquery automatically-->
<h1>Example one , add radio button using jquery automatically</h1>
<form id="approve">
    <input name="myDate" id="monthYearPicker" />
    <div class="lastone"></div>
</form>

<br><br><hr>
<!-- Example two, add radio button using jquery when button click-->
<h1>Example two, add radio button using jquery when button click-</h1>
<form id="approveone">
    <input name="myDate" id="monthYearPicker" />
    

    <div class="lasttwo"></div>
    <input type="button" id="addradio" value="submit">
</form>



</body>

<script type="text/javascript">

$(document).ready(function(){

    for(var i=0;i<5;i++)
    {
      var labelname = "radio button"+i;
      var value = i;
      var create = $('<input type="radio" value="'+value+'"><label>'+labelname+'</label><br>');
      $(".lastone").append(create);
    }

});


$(document).ready(function(){
  $("#addradio").click(function(){
    
    for(var i=0;i<9;i++)
    {
      var labelname = "radio button"+i;
      var value = i;
      var create = $('<input type="radio" value="'+value+'"><label>'+labelname+'</label><br>');
      $(".lasttwo").append(create);
    }


  });
  
});

</script>

</html>

score 0 · Answer 2 · answered Aug 22 '16 at 07:42

0

You can create elements dynamically like this

var content = document.createElement('div');    
var newElement = document.createElement('input');
newElement.setAttribute('type', 'radio');

newElement.value = "Your value";   ///Here you can assigned value to the radio button

content.appendChild(newElement);

answered Aug 22 '16 at 07:42

Shakir Ahamed

1,290
3
16
39

what is newDiv.value ? It is undefined. – Aniruddha Bhondwe Aug 22 '16 at 07:52

score 0 · Answer 3 · edited May 23 '17 at 12:15

Create a function that returns a radio element. Similar question was already asked.

It can be found here: How do you dynamically create a radio button in Javascript that works in all browsers?

function createRadioElement(name, checked) {
  var radioHtml = '<input type="radio" name="' + name + '"';
  if ( checked ) {
      radioHtml += ' checked="checked"';
  }
  radioHtml += '/>';

  var radioFragment = document.createElement('div');
  radioFragment.innerHTML = radioHtml;

  return radioFragment.firstChild;
}

Note that this is the snipped from the answer of the posted link, published by Prestaul.

Would have postet it as comment, but need 50rep to comment...

score 0 · Answer 4 · answered Aug 22 '16 at 07:59

function monthlytimesheets()
{
 var name = $('#monthYearPicker').val();
 $('#approve').append('<input type="radio" />'+name);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<form id="approve">
    <input name="myDate" id="monthYearPicker" />
    <button type="button"onclick="monthlytimesheets()">Submit</button>
</form>

Add Radio buttons to Html form using Javascript or Jquery

4 Answers4