/    Sign up×
Community /Pin to ProfileBookmark

Need help with this javascript

Hi guys,

I need some help with this javascript on a form. It does some of what I need, I just need help completing it.

To explain I have 20 checkboxes on a form each representing a category. The 1st part of the javascript prompts people to check between 1 and 5 categories (checkboxes). This works fine and does not need work.

The rest of the javascript opens and closes sections of the form depending on which checkboxes are selected. For example if checkbox id ‘sobi2SlectedCatsID_1’ or ‘sobi2SlectedCatsID_1’ are selected then a section (div) called ‘modeling_section’ appears.

The problem I have with the script is that if I select ‘sobi2SlectedCatsID_1’ or ‘sobi2SlectedCatsID_1’ are selected it opens the ‘modeling_section’ which is fine.
If I select ‘sobi2SlectedCatsID_1’ AND ‘sobi2SlectedCatsID_1’ it opens the ‘modeling_section’ which is fine.
But when I select ‘sobi2SlectedCatsID_1’ AND ‘sobi2SlectedCatsID_1’ and it opens the ‘modeling_section’ and then I [B]unselect[/B] one of them it closes the ‘modeling_section’ instead of leaving it open. This is the same for the rest of the conditional statements as well. How do I fix this.

The other thing is that this form can be brought up and re-edited by the user. When the user reopens the form to adjust it the form remembers which checkboxes the user selected last time they used the form but it doesn’t remember which sections it had opened.

Here is the javascript, hope it makes sense.

[CODE]
function boxchk(obj,max) {
var box = obj.id.substr(0,obj.id.lastIndexOf(‘_’)+1);var cnt=0,i=1;
while(obj.form[box+i]) {
cnt += obj.form[box+i].checked;i++;
}
if (cnt > max) {
obj.checked = false;
alert(‘Only choose ‘ + max + ‘ category checkboxes.nTo pick this option unselect one of the others.’);
}
if (cnt == 0) {
obj.checked = false;
alert(‘You must Select at least one category checkbox.’);
}
if (obj.id == ‘sobi2SlectedCatsID_1’ || obj.id == ‘sobi2SlectedCatsID_2’) {
var vis = (obj.checked) ? ‘block’ : ‘none’;
document.getElementById(‘modeling_section’).style.display = vis;
}
if (obj.id == ‘sobi2SlectedCatsID_5’ || obj.id == ‘sobi2SlectedCatsID_7’) {
var vis = (obj.checked) ? ‘block’ : ‘none’;
document.getElementById(‘music_section’).style.display = vis;
}
if (obj.id == ‘sobi2SlectedCatsID_3’ || obj.id == ‘sobi2SlectedCatsID_4’) {
var vis = (obj.checked) ? ‘block’ : ‘none’;
document.getElementById(‘acting_section’).style.display = vis;
}
if (obj.id == ‘sobi2SlectedCatsID_6’) {
var vis = (obj.checked) ? ‘block’ : ‘none’;
document.getElementById(‘dancing_section’).style.display = vis;
}
if (obj.id == ‘sobi2SlectedCatsID_8’ || obj.id == ‘sobi2SlectedCatsID_9’ || obj.id == ‘sobi2SlectedCatsID_10’ || obj.id == ‘sobi2SlectedCatsID_11’ || obj.id == ‘sobi2SlectedCatsID_12’ || obj.id == ‘sobi2SlectedCatsID_13’ || obj.id == ‘sobi2SlectedCatsID_14’ || obj.id == ‘sobi2SlectedCatsID_15’ || obj.id == ‘sobi2SlectedCatsID_16’ || obj.id == ‘sobi2SlectedCatsID_17’ || obj.id == ‘sobi2SlectedCatsID_18’ || obj.id == ‘sobi2SlectedCatsID_19’ || obj.id == ‘sobi2SlectedCatsID_20’) {
var vis = (obj.checked) ? ‘block’ : ‘none’;
document.getElementById(‘business_section’).style.display = vis;
}
if (obj.id == ‘sobi2SlectedCatsID_1’ || obj.id == ‘sobi2SlectedCatsID_2’ || obj.id == ‘sobi2SlectedCatsID_3’ || obj.id == ‘sobi2SlectedCatsID_4’ || obj.id == ‘sobi2SlectedCatsID_5’ || obj.id == ‘sobi2SlectedCatsID_6’) {
var vis = (obj.checked) ? ‘block’ : ‘none’;
document.getElementById(‘physical_details_section’).style.display = vis;
}
}
[/CODE]

to post a comment
JavaScript

6 Comments(s)

Copy linkTweet thisAlerts:
@PadonakMay 04.2012 — would be better to see the html wich this script is to work with.
Copy linkTweet thisAlerts:
@celshaderauthorMay 05.2012 — The html form is attached
Copy linkTweet thisAlerts:
@PadonakMay 05.2012 — i'm not sure but try this one
Copy linkTweet thisAlerts:
@celshaderauthorMay 11.2012 — This worked fine. Thank you so much. I don't think I would have come up with a script that worked as well as that on my own.

The only issue is that it when I go to the form for the 1st time. No categories are selected. This means when the [B]onload_boxchk[/B] is activated it throws up the [I]'You must Select at least one category checkbox'[/I] [B]error[/B] preventing the form from being filled in.

Basically I need the [I]'You must Select at least one category checkbox'[/I] [B]error[/B] and the [I]'Only choose 5 category checkboxes. To pick this option unselect one of the others.'[/I] [B]error[/B] to only be activated on clicking a select box. Not onload.

Thank you in advance for any advice
Copy linkTweet thisAlerts:
@PadonakMay 11.2012 — in the html that you gave there were 5 checked checkboxes that's why i added [B]onload_boxchk[/B]. to prevent the onload check just remove [I]onload="onload_boxchk()"[/I] from the body tag
Copy linkTweet thisAlerts:
@celshaderauthorMay 14.2012 — Never mind, Found a way to fix it.

It all works perfectly now.

Again thank you for your help.
×

Success!

Help @celshader spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 5.13,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...