CODEWITHSUNDEEP
javascriptjqueryhtmlpost
Aniruddha Bhondwe
Aniruddha Bhondwe

Reputation: 831

Add Radio buttons to Html form using Javascript or Jquery

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?

Upvotes: 1

Views: 4879

Answers (4)

caldera.sac
caldera.sac

Reputation: 5088

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>

Upvotes: 1

Roma
Roma

Reputation: 282

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>

Upvotes: 0

Robin Ostwald
Robin Ostwald

Reputation: 33

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

Upvotes: 0

Shakir Ahamed
Shakir Ahamed

Reputation: 1308

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);

Upvotes: 0

Related Questions