i have a problem in creating radio buttons dynamically, i have a text box and a button, i asked the user to input a value in the text field then i retrieve the text box value and use it to create a radio button when he press a button, i tried this code in javaScript but it doesn't create a radio button on clicking the specified button:

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

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

        return radioFragment.firstChild;
    }

    $( '#admin' ).live( 'pageinit',function(event){

        $( "#AddButton" ).bind( "click", function(event, ui) {

            var x=document.getElementById('option').value

            createRadioElement(x, checked);
        });
    });
</script> 

`

i have a problem in creating radio buttons dynamically, i have a text box and a button, i asked the user to input a value in the text field then i retrieve the text box value and use it to create a radio button when he press a button, i tried this code in javaScript but it doesn't create a radio button on clicking the specified button:

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

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

        return radioFragment.firstChild;
    }

    $( '#admin' ).live( 'pageinit',function(event){

        $( "#AddButton" ).bind( "click", function(event, ui) {

            var x=document.getElementById('option').value

            createRadioElement(x, checked);
        });
    });
</script> 

`

• javascript
• jquery
• dom

Share Follow edited Mar 5, 2012 at 21:25 Colin Brock 21.6k99 gold badges4949 silver badges6262 bronze badges asked Mar 5, 2012 at 21:21 Eslam HamdyEslam Hamdy 7,3962727 gold badges107107 silver badges167167 bronze badges 2

• well it seems you know how to create an element since you create that div so why don't you create the input type=radio as well? – Liviu T. Commented Mar 5, 2012 at 21:26
• @Eslam I believe mVChr has the best answer (he beat me to it). I did rewrite your code a bit for legibility though: jsfiddle/t6m8M/1 – Jeffrey Sweeney Commented Mar 5, 2012 at 21:39

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

Try the following for the creation of a radio input:

function createRadioElement(elem, value, checked) {
    var input = document.createElement('input');
        input.type = 'radio';
        input.value = value;
        if (checked) {
            input.checked = 'checked';
        }

    elem.parentNode.insertBefore(input, elem.nextSibling);
}

JS Fiddle demo.

---

References:

• createElement().
• insertBefore().
• parentNode.

Here are the problems as I can see them:

• In your #AddButton click function, you pass a variable checked which does not exist.
• You don't pass the element returned from createRadioElement to anything that will insert it into the DOM

I fixed those by basically changing your #AddButton click function to the following:

$("#AddButton").bind("click", function(event) {
    var x = document.getElementById('option').value,
        $ra = $('#RadioArea');

    $ra.html(createRadioElement(x, true));
});​

You'll probably want to change this so it appends the radio button to the end of whatever your #RadioArea element is instead of replacing the contents pletely.

See demo