www.webdeveloper.com
Results 1 to 7 of 7

Thread: Need help with this javascript

  1. #1
    Join Date
    Sep 2006
    Posts
    58

    Question 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 unselect 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;
    		}
    }

  2. #2
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,648
    would be better to see the html wich this script is to work with.
    xxx: Guess Buddhist riddle: "What is the sound of one hand clapping?"
    yyy: facepalm

  3. #3
    Join Date
    Sep 2006
    Posts
    58

    Here is the form

    The html form is attached
    Attached Files Attached Files

  4. #4
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,648
    i'm not sure but try this one
    Attached Files Attached Files
    xxx: Guess Buddhist riddle: "What is the sound of one hand clapping?"
    yyy: facepalm

  5. #5
    Join Date
    Sep 2006
    Posts
    58
    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 onload_boxchk is activated it throws up the 'You must Select at least one category checkbox' error preventing the form from being filled in.

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

    Thank you in advance for any advice

  6. #6
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,648
    in the html that you gave there were 5 checked checkboxes that's why i added onload_boxchk. to prevent the onload check just remove onload="onload_boxchk()" from the body tag
    xxx: Guess Buddhist riddle: "What is the sound of one hand clapping?"
    yyy: facepalm

  7. #7
    Join Date
    Sep 2006
    Posts
    58
    Never mind, Found a way to fix it.
    It all works perfectly now.
    Again thank you for your help.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles