Checkboxes not showing in Page Source

[developer155]

I am loading checkboxes dynamically with JS on my page. I see the checkboxes on the pages when it runs but they are not in Page Source and most importantly they do not retain their values. This is the funtion
function makeCheckboxes(str) {
var a = document.getElementById(newsletters);

var oRow; var oCell; oRow = a.insertRow(); oCell = oRow.insertCell();

var arr = str.split(",");
var returnStr = "";
for (i = 0; i < arr.length; i++) {
var arr2 = arr.split("?");
returnStr += '<input type="checkbox" value="' + arr2[1] + '" />' + arr2[0] + "<br>";
}
oCell.innerHTML = returnStr;

}

 

[kaht]

I couldn't really find a question in your post.... but I'll explain based on your thread title.

When doing a view source of a webpage you will only see what is served to the page from the server. Since the code runs on the client's machine that generates the checkboxes, you do not see it when viewing the source code. If you want to see the "generated" code, then there's a few tricks to do this. The easiest is to use Firefox for your browser and download the web developer's toolbar. On it, under the "View Source" menu, there is a "View Generated Source" option. That will show you your checkboxes in the code.

As for the boxes not staying checked, I can only assume that you mean after the page is submitted or reloaded. That being the case, you have to explicitly check them when they are being created. In your case it would mean adding in some code like this:

returnStr += '<input type="checkbox"  value="' + arr2[1] + '" [!]checked="checked"[/!] />' + arr2[0] + "<br>";

Now.... obviously this would load up all your checkboxes in the checked status when it's ran inside your loop. To fix this you will need to place some kind of conditional statement to see whether or not the checked status should get set for each checkbox. This would require you to capture which boxes where checked when the page is submitted (on the server) and then throw that information to the client when the page is reloaded.

Or.... you could just do this whole loop server side like most other people do, and then you won't have to rely on javascript to generate the page for you. Additionally, the checkboxes will then show up in the "view source" of the page. What do you expect to happen with the method you posted above if your users have javascript disabled? Javascript is a tool that should be used to enhance your site, not control it. Otherwise you run the risk of having a non-functional page when javascript-disabled users visit your site.

-kaht

http://www.silkypups.com

[small](All puppies have now found loving homes, thanks for all who showed interest)[/small]

 

[developer155]

kaht, I dont get this:
returnStr += '<input type="checkbox" value="' + arr2[1] + '" checked="checked" />' + arr2[0] + "<br>";

I do not want ANY of my checkboxes being checked when the page first loads. All of them need be be clear

 

[kaht]

Did you read anything besides what I posted in the code box, or did you just copy/paste it and expect it to work?

Now.... obviously this would load up all your checkboxes in the checked status when it's ran inside your loop. To fix this you will need to place some kind of conditional statement to see whether or not the checked status should get set for each checkbox.

Maybe you could be a bit more clear about what your question actually is. Most questions end with a ? mark, but in your original post there was none, so I had to do a bit of guessing about what exactly you were having a problem with.

-kaht

http://www.silkypups.com

[small](All puppies have now found loving homes, thanks for all who showed interest)[/small]

 

[dwarfthrower]

I am loading checkboxes dynamically with JS on my page. I see the checkboxes on the pages when it runs but they are not in Page Source

The page source is - funnily enough - the source page that resides on a file system somewhere which the browser renders and processes. The reason why your checkboxes are not in the page source when you view it from the browser is that they were never in the page source to begin with because, as you pointed out - you are loading them dynamically with JS.

As for not holding their values... I'm with kaht on this one and have no real idea of what you are trying to tell us? Are you submitting the form and getting no data from the checkboxes?

_{Never be afraid to share your dreams with the world.
There's nothing the world loves more than the taste of really sweet dreams.}
Enable Apps

 

[kaht]

It's been a while dwarfthrower, where ya been? Glad to see ya back.

-kaht

http://www.silkypups.com

[small](All puppies have now found loving homes, thanks for all who showed interest)[/small]

 

[dwarfthrower]

Oh I phase in and out of circulation. Depends on the workload, kidload and other competing interests. Good to be back in such esteemed company.

_{Never be afraid to share your dreams with the world.
There's nothing the world loves more than the taste of really sweet dreams.}
Enable Apps

 

[developer155]

Kaht, thansk so much for your replies, they help me a lot. Sorry I am not explaining everything but it would take a page
Can you help me with this. Like we know, I am generating dynamic checkboxes. They each have a unique ID. Now I need to assign the value of the checkbox to some form element. I created onclick event, but how can I get and assign the selected values? Here is my code

function makeCheckboxes(str) {
var a = document.getElementById(newsletters);

var oRow; var oCell; oRow = a.insertRow(); oCell = oRow.insertCell();

var arr = str.split(",");
var returnStr = "";

for (i = 0; i < arr.length; i++) {
var arr2 = arr.split("?");

var id = newsletters + "_" + i;
alert (id);
returnStr +="<input type='checkbox' onclick='SetValue()' id='" + id + "' name=' " + arr2[1] + "' value='" + arr2[1] + "'/>" + arr2[0] + "<br>";
}
oCell.innerHTML = returnStr;

}
function SetValue()
{
alert ("I am here");
var a = document.getElementById(newsletters);
a.value = ???
}

Thanks!!

 

[kaht]

I see, this is starting to make a little more sense. When you click the checkbox you are trying to pull the value from the checkbox. So, pass a reference to the checkbox element to the SetValue function and extract the value that way:

returnStr +="<input type='checkbox'  onclick='SetValue([!]this[/!])'  id='" + id + "'  name=' " + arr2[1] + "' value='" + arr2[1] + "'/>" + arr2[0] + "<br>"; 
.
.
.
function SetValue([!]obj[/!]) {
   [gray][i]//always properly indent your code, it makes it 100 times easier to debug[/i][/gray]
   alert ("I am here");
   [gray][i]//where is newsletters defined?[/i][/gray]
   var a = document.getElementById(newsletters);
   a.value = [!]obj.value[/!];
}

-kaht

http://www.silkypups.com

[small](All puppies have now found loving homes, thanks for all who showed interest)[/small]

 

[developer155]

kaht, here is the problem i am having, I will try to explain and show all code. I have a page where I use HS and AJAX calls. AJAX makes a call to RetirementIncome.aspx page thtt gets a bunch of newsletters for a given zipcode. I am dynamically creating checkboxes based on that. You will see "newsletter" in the code. Newsletter variable has the value of the table element to which I am appending dynamic checkboxes. Now there is a validator that is looking at the element that newsletter hold id for.
All checkboxes are showing fine but after I submit to server validator complains. I guess somehow when checkbox is checked I need to retain that value and then whe I am populating checkboxes after potback, show that. How to do that? Here is the complete code


<%--FOR MEMO FIELD TO SPAN ALL COLUMNS, USE CODE BELOW--%>
<tr>
<td colspan="3">
<b></b>
<script>

var http_request = false;
function makePOSTRequest(url, parameters, callback) {
http_request = false;
if (window.XMLHttpRequest) { // Mozilla, Safari,...
http_request = new XMLHttpRequest();
if (http_request.overrideMimeType) {
// set type accordingly to anticipated content type
//http_request.overrideMimeType('text/xml');
http_request.overrideMimeType('text/html');
}
} else if (window.ActiveXObject) { // IE
try {
http_request = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
http_request = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {}
}
}
if (!http_request) {
//alert('Cannot create XMLHTTP instance');
return false;
}

http_request.onreadystatechange = callback;
http_request.open('POST', url, true);
http_request.setRequestHeader("Content-type", "application/x-

http://www-form-urlencoded");

http_request.setRequestHeader("Content-length", parameters.length);
http_request.setRequestHeader("Connection", "close");
http_request.send(parameters);
}

function callback()
{

if (http_request.readyState == 4)
{
if (http_request.status == 200)
{
result = http_request.responseText;
eval(result);
}
}
}

function makeCheckboxes(str) {
var a = document.getElementById(newsletters);

var oRow; var oCell; oRow = a.insertRow(); oCell = oRow.insertCell();

var arr = str.split(",");
var returnStr = "";

for (i = 0; i < arr.length; i++) {
var arr2 = arr.split("?");

var id = newsletters + "_" + i;
alert (id);
returnStr +="<input type='checkbox' onclick='RetainValue(this)' id='" + id + "' name=' " + arr2[1] + "' value='" + arr2[1] + "'/>" + arr2[0] + "<br>";
}
oCell.innerHTML = returnStr;

}
function RetainValue(obj)
{
???? what

}

function getCheckboxes()
{
makePOSTRequest("RetirementIncome.aspx?cb=makeCheckboxes&zip=" + escape(document.getElementById(zipcode).value) , "", callback);

}


getCheckboxes();


alert(newsletters.value);

</script>


</td>
</tr>