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?
4 answers
solution1
1 2016-08-22 16:25:19
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>
solution2
0 2016-08-22 07:42:52
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);
solution3
0 2016-08-22 07:43:51
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...
solution4
0 2016-08-22 07:59:10
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.