Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations John Tel on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Creating dynamic checkboxes based on array 1

Status
Not open for further replies.
developer155

developer155

Programmer
Jan 21, 2004
512
US
Hi,
can someone help me out with this:
I need a function that accepts string and then creates dynamic checkboxes based on the string elements. PLease review what I have,let me know if this is wrong or not

function CreateCheckboxes(var data1)
{
var data = data1.split(",")

var s = document.getElementById(zipHtmlId);
for(var c=0 ; c<data.length ; c++)
{
var checkbox = new checkbox(data[c], data[c]);

s.Checkboxes[c] = checkbox;


}



}


}
 
Sort by date Sort by votes
I'm not 100% positive, but I don't think checkbox is a valid object. I could be wrong, but I've never used it before. That being the case, var checkbox = new checkbox(data[c], data[c]); wouldn't do anything (unless it's a custom class you've created that you're not showing us).

In addition, Checkboxes is not a valid attribute for an HTML element, so s.Checkboxes[c] is probably giving you problems as well.....

What does the string look like that you're passing to this function? There looks to be a lot of problems with your code.

-kaht

[small](All puppies have now found loving homes, thanks for all who showed interest)[/small]
 
Upvote 0 Downvote
nope I do not have Checkbox custom class.
the string looks like this:
var s = "One,Two,Three";

Basically I need to split it based on comma, loop through values and create a checkbox for each string
 
Upvote 0 Downvote
Well.... I wanted to try and give you suggestions to help you figure it out, but your code is really beyond repair, so here's an example to help you get started:
Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml">[/URL]
<head>
<title>test</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<script type="text/javascript">

function makeCheckboxes(str) {
   var a = document.getElementById("blah");
   var arr = str.split(",");
   var returnStr = "";
   for (i = 0; i < arr.length; i++) {
      returnStr += '<input type="checkbox" name="theCheckbox" value="' + arr[i] + '" />' + arr[i];
   }
   a.innerHTML = returnStr;
}

window.onload = function () {
   makeCheckboxes("a,b,c,d,e");
};

</script>
<style type="text/css"></style>
</head>
<body>
   <table border="1">
      <tr>
         <td id="blah"></td>
         <td>checkboxes should appear left of here</td>
      </tr>
   </table>
</body>
</html>

-kaht

[small](All puppies have now found loving homes, thanks for all who showed interest)[/small]
 
Upvote 0 Downvote
Kaht, I am nto sure I understand this

window.onload = function () {
makeCheckboxes("a,b,c,d,e");
};

why is it not in this format

window.onload = makeCheckboxes("a,b,c,d,e");

what is the function() for?

thaks
 
Upvote 0 Downvote
Because you can't assign a function like that to an event handler via javascript. You have to pass a reference to the "object" itself (yes, functions are basically objects in javascript). The object is not makeCheckboxes("a,b,c,d,e"), it's makeCheckboxes. So, for that reason you can't provide parameters when assigning the event handler. However, what you can do is create a new function that does the function call for you (with the desired parameters). When you assign it like this: window.onload = makeCheckboxes("a,b,c,d,e"); what you're actually saying is run the function right now (not when the page loads) and assign the result to the onload event handler.

Let's look at it like this, consider this function:
Code: 
function blah() {
   return 1;
}

Now, when we assign it to the onload handler like this:
Code: 
window.onload = blah();
The function runs immediately and returns 1, that is funtionally equivalent to typing this instead:
Code: 
window.onload = 1;
However, when you type it like this:
Code: 
window.onload = blah;
You are essentially passing a reference to the function blah, and you telling the page to run that function when the page has completed loading.

-kaht

[small](All puppies have now found loving homes, thanks for all who showed interest)[/small]
 
Upvote 0 Downvote
So it would be the same as this:

window.onload = function ();

function() {
makeCheckboxes("a,b,c,d,e");
};
 
Upvote 0 Downvote
nope, you haven't given the function a name. It would be the same as this:
Code: 
window.onload = [!]blah[/!];

function [!]blah[/!]() {
   makeCheckboxes("a,b,c,d,e");
};

-kaht

[small](All puppies have now found loving homes, thanks for all who showed interest)[/small]
 
Upvote 0 Downvote
So this is also correct, right?

window.onload = function () {
makeCheckboxes("a,b,c,d,e");
};
 
Upvote 0 Downvote
Ummmm..... that's what I put in my first example [smile]

In case you're confused, the reason that function has no name is because it's not being externally referenced again. It's assigned directly to the handler as a new function. It's like the program is saying:
theProgram said:
Hello Mr. onload handler. Here is your function. It doesn't have a name because nobody else needs to know he exists. He's exclusively yours and you can call him whatever you want, because nobody else will need to know about him
Click to expand...

I need to start charging tuition.....

-kaht

[small](All puppies have now found loving homes, thanks for all who showed interest)[/small]
 
Upvote 0 Downvote
Kaht, I have another problem with this.
Basically I have a table like this:
<table id="f_f10008338_s_f41764_0" class="csav-ListTableTopVAlign" border="0">
</table>

When the page loads I am trying to dynamically insert checkboxes into that table like this

function makeCheckboxes(str) {
var a = document.getElementById(f_f10008338_s_f41764_0);
var arr = str.split(",");
var returnStr = "";
for (i = 0; i < arr.length; i++) {

returnStr += '<input type="checkbox" name="theCheckbox" value="' + arr[0] + '" />' + arr[0] + "<br>";
}
a.innerHTML= returnStr;
}

When I run this code I get an error: unknown error pageHTML.
When I do a.value = returnStr I do not get any errors but no checkboxes display. Is it because I cannot use innerHTML on table object? If so what can I do?

thanks!!!
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

Kennelbloke
  • Locked
  • Question
Can't Get Markers to show on Map
Replies
0
Views
997
Kennelbloke
Kennelbloke
rogerte
  • Locked
  • Question
Code that works on Windows, Android and Iphone
Replies
0
Views
714
rogerte
rogerte
JScannell
  • Locked
  • Question
Javascript issue on iPhone/iMac platforms
Replies
0
Views
758
JScannell
JScannell
TheLazyPig
  • Locked
  • Question
Limit rows based on column value
Replies
0
Views
218
TheLazyPig
TheLazyPig
bslintx2021
  • Locked
  • Question
How to convert delimited string to an array of array names 1
Replies
2
Views
304
bslintx2021
bslintx2021

Part and Inventory Search

Sponsor

Back
Top