Problem setting the value or name attribute on a dynamically created radio button

Question

I am trying to dynamically generate a group of radio button, however when I add a radiobutton with jQuery the name attribute is not set properly.

        var radioButtonInput = document.createElement("input")
        var groupId = groupNodes[i].getAttribute("id");
        var groupName = groupNodes[i].getAttribute("displayName");

        $(radioButtonInput).attr("type","radio");
        $(radioButtonInput).attr("name","radioGroup");
        $(radioButtonInput).attr("id", groupId);

        $("#meetingType h2").after(radioButtonInput);

The radio buttons are created correctly but the name attribute is not present. I've tried to use the html dom attribute .name but it generates the same result.

Answer 1

Try this :

var groupId = groupNodes[i].getAttribute("id");
var groupName = groupNodes[i].getAttribute("displayName");
var radioButtonInput = $("<input>", { "type" : "radio", "id" : groupId, "name" : "radioGroup"});

$("#meetingType h2").after(radioButtonInput);

where do you use groupName because here the input name will be "radioGroup" and not groupName

Answer 2

I would go for the most straightforward way:

$("#meetingType h2").after('<input type="radio" id="' + groupNodes[i].id + '" name="' + groupNodes[i].getAttribute("displayName") + '" />');

If still no luck please elaborate on "name attribute is not present" - how can you tell that? How do you check?