SitePoint Sponsor

User Tag List

Results 1 to 13 of 13
  1. #1
    SitePoint Enthusiast
    Join Date
    Sep 2013
    Location
    UK
    Posts
    77
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question about Forms with field dependant fields

    I have got to grips with how to make and parse forms with various types of input. But there is one thing that seems simple, but I don't know how to do.
    How do you make the availability of one (or a number of) field dependant on another?
    For example, I have a single checkbox, followed by a group of checkboxes. If the first one is checked, I want the ones in the group disabled. If the first one is unchecked, all those in the group are available.
    So you may select either that first one OR any of the group.
    Can this be done with HTML alone, or does it require scripting?

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,331
    Mentioned
    463 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by SamA74 View Post
    Can this be done with HTML alone, or does it require scripting?
    It requires scripting—that is, JavaScript.

  3. #3
    SitePoint Enthusiast
    Join Date
    Sep 2013
    Location
    UK
    Posts
    77
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I thought that would be the case.
    But how?
    I've done quite a bit of PHP now, but have only really dabbled with Javascript. This will mix with PHP, the group of checkboxes is created by PHP from SQL.

  4. #4
    SitePoint Enthusiast
    Join Date
    Sep 2013
    Location
    UK
    Posts
    77
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm really banging my head against the wall now.
    I thought I had found the functions I needed, createAttribute to insert disabled="disabled" into my checkbox inputs, using onchange as the trigger within the first checkbox.
    But it's not working.
    When this happens I try do something very simple and take it one step at a time. But it seems I can't get the simplest bit of js to work on this page for some reason. I have another page with some very simple js that works OK, but on this one it does nothing.
    I can't make any sense of it.

  5. #5
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,331
    Mentioned
    463 Post(s)
    Tagged
    8 Thread(s)
    OK, the best thing to do is post a link or full code example so that someone can help out with it. I'll move this thread to the JS forum, too.

  6. #6
    SitePoint Enthusiast
    Join Date
    Sep 2013
    Location
    UK
    Posts
    77
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That thing with no script working was strange, but is fixed now. I deleted it all and started again.
    So I now have js that runs, but does not do what I want yet.
    I'll show some code.
    This is the input for the first checkbox that should disable the group of checkboxes that follow.
    HTML Code:
    <input id="vol" type="checkbox" name="vol" value="v" onchange="dischk(this.id,'mem');" />
    This is the PHP that creates the group of checkboxes I want to disable with the first.
    PHP Code:
    <?php
    $memSQL 
    "SELECT * FROM tablename" ;
    $rs mysql_query($memSQL);
    $m ;
    while(
    $row mysql_fetch_array($rs)) {
        echo 
    " <span style=\"display: inline-block;\"><input id=\"" $m "\" class=\"mem\" type=\"checkbox\" name=\"membs[]\" value=\"" $row['id'] . "\" />" $row['name']  . " &bull; </span>\n" ;
        
    $m++ ;
    }
    ?>
    This creates HTML something like this.
    HTML Code:
    <span style="display: inline-block;"><input id="0" class="mem" type="checkbox" name="membs[]" value="1" />Name1 &bull; </span>
    <span style="display: inline-block;"><input id="1" class="mem" type="checkbox" name="membs[]" value="5" />Name5 &bull; </span>
    <span style="display: inline-block;"><input id="2" class="mem" type="checkbox" name="membs[]" value="24" />Name24 &bull; </span>
    <span style="display: inline-block;"><input id="3" class="mem" type="checkbox" name="membs[]" value="26" />Name26 &bull; </span>
    And here is the script that is in the head before all this.
    Code:
    <script>
    	function dischk(vol,className){
    		// this does nothing really, just displays something so I know the function has triggered
    		var volval = document.getElementById("vol");
    		var disp = document.getElementById("disp")
    		disp.innerHTML = volval;
    		// this is supposed to add the disabled attribute to the checkboxes
    		var elemArr = document.getElementByClassName(className);
    		for(var i = 0; i < elemArr.length; i++){
    			var elem = document.getElementById(elemArr[i].id);
    			var newAtt = document.createAttribute("disabled");
    			newAtt.nodeValue = ("disabled");
    			elem.setAttributeNode(newAtt);
    		}
    	}
    </script>
    This is not meant to be complete, I'm just trying to do one step at a time. First I just want to add the disabled="disabled" attribute when I check the box, but that's not working yet.
    After that I want it to add the attribute when checked, and remove it when unchecked.

  7. #7
    SitePoint Enthusiast
    Join Date
    Sep 2013
    Location
    UK
    Posts
    77
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    OK, progress is being made.
    getElementsByClassName is better than getElementByClassName

  8. #8
    SitePoint Guru Vincent Puglia's Avatar
    Join Date
    Feb 2000
    Location
    where the World once stood
    Posts
    700
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    what's wrong with using the built-in 'disabled' property?
    Code:
    elemArr[i].disabled = true
    Where the World Once Stood
    the blades of grass
    cut me still

  9. #9
    SitePoint Enthusiast
    Join Date
    Sep 2013
    Location
    UK
    Posts
    77
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    what's wrong with using the built-in 'disabled' property?
    Probably nothing, but I have no idea what you mean.

    However, I have something that half works now. When I check the forst box, the others are disabled.
    That's good but the next problem is reversing this action, so when I uncheck the box, they are enabled again.
    I thought this was going to be easy using an "if" along with the value of the first box (which is "v"), but it seems the value is always "v" regardless of whether it is checked or not. I then thought I need to get the value for "disabled" from one of my other boxes for the "if" statement, but I can't get that to work, the script breaks.
    This is the script as I have it so far:
    Code:
    <script>
    	function dischk(className,att){
    		var elemArr = document.getElementsByClassName(className);
    		for(var i = 0; i < elemArr.length ; i++ ){
    			var elem = document.getElementById(elemArr[i].id);
    			var newVal = att ;
    			elem.setAttribute(att,newVal);
    		}	
    	}
    </script>
    HTML for the first box
    HTML Code:
    <input id="vol" type="checkbox" name="vol" value="v" onchange="dischk('mem','disabled');" />
    And one of the other boxes, just one, they are all similar, I just added an empty disabled="" to it since before.
    HTML Code:
    <span style="display: inline-block;"><input id="0" class="mem" type="checkbox" name="membs[]" value="1" disabled="" />Name1 &bull; </span>
    So the main question is, how to reverse the disable.

  10. #10
    SitePoint Enthusiast
    Join Date
    Sep 2013
    Location
    UK
    Posts
    77
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I worked out why I could not get the "disabled" value from the boxes. Again down to stupid clumsy fingers, in the input I put didabled="", someone put those keys too close together.
    So now I can get the value and thought this would work:
    Code:
    <script>
    	function dischk(className,att){
    		var memb = document.getElementById("0");
    		var a = memb.attributes;
    		var memval = a.disabled.value;
    		var elemArr = document.getElementsByClassName(className);
    		for(var i = 0; i < elemArr.length ; i++ ){
    			var elem = document.getElementById(elemArr[i].id);
    			if ( memval != att ) {
    				var newVal = att ;
    			}
    			else if ( memval == att) {
    				var newVal = "" ;
    			}
    			elem.setAttribute(att,newVal);
    		}
    					
    	}
    </script>
    But not so simple.
    I thought you had to put disabled="disabled" to disable it, and having disabled="" or disabled="false" or anything other than "disabled" would leave it enabled. But no, just having the disabled attribute in there with any or no value will disable it.
    So I must go back to actually adding the attribute, which I can do, but I don't know how to remove it to reverse the action.
    Also, the reason my script broke when I had the typo in it was because I was asking for an attribute which was not there. So how do I check for it if it's not there?

  11. #11
    SitePoint Enthusiast
    Join Date
    Sep 2013
    Location
    UK
    Posts
    77
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Vincent Puglia View Post
    what's wrong with using the built-in 'disabled' property?
    Code:
    elemArr[i].disabled = true
    Thought I would try that, and it works:
    Code:
    <script>
    function dischk(className,att){
    	var elemArr = document.getElementsByClassName(className);		
    	for(var i = 0; i < elemArr.length ; i++ ){
    		if ( elemArr[i].disabled != true ) {
    			elemArr[i].disabled = true ;
    		}
    		else if ( elemArr[i].disabled == true ) {
    			elemArr[i].disabled = false ;
    		}
    	}
    }
    </script>
    I did not know you could add/remove attributes so easily.

  12. #12
    SitePoint Guru Vincent Puglia's Avatar
    Join Date
    Feb 2000
    Location
    where the World once stood
    Posts
    700
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Decades ago, a Cobol programmer once told me KISS (keep it simple, stupid). Seems be a true adage, regardless of the language and environment
    Where the World Once Stood
    the blades of grass
    cut me still

  13. #13
    SitePoint Enthusiast
    Join Date
    Sep 2013
    Location
    UK
    Posts
    77
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Vincent Puglia View Post
    Decades ago, a Cobol programmer once told me KISS (keep it simple, stupid). Seems be a true adage, regardless of the language and environment
    I agree, there is nothing at all clever about making anything more complex than it needs to be.
    My problem was a lack of knowledge and experience in JS, it's not something I have got around to learning properly yet, so don't know about all the functions available.
    I just have to scrape around the various references to find something to do the task when needed, but don't always find the most efficient way.
    Thanks for the help.


Bookmarks

Posting Permissions

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