...

View Full Version : Checkbox not showing



wenn
12-22-2010, 07:48 AM
Hi, I have the following codes but my checkbox is not appearing. The values of the checkbox do print out in the alert. Can anyone tell me what is wrong with it? Thank you!



var table = document.getElementById('maintable');
var i; // iterator
var item; // pointer to item in received list
for(i = 0;
(item = contacts.ReturnValue.getNext()) != undefined;
++i) {
table.insertRow(i + 1);
var result = "<td>";
if(item.FirstName != undefined) {
result += item.FirstName.Value;
}
result += "</td><td>";
if(item.LastName != undefined) {
result += item.LastName.Value;
}
result += "</td><td>";
if(item.MobilePhoneGen != undefined) {
result += item.MobilePhoneGen.Value;
}
result += "</td><td>";
if(item.EmailGen != undefined) {
result += item.EmailGen.Value;
}

var td1 = document.createElement("td");
var chkbox = document.createElement('input');
chkbox.type='Checkbox';

table.rows[i + 1].innerHTML = result;
chkbox.value=item.MobilePhoneGen.Value;
td1.appendChild(chkbox);
alert(chkbox.value);
}

Philip M
12-22-2010, 09:10 AM
Your HTML is illegal. You may not have a checkbox within a <td>.

All advice is supplied packaged by intellectual weight, and not by volume. Contents may settle slightly in transit.

wenn
12-22-2010, 09:11 AM
so how should i do?

wenn
12-22-2010, 09:25 AM
i change it to the following codes the checkboxes came out but the value is empty for the second checkbox.



result += "<input type=checkbox name=chkbox>";

result += "</td>";

table.rows[i + 1].innerHTML = result;
document.contact.chkbox.value = item.MobilePhoneGen.Value;
alert(document.contact.chkbox.value);


i need to run my codes in a nokia phone. basically it's is getting all the contact from the phonebook and display it. everything show except the checkbox.

Logic Ali
12-22-2010, 09:29 AM
I just validated a checkbox within a td and in any case it would still show.

Due To I.E., form element creation is a bit more involved than with other elements.

Can you confirm there are no console errors?

Can you host a live demo?

Philip M
12-22-2010, 09:54 AM
I just validated a checkbox within a td and in any case it would still show.



Oh, you are quite right! Sorry - brain hit a bad sector! :o


Try this which works in IE:-




<html>
<head>
<script type = "text/javascript">

function addNewRow(theTable){
index = theTable.rows.length;
nextRow = theTable.insertRow(index);
chkBox = nextRow.insertCell(0);
txtBox1 = nextRow.insertCell(1);
txtBox2 = nextRow.insertCell(2);
index++;
chkBox.innerHTML = "CheckBox "+index+ " <input type=checkbox name='cbox'+index>";
indexN = (index*2)-1;
txtBox1.innerHTML = "TextBox "+indexN+ " <input type= text name ='tbx"+indexN+"'>";
indexN++;
txtBox2.innerHTML = "TextBox "+indexN+ " <input type=text name='tbx"+indexN+"'>";
}

</script>
</head>
<body>
<center>
<form name= "myform">
<table id= "myTable" cellpadding=5 cellspacing=5 border=1></table>
</form>
<br>
<input type=button value="Insert New Row" onclick="addNewRow(myTable)"><br>
</body>
</html>



Create the table, then populate it. e.g. document.myform.tbx2.value = "Whatever";

wenn
12-22-2010, 10:00 AM
I just validated a checkbox within a td and in any case it would still show.

Due To I.E., form element creation is a bit more involved than with other elements.

Can you confirm there are no console errors?

Can you host a live demo?

i need to run my codes in a nokia phone. basically it's is getting all the contact from the phonebook and display it. everything show except the checkbox.

wenn
12-22-2010, 12:13 PM
Oh, you are quite right! Sorry - brain hit a bad sector! :o


Try this which works in IE:-




<html>
<head>
<script type = "text/javascript">

