Web Analytics Made Easy -
StatCounter How do you hide a label, textbox and button on a form via yes/no toggle switch - CodingForum

Announcement

Collapse
No announcement yet.

How do you hide a label, textbox and button on a form via yes/no toggle switch

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • How do you hide a label, textbox and button on a form via yes/no toggle switch

    Not sure if this is the right section for this. I want to hide a label, textbox, and button when the toggle switch is set to no. Can some help me in doing that based off my code?

    Code:
    <div class="form-group">
               <div class="row">
                 <div class="col-md-12">            
                 <label for="exampleDateSigned">Does CAGE Code exist for contract?<span 
                        class="style1">*</span>:</label>   
                  <label class="lookup-switch-btn">
                    <input class="checked-switch" name="cage-lookup" type="checkbox" />
                      <span class="text-switch" data-yes="yes" data-no="no"></span>
                      <span class="toggle-btn"></span>
                 </label>    
                 </div>
              </div>
              </div>
    
    'Want to hide this when the toggle switch is changed to no.
          <div class="form-group">         
           <div class="CAGErow">
              
                <label for="exampleCAGE">  &nbsp;&nbsp;&nbsp;  CAGE<span 
                        class="style1">*</span>:</label><br />
                
                
                   
        <div class="col-md-4 col-sm-4"><asp:TextBox ID="TextBox11" class="form-control" 
                placeholder="" runat="server" Height="22px"></asp:TextBox> </div>
        <div class="col-md-4 col-sm-4"><asp:Button ID="Button4" Text="Lookup" 
                type="button"  runat="server" onclick="NextButton_Click" Height="25px"/></div>
      </div>
      </div>

  • #2
    Old school this would take JavaScript -- which of course means it's accessibility trash... Though it looks like you're already using bootcrap or some other form of scripted junk with those pointless data attributes and the "endless pointless presentational classes for nothing".

    Nowadays you could use CSS3 which is LESS trashy, but does'nae work on anything older than IE9.

    The caveat being your checkbox would have to be a SIBLING level element to the section you want to show/hide... but since you have NO actual content in all those "labels for nothing" that are completely non-semantic gibberish, I'd have to toss pretty much all that HTML to make it work right anyways.

    It looks to me like you have the typical bloated wreck of why I don't advise that anyone use bootstrap for anything... that fake toggle appearance using a checkbox (and FOR attribute with no corresponding ID) is filled with garbage non-semantic gibberish that I'd highly suggest pitching in the trash and starting over. Particularly with all those DIV doing fieldset's job. Of course the bloated garbage that ASP is going to vomit up probably is just making things worse too.

    There is likely little legitimate reason to be using significantly more markup than:

    Code:
    <fieldset class="toggleSection">
    	<label for="cageCodeExists">Does CAGE Code exist for contract? <b>*</b>:</label>
    	<input type="checkbox" id="cageCodeExists" name="cage-lookup">
    	<label for="cageCodeExists"></label>
    	<div>
    		<label for="exampleCAGE">CAGE <b>*</b>:</label><br>
    		<textarea id="exampleCAGE" name="cage-text"></textarea><br>
    		<input type="submit" value="lookup">
    	</div>        
    </fieldset>
    For what you are doing, other than the typical ASP and bootcrap ineptitude you've been suckered into using. (that ASP rubbish for making the buttons is saving you SO much code -- not) Note that the FOR attribute is supposed to point at the ID of the INPUT, SELECT, or TEXTAREA the LABEL is, well... for. Not sure what you had them pointing at... likewise appearance -- like setting the height on things -- has ZERO business in your HTML unless that style is conveying meaning (For example: tag clouds, progress bars, div based graphing). In your case it is decidedly not doing so.

    for CSS:
    Code:
    #cageCodeExists {
    	position:absolute;
    	left:-999em;
    	/*
    		we slide the checkbox off screen with positioning as IE will screw 
    		up not letting our label act as clicking on the label act as
    		clicking on the input if we set display:none; -- sucks.
    	*/
    }
    
    #cageCodeExists + label {
    	/* put your style for the off toggle appearance here */
    } 
    
    #cageCodeExists:checked + label {
    	/* put your style for the on toggle appearance here */
    } 
    
    
    #cageCodeExists + label + div {
    	display:none;
    }
    
    #cageCodeExists:checked + label + div {
    	display:block;
    }
    Would do the trick -- once you plug in your toggle styles. No scripting needed unless you want IE8/lower support... in which case I'd just find a way to gracefully degrade showing the internal DIV either way, and spitting it back at the user from server-side if it's wrong rather than bending over backwards for legacy browsers. It's not like you can actually trust CSS or JS client-side checks on forms so you'll be doing all the same checks server-side again anyways! A simple way to do that would be to put the above CSS in a media query set to (min-width:1px), since that would target all CSS3 capable browsers only. Legacy browsers would get the normal checkbox, and not show/hide. (though if you really wanted that show hide via scripttardery, that's time for a .htc file)

    Though good luck convincing ASP of that, much less the poster child of developer ineptitude that is bootcrap. Do yourself and the rest of the world a favor and go find a stick to scrape that off with before you go tracking it all over the Internet's carpets. Most likely you're generating three to five times the HTML needed site-wide [i](such as your 1.2k above doing 400 bytes job), the same or more CSS as you'd have without the BS, and a ton of scripting where none is warranted.

    Apologies if that sounds harsh -- but frameworks like bootcrap don't make it easier, simpler, or better. Anyone telling you otherwise doesn't know enough HTML or CSS to be building websites in the first place. Work smarter, not harder.

    Of course, the big advantage to letting CSS handle this is you could also use CSS transitions to animate it if desired... and naturally, no JavaScript sucking batteries dry for nothing.
    Walk the dark path, sleep with angels, call the past for help.
    https://cutcodedown.com
    https://medium.com/@deathshadow

    Comment


    • #3
      Uh I'm not sure what you mean 'but since you have NO actual content in all those "labels for nothing"'. I actually do, I have a toggle switch for yes/no. As for the other stuff you are talking about was any of that necessary? I'll answer for you no. I will try what you suggested I don't have a problem with a different approach. I'm not sure how that will work with no toggle switch unless I missed something.

      Edit: I see now where to put the yes and no toggles. What I'm not sure of is where you have '/* put your style for the on toggle appearance here */', what am I actually putting there?
      Last edited by mldardy; Oct 4, 2016, 01:32 AM.

      Comment


      • #4
        Originally posted by mldardy View Post
        Edit: I see now where to put the yes and no toggles. What I'm not sure of is where you have '/* put your style for the on toggle appearance here */', what am I actually putting there?
        What deathshadow provided in that area is commented out code...meaning, from "/*" to the closing "*/" it can be used as labels, instructional text or whatever you want. As long as it sends a message to whoever is picking up the project or for self reminder purposes. In this case, since none of us know what the interface of this page is supposed to look like, whatever properties you want to apply to the on/off positions, you can place them in those locations.

        Comment

        Working...
        X