Question

I am trying to create a dynamic form so on click of a button I call a Javascript function. here is the function:

function addradiobutton(type){
    var element = document.createElement("input");
    //Assign different attributes to the element.
    element.setAttribute("type", type);
    element.setAttribute("value", type);
    element.setAttribute("name", type);   

    var foo = document.getElementById("fooBar");
    //Append the element in page (in span).
    foo.appendChild(element);
    counter=counter+1;
 }

This code adds a radio button and its tag is like this

<input type="radio" name="radio" value="radio">

But I want to make this code like this.

 <input type="radio" name="radio" value="radio">WATER</input>

I dont mind about closing input tag but I want to get the value ‘Water’ their at the end of the code.
Water is just taken for example its value would be dynamic as well.
What should I do ?

Answer 1

Try this

<script type="text/javascript">
        var counter = 0;
        function addradiobutton(type, text) {
            var label = document.createElement("label");

            var element = document.createElement("input");
            //Assign different attributes to the element.
            element.setAttribute("type", type);
            element.setAttribute("value", type);
            element.setAttribute("name", type);

            label.appendChild(element);
            label.innerHTML += text;

            var foo = document.getElementById("fooBar");
            //Append the element in page (in span).
            foo.appendChild(label);
            counter = counter + 1;
        }
        addradiobutton("radio", "Water");
</script>