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
– RST, Commented Aug 22, 2016 at 7:42
@user2181397 returnedData.splice(j,1) returns an array devoid of duplicate values. — Aniruddha Bhondwe
– Aniruddha Bhondwe, Commented Aug 22, 2016 at 8:05

caldera.sac · Accepted Answer · 2016-08-22 16:25:19Z

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>

Shakir Ahamed · Accepted Answer · 2016-08-22 07:42:52Z

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, 2016 at 7:42

Shakir Ahamed

1,3163 gold badges16 silver badges40 bronze badges

1 Comment

Aniruddha Bhondwe Over a year ago

what is newDiv.value ? It is undefined.

Community · Accepted Answer · 2017-05-23 12:15:03Z

0

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...

edited May 23, 2017 at 12:15

CommunityBot

11 silver badge

answered Aug 22, 2016 at 7:43

Robin Ostwald

335 bronze badges

Comments

Roma · Accepted Answer · 2016-08-22 07:59:10Z

0

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>

answered Aug 22, 2016 at 7:59

Roma

2921 silver badge12 bronze badges

Collectives™ on Stack Overflow

Add Radio buttons to Html form using Javascript or Jquery

4 Answers 4

Comments

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related