Trying to add some JS into a rendered web page to control checkboxes also added to the rendered page 2

[lamarw]

Hi Everyone!
I have a problem I've been trying to solve by looking over the many JScript samples found here. They are all very educational but I don't yet see how to do what I need done.

I have a VBA program that that opens a website and reads both the html and the text of the page. This is working well at this time. I have added some checkboxes to the rendered page for my own purposes in order to indicate a selected record, each checkbox has a unique name.

I've recently added a checkbox to the column heading. The purpose of this checkbox is to cause all the other checkboxes to follow the state of the header checkbox. Either html CHECKED or not checked. When I change the state to CHECKED I want all the other checkboxes to be checked and vice versa.

There is no JScript on this web page that will do this, basically because I'm adding all this to the rendered page, but I think I can add my own JScript so that I can get this action to occur when viewed in my VBA browser control.

My problem is I just don't know enough about JScript to correctly code this. I've got an on click event in the checkbox:

<input type='checkbox' name='incident' onclick='ManageItemBoxes(this);'>

What should the ManageItemBoxes function look like?

Thanks for any help you can provide.

Lamar

 

[vacunita]

The first thing would be to get a collection of all the checkboxes you want to manipulate. However this:

each checkbox has a unique name.

Makes it a little harder to do. Rather than using a straight function call, you are going to have to get them manually one by one which may be a bit tedious.

For ease of usage they should all be named the same thing. Names do not have to be unique, and when dealing with checkboxes that are related, they should be named the same. They may have different values, but should be named the same.

In any case basically what you are looking at is either using getElementsByName on the entire set of checkboxes or doing it one by one. And once you have all your check boxes simply loop through them to change there checked property.

[b][COLOR=#0000FF]function[/color][/b] [b][COLOR=#000000]ManageItemBoxes[/color][/b][COLOR=#990000]([/color]controlObj[COLOR=#990000])[/color]
[b][COLOR=#0000FF]var[/color][/b] checks [COLOR=#990000]=[/color] [b][COLOR=#0000FF]new[/color][/b] [b][COLOR=#000000]array[/color][/b][COLOR=#990000]();[/color]
[b][COLOR=#0000FF]var[/color][/b] check [COLOR=#990000]=[/color][b][COLOR=#0000FF]new[/color][/b] [b][COLOR=#000000]Array[/color][/b][COLOR=#990000]();[/color] 
[tab]check[COLOR=#990000][[/color][COLOR=#993399]0[/color][COLOR=#990000]][/color] [COLOR=#990000]=[/color] document[COLOR=#990000].[/color][b][COLOR=#000000]getElementsByName[/color][/b][COLOR=#990000]([/color][COLOR=#FF0000]'checkboxname1'[/color][COLOR=#990000])[[/color][COLOR=#993399]0[/color][COLOR=#990000]];[/color]
[tab]check[COLOR=#990000][[/color][COLOR=#993399]1[/color][COLOR=#990000]][/color] [COLOR=#990000]=[/color] document[COLOR=#990000].[/color][b][COLOR=#000000]getElementsByName[/color][/b][COLOR=#990000]([/color][COLOR=#FF0000]'checkboxname2'[/color][COLOR=#990000])[[/color][COLOR=#993399]0[/color][COLOR=#990000]];[/color]
[tab]check[COLOR=#990000][[/color][COLOR=#993399]2[/color][COLOR=#990000]][/color] [COLOR=#990000]=[/color] document[COLOR=#990000].[/color][b][COLOR=#000000]getElementsByName[/color][/b][COLOR=#990000]([/color][COLOR=#FF0000]'checkboxname3'[/color][COLOR=#990000])[[/color][COLOR=#993399]0[/color][COLOR=#990000]];[/color]
[COLOR=#990000]...[/color]

[b][COLOR=#0000FF]for[/color][/b][COLOR=#990000]([/color][b][COLOR=#0000FF]var[/color][/b] i[COLOR=#990000]=[/color][COLOR=#993399]0[/color][COLOR=#990000];[/color]i[COLOR=#990000]<=[/color]check[COLOR=#990000].[/color]length[COLOR=#990000];[/color]i[COLOR=#990000]++)[/color]
[COLOR=#FF0000]{[/color]
  check[COLOR=#990000][[/color]i[COLOR=#990000]].[/color]checked [COLOR=#990000]=[/color] controlObj[COLOR=#990000].[/color]checked[COLOR=#990000];[/color]
[COLOR=#FF0000]}[/color]

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Web & Tech

 

[lamarw]

Thank you so much Vacunita (Phil?) for the code above. I just got back from a trip and will be testing this soon. Also, thank you for your additional comments regarding the 'collection'. In other languages it's necessary to uniquely name objects (i.e. VBA). This idea of not being uniquely named is a little conceptually hard.
Also, would you please define the variable 'controlObj', what would be the function call's argument be 'This'?

Thanks again.

 

[vacunita]

This idea of not being uniquely named is a little conceptually hard.
Also, would you please define the variable 'controlObj', what would be the function call's argument be 'This'?

The Check boxes by nature are part of a group. When you build a checkbox list they all belong to the same general concept, like for example "Check all the types of Movies You like" you would have several checkboxes, but they all belong to the same general idea. Types of Movies. So in JS you name all the checkboxes the same so they become a group or collection.

Same thing happens wi,th say Radio buttons. You need to name them the same, so that as per the Radios usage only one can be picked at a time. Otherwise the Radio buttons would be unrelated and you could check them all. Going back to our movie list, instead of picking all the movies you like we want the user to only pick one form the many options. You do that by using Radio buttons that are named the same.

JS takes care of identifying the checkboxes itself. If you need to uniquely identify a checkbox for whatever reason you use an ID. Because ID's must be unique. While names are nor required to be. They can be if necessary but they don't have to be. And in these types of applications where you need to get a collection of them to change there status as a group, you would want to name them the same.

controlObj is just what I chose to name the variable you are passing to your ManageItemBoxes() function. In your code you are passing "This". Which is a reference to the object that is executing the function: Your control checkbox.

So controlObj would contain the "This" reference to the checkbox so that you can alter the other checkboxes using its state.

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Web & Tech

 

[lamarw]

Again, Thank you for the commentary on the collections in JS. I hate to impose on your generosity again but I've made the changes to use the same name for the checkboxes, what would the JS code look like now?

 

[vacunita]

It should look basically the same. Except instead of having to get each checkbox you can get them all at once.

[b][COLOR=#0000FF]function[/color][/b] [b][COLOR=#000000]ManageItemBoxes[/color][/b][COLOR=#990000]([/color]controlObj[COLOR=#990000])[/color]
[COLOR=#FF0000]{[/color]
[tab][b][COLOR=#0000FF]var[/color][/b] check [COLOR=#990000]=[/color][b][COLOR=#0000FF]new[/color][/b] [b][COLOR=#000000]Array[/color][/b][COLOR=#990000]();[/color] 
[tab]check [COLOR=#990000]=[/color] document[COLOR=#990000].[/color][b][COLOR=#000000]getElementsByName[/color][/b][COLOR=#990000]([/color][COLOR=#FF0000]'[b]checkboxesname[/b]'[/color][COLOR=#990000]);[/color]
[tab]
[tab][b][COLOR=#0000FF]for[/color][/b][COLOR=#990000]([/color][b][COLOR=#0000FF]var[/color][/b] i[COLOR=#990000]=[/color][COLOR=#993399]0[/color][COLOR=#990000];[/color]i[COLOR=#990000]<=[/color]check[COLOR=#990000].[/color]length[COLOR=#990000];[/color]i[COLOR=#990000]++)[/color]
[tab][COLOR=#FF0000]{[/color]
[tab][tab] check[COLOR=#990000][[/color]i[COLOR=#990000]].[/color]checked [COLOR=#990000]=[/color] controlObj[COLOR=#990000].[/color]checked[COLOR=#990000];[/color]
[tab][COLOR=#FF0000]}[/color]
[COLOR=#FF0000]}[/color]

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Web & Tech

 

[lamarw]

Okay, when I do this:
function checkAll(controlObj)
{
var check =new Array();
check = document.getElementsByName('incident');

for(var i=0;i<check.length;i++)
{
check.checked = true;
}
}
</SCRIPT>
the function works, thank you very much.
One last thing I need it to do is follow the state of the header checkbox ('IncidentHeader'). I assume that the change I made to the function (check.checked = true will need to be adjusted. I also assume that the function will need to pass two variables "This" and the state of IncidentHeader checkbox?

 

[vacunita]

One last thing I need it to do is follow the state of the header checkbox ('IncidentHeader'). I assume that the change I made to the function (check.checked = true will need to be adjusted.

As I had it above, using the checked state of the controlObj to set the checked sate of the other checkboxes.

check[i].checked = controlObj.checked;

Unless of course you aren't passing "this" to your function. If the header checkbox is checked controlObj.checked will be true, and will set the other checkboxes to true.

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Web & Tech

 

[lamarw]

s zfasdf ad

 

[lamarw]

<input type='checkbox' name='incidentHeader' onclick='checkAll("This")'>

<script type=text/javascript>
function checkAll(controlObj)
{
    var check = new Array();
    check = document.getElementsByName('incident');

    for(var i=0;i<check.length;i++)
    {
         check[i].checked = controlObj.checked;
    }
}
</SCRIPT>

Okay, I now understand a little better the scope of 'This' as seen above. However, when the function gets the argument it is just a string i.e. "This". This can't be right can it? When I use IE's F12 tools I can expand all the elements of other variables i.e. 'check' is an array and check is an element in the array and it's associated 'checked' value. I can't do that with controlObj because it contains a string. It remains Undefined and has no effect on the check.checked state. Any ideas as to why?

 

[feherke]

Hi

[tt]this[/tt] is a keyword. Do not quote it.

Feherke.
[link feherke.github.com/]

http://feherke.github.com/

[/url]

 

[lamarw]

Apparently it must be in all lower case as well?

 

[feherke]

Hi

Apparently it must be in all lower case as well?

Of course. Sorry, I forgot to emphasize that.

Feherke.
[link feherke.github.com/]

http://feherke.github.com/

[/url]

 

[lamarw]

In general please accept my thanks to all who helped.

 

[vacunita]

Glad you worked it out.

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Web & Tech