Need help creating radio buttons dynamically
I have a problem with setting labels and aligning dynamically generated radio buttons, I want to get a value from a textbox and use that value as a label for a newly generated radio button, I tried this code it generates a radio, but it doesn't give it labels (the one which is retrieved from the textbox) and it generates the radio buttons horizontally not vertically:
HTML:
<input type="text" name="option" id="option" value="" /><br>
<div id="AddButton" data-role="button" data-inline="true">Add</div>
<div data-role="fieldcontain">
<fieldset data-role="controlgroup">
<legend>Choose an Option:</legend><br><br>
<div id="after">
</div>
</fieldset>
</div>
JavaScript:
<script>
function createRadioElement(elem, label, checked) {
var input = document.createElement('input');
input.type = 'radio';
input.label = value;
if (checked) {
input.checked = 'checked';
}
elem.parentNode.insertBefore(input,elem.nextSibling)
}
$( '#admin' ).live( 'pageinit',function(event){
$('#AddButton').click(function(){
var x = document.getElementById('option').value
createRadioElement(this,$('#option').val());
});
});
</script>
source to share
You can do something like
$('#AddButton').click(function(){
var label = document.getElementById('option').value;
$radio = $('<input />', { type: "radio" });
var $label = $('<label />', { text: label});
var wrapper = $('<div />');
wrapper.append($label).append($radio);;
$('div#after').append(wrapper);
});
fiddle here http://jsfiddle.net/h8g6S/
source to share
Since you are using jQuery, you can use the method .clone()
to copy the existing piece of markup. What I am doing is "hide" the section of the template outside of the form, then copy what I need and change the attributes (like "name", "id", etc.) as needed.
Here's the API link: http://api.jquery.com/clone/
EDIT: Here's an example ...
<div id="radiobtn_tmpl">
<input type="radio" class="rdio btn" />
<label class="rdio lbl" for=""></label>
</div>
...
stuff here...
...
<script>
var _template = $('#radiobtn_tmpl').clone();
_template.removeAttr('id');
_template.find('.rdio.btn').attr({ 'name' : "teh_button", 'id' : "teh_button" });
_template.find('.rdio.lbl').attr({ 'for' : "teh_button" }).html('Your label text');
$(_template).appendTo($('#after'));
</script>
source to share
This should help you:
function createRadioElement(elem, label, checked) {
var id = 'option1_' + label;
$('#after').append($('<input />', {
'type': 'radio',
'name': 'option1',
'id': id,
'value': '1'
}));
$('#after').append('<label for="' + id + '">'
+ label + '</label><br />');
}
$('#AddButton').click(function(){
var x = document.getElementById('option').value;
createRadioElement(this,$('#option').val());
});
See demo: http://jsfiddle.net/HaBhk/2/
source to share
I see many answers here on how to add radio buttons dynamically using jQuery, but not many show how to improve dynamic radio buttons using jQuery Mobile.
The trick is to call the .checkboxradio()
newly created switches.
If you change the values programmatically later, you call .checkboxradio('refresh')
Demo here: http://jsfiddle.net/kiliman/4wDU7/7/
$(document).bind('pageinit', function(e, data) {
var $container = $('#optionsgroup').find('.ui-controlgroup-controls');
// build radio button list
for (var i = 0; i < 3; i++) {
var id = 'option_' + i,
label = 'Option ' + i;
$('<input />', {
'id': id,
'type': 'radio',
'name': 'options',
'value': i
})
.append('<label for="' + id + '">' + label + '</label>')
.appendTo($container);
}
// enhance radio buttons
$container.find('input[type=radio]').checkboxradio();
});
source to share