function addNewRow(theTable){
index = theTable.rows.length;
nextRow = theTable.insertRow(index);
chkBox = nextRow.insertCell(0);
txtBox1 = nextRow.insertCell(1);
txtBox2 = nextRow.insertCell(2);
index++;
chkBox.innerHTML = "CheckBox "+index+ " <input type=checkbox name='cbox'+index>";
indexN = (index*2)-1;
txtBox1.innerHTML = "TextBox "+indexN+ " <input type= text name ='tbx"+indexN+"'>";
indexN++;
txtBox2.innerHTML = "TextBox "+indexN+ " <input type=text name='tbx"+indexN+"'>";
}

</script>
</head>
<body>
<center>
<form name= "myform">
<table id= "myTable" cellpadding=5 cellspacing=5 border=1></table>
</form>
<br>
<input type=button value="Insert New Row" onclick="addNewRow(myTable)"><br>
</body>
</html>



Create the table, then populate it. e.g. document.myform.tbx2.value = "Whatever";

Thank you for your help. The above codes works. :thumbsup:

wenn
12-22-2010, 12:15 PM
Thank you everyone for your replies. :) My program is working now.

wenn
12-23-2010, 09:36 AM
Oh, you are quite right! Sorry - brain hit a bad sector! :o


Try this which works in IE:-




<html>
<head>
<script type = "text/javascript">

function addNewRow(theTable){
index = theTable.rows.length;
nextRow = theTable.insertRow(index);
chkBox = nextRow.insertCell(0);
txtBox1 = nextRow.insertCell(1);
txtBox2 = nextRow.insertCell(2);
index++;
chkBox.innerHTML = "CheckBox "+index+ " <input type=checkbox name='cbox'+index>";
indexN = (index*2)-1;
txtBox1.innerHTML = "TextBox "+indexN+ " <input type= text name ='tbx"+indexN+"'>";
indexN++;
txtBox2.innerHTML = "TextBox "+indexN+ " <input type=text name='tbx"+indexN+"'>";
}

</script>
</head>
<body>
<center>
<form name= "myform">
<table id= "myTable" cellpadding=5 cellspacing=5 border=1></table>
</form>
<br>
<input type=button value="Insert New Row" onclick="addNewRow(myTable)"><br>
</body>
</html>



Create the table, then populate it. e.g. document.myform.tbx2.value = "Whatever";

Hi, i have change your code to the following but now i have a problem setting the checkbox value. i added document.contact.cbox.value = item.MobilePhoneGen.Value; but only the first checkbox has value . How do i add values into the other checkboxes too?



// filling table with received data
var table = document.getElementById('maintable');
var i; // iterator
var item; // pointer to item in received list
for (i = 0; (item = contacts.ReturnValue.getNext()) != undefined; ++i) {
index = table.rows.length;
nextRow = table.insertRow(index);
chkBox = nextRow.insertCell(0);
firstName = nextRow.insertCell(1);
lastName = nextRow.insertCell(2);
phone = nextRow.insertCell(3);
email = nextRow.insertCell(4)
index++;
chkBox.innerHTML = "<input type=checkbox name='cbox'+index>";
if (item.MobilePhoneGen != undefined) {
document.contact.cbox.value = item.MobilePhoneGen.Value;
alert(document.contact.cbox.value);

}
indexN = (index * 2) - 1;
if (item.FirstName != undefined) {
firstName.innerHTML = item.FirstName.Value;
}
indexN++;
if (item.LastName != undefined) {
lastName.innerHTML = item.LastName.Value;
}
indexN = (index * 3) - 1;
if (item.MobilePhoneGen != undefined) {
phone.innerHTML = item.MobilePhoneGen.Value;
}
indexN++;
if (item.EmailGen != undefined) {
email.innerHTML = item.EmailGen.Value;
}

Philip M
12-23-2010, 11:10 AM
See Post #6.
Create the table, then populate it. e.g. document.myform.tbx2.value = "Whatever";



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum