“g.html” when you check Games and hit the submit button
“cg.html” when you check Cars and Games and hit the submit button
“hpt.html” when you check Houses, Pizza and Travel and hit the submit button
and so on.
Note that the first letter of a topic will be used with other first letters of different topics to create a html page (link) to go to when you hit the submit button. For all these combinations, html files have been made beforehand and have been put in the same folder.
But to test this code, you only need to make one html file and that is “g.html”.
Now my question is:
I want the Games checkbox to be checked when I check one (or more) of it’s child checkboxes (shooter, strategy, simulation, rpg). But the Games checkbox must always remain checked when one or more of the child checkboxes are checked.
What script can be used that does this and can work together with the script that is currently used?
It does check the parent when you check the child, and it unchecks the child when you uncheck the parent, but it doesn’t bring you to “g.html” when for example you check one of the children (and hit submit). When you only check the parent “Games” it does take you to “g.html”, but not when you check a child.
This part of the script, picks out the value from the topics, in this case the value “g” for Games and makes it into “g.html”:
// create html page links
var form = document.getElementById('topics');
form.onsubmit = function () {
var fields = this.elements.topics,
fieldsLen = fields.length,
i,
page = '';
for (i = 0; i < fieldsLen; i++) {
if (fields[i].checked) {
page += fields[i].value;
}
}
location.href = page + '.html';
return false;
};
But when a child is checked, it somehow doesn’t use the value of the topic Games.
Well, first off, you should do a bit of re-working of the id’s and names within your form, to make it more readable. I’d suggest “topicsForm” for your form’s name and id, and change the various input elements to names and ids that reflect the information they embody, like “topicGamesShooter” and the like. This will allow for easier reading of the code during the development stage, and is VERY helpful with debugging.
As far as why it’s not taking you to the page in question, well all I can say is this was an example of how to manage the checkboxes and their checked values, not intended to be the final production code. I love to help, but I can’t do EVERYTHING, can I?
This is not the final product, I will change the names later. I’m just testing what is possible, and then I’m giving the code proper names in the development stage.
Yes you can! But seriously, thanks for helping me so far, I really appreciate it
Maybe someone else can help me with the problem below (and please read the rest of the thread, to get a better understanding of the code):
Because the children still have the name attribute with the value “topics” and the value “topics” is used to create new html page links. But the children don’t have the value attribute, so javascript can’t use a valid value, so it creates no html page link. And that’s why when you check a child and hit the submit button, you won’t go to “g.html”.
[list][]gain a reference to gameschild
[]use getElementsByTagName to retrieve all of the related input fields
[*]loop through the inputs setting their checked property to the parents state[/list]
Do I need to place this script inside the current script or outside?
I’ve placed your script beneath this script:
/* Check parent & uncheck child when parent is unchecked */
function checkParent(id, ele) {
var parent = document.getElementById(id);
if (ele.checked === true) parent.checked = true;
}
function uncheckChildren (id, ele) {
var child = document.getElementById(id);
var myChildren = new Array("shooter", "strategy", "simulation", "rpg");
if (ele.checked === false) {
for(var n in myChildren) {
var e = document.getElementById(myChildren[n]);
e.checked = false;
}
}
}
The code that I gave isn’t all of the code you will need. It is instead enough to help you get to were you need to go.
You said before that you placed the script beneath the code you show above. Would you care to share with us the code that was placed below the above code?
