CODEWITHSUNDEEP
javascriptcheckboxcreateelement
reba elliott
reba elliott

Reputation: 79

javascript checkbox create element

I am trying to add a checkbox list to a form. When I use the following code, I get all the items in the array but no checkboxes, so I cannot select anything. I'm sure there is a very simple solution to this, but I can't see what I'm doing wrong (I'm new at this). Many thanks in advance for your help. Here is the code:

var check_value = new Array()
check_value[0] = "I work at home"
check_value[1] = "Train/Subway"
check_value[2] = "Walk"
check_value[3] = "Bicycle"

for(count in check_value)
    {
    var ptworkinfo=document.createElement("input");
    ptworkinfo.type="checkbox";
    ptworkinfo=(check_value[count] + "</br>");
    ptworkinfo.id="ptworkinfo";
    document.write(ptworkinfo);
    count+=count;
    }

Upvotes: 5

Views: 41415

Answers (4)

Teja Goud Kandula
Teja Goud Kandula

Reputation: 1574

First create an element of type input. Then set it is type property to checkbox. This can be done in any of the 2 ways mentioned below.

const checkBox = document.createElement('input')
checkBox.type = 'checkbox'

Properties can be set using setAttribute function also. The first argument states what property is being updated. Here type property is updated to the type of checkbox.

checkBox.setAttribute('type','checkbox')

Upvotes: 1

reba elliott
reba elliott

Reputation: 79

Here is the new code, updated from suggestions above (thank you). I am now getting a row of checkboxes with no text next to them. Also, weirdly, there is not a break after each checkbox, either. It's like the line " ptworkinfo.value=(check_value[count] + '< br/>'); " just isn't getting through. Any thoughts/suggestions? 

var residence = document.getElementById('residence');

var check_value = new Array( )
check_value[0] = "I work at home"
check_value[1] = "Train/Subway"
check_value[2] = "Walk"
check_value[3] = "Bicycle"

for(var count in check_value)
    {
    var ptworkinfo=document.createElement("input");   
    ptworkinfo.value=(check_value[count] + '</br>');
    ptworkinfo.type="checkbox";
    ptworkinfo.id="ptworkinfo" + count;
    residence.appendChild(ptworkinfo);
    }

Upvotes: 0

Tejs
Tejs

Reputation: 41236

There are a couple of problems here:

1) Never use document.write - The standard, pure javascript implementation you need to be using is to appendChild to a parent element. For example:

var parentElement = document.getElementById('myParentElement');

if(parentElement != null)
   parentElement.appendChild(myChildElement);

2) Using this knowledge, you can easily add elements with a simple rework of your statements:

var parentElement = document.getElementById('myParentElement');

for(var count in check_value)
{
    var newCheckBox = document.createElement('input');
    newCheckBox.type = 'checkbox';
    newCheckBox.id = 'ptworkinfo' + count; // need unique Ids!
    newCheckBox.value = check_value[count] + '<br/>';

    parentElement.appendChild(newCheckBox);
}

Upvotes: 14

Shawn Steward
Shawn Steward

Reputation: 6825

Looks like you just forgot to put .value on one of your lines. Instead, it is overwriting the variable you created as an input box with a string.

...
    ptworkinfo.value =(check_value[count] + "</br>");
...

Upvotes: 2

Related Questions