Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 13 of 13
  1. #1
    Senior Coder
    Join Date
    May 2004
    Posts
    1,466
    Thanks
    15
    Thanked 0 Times in 0 Posts

    show hidden fields when checkbox is clicked - what am I doing wrong here?

    what am I doing wrong

    I want to show the hidden tr's when company is clicked

    here is my code



    Code:
    <head>
    
    <style type="text/css">
    @import "style2.css";
    </style>
    <meta HTTP-EQUIV="Content-Type" CONTENT="text/html; CHARSET=windows-1255">
           <script src="datetimepicker_css.js"></script>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    
        <style type="text/css">
        .companyfields{
          
            display: none;
          
        }
       
    </style>
        <script language="javascript">
    
            $('.company').click(function () {
                if ($(this).is(':checked')) {
                    $(".companyfields").show();
                } else {
                    $(".companyfields").hide();
                }
            });
    
        </script>
    
    
    
    
    </head>
    <body>
    
    
    
    <form method=post action=admin.asp encType='multipart/form-data'><table class=maintable2>
    <tr><td>last Name</td><td><input type=text name=lastname value=''></td></tr>
    <tr><td>First Name</td><td><input type=text name=firstname value=''></td></tr>
    <tr><td>Date of Birth</td><td><input type=text name=dob value=''></td></tr>
    <tr><td>Nationality</td><td><input type=text name=nationality value=''></td></tr>
    <tr><td>Address</td><td><input type=text name=address value=''></td></tr>
    <tr><td>City</td><td><input type=text name=city value=''></td></tr>
    <tr><td>State</td><td><input type=text name=state value=''></td></tr>
    <tr><td>Zip</td><td><input type=text name=zip value=''></td></tr>
    <tr><td>Country</td><td><input type=text name=country value=''></td></tr>
    <tr><td>Phone1</td><td><input type=text name=phone1 value=''></td></tr>
    <tr><td>Phone2</td><td><input type=text name=phone2 value=''></td></tr>
    <tr><td>Email</td><td><input type=text name=email value=''></td></tr>
    
    <tr><td>Company</td><td><input type=checkbox name=Company id=company class=company value=1 ></td></tr>
    <tr class=companyfields><td>Company Name</td><td><input type=text name=companyname value=''></td></tr>
    <tr class=companyfields><td>Company tax id</td><td><input type=text name=companytaxid value=''></td></tr>
    <tr><td colspan=2 align=center><input type=submit value=Save class='button'></td></tr></table></form>
    
    
    </body>
    </html>
    Last edited by VIPStephan; 03-23-2014 at 01:10 PM. Reason: added code BB tags

  • #2
    Regular Coder Lerura's Avatar
    Join Date
    Aug 2005
    Location
    Denmark
    Posts
    947
    Thanks
    0
    Thanked 130 Times in 129 Posts
    display: controls if/how the element is rendered, and setting it to none makes it not-rendered.
    it still exists though.

    .show() and .hide() toggles the visibilty: of the element.

    changing the visibility: of an element that is not rendered have no effect.

    try changing:
    Code:
    <style type="text/css">
    .companyfields{
    
    display: none;
    
    }
    
    </style>
    to
    Code:
    <style type="text/css">
    .companyfields{
    
    visibilty: hidden;
    
    }
    
    </style>
    the the element will be rendered, but invisible as default.

  • #3
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,075
    Thanks
    0
    Thanked 256 Times in 252 Posts
    The code is basically correct. The issue is you set the click event handler when the elements don't exist yet. You need to set the click event handler on document ready.
    Code:
    $(document).ready(function() {
        //your click handler here
    });
    Or you could keep your code but move it below the form. I prefer this one, though.
    Last edited by glenngv; 03-22-2014 at 10:55 PM.
    Glenn
    ____________________________________

    My Blog
    Tower of Hanoi Android app (FREE!)
    Tower of Hanoi Leaderboard
    Samegame Facebook App
    vBulletin Plugins
    ____________________________________

  • #4
    Senior Coder
    Join Date
    May 2004
    Posts
    1,466
    Thanks
    15
    Thanked 0 Times in 0 Posts
    thanks I changed that and it's still not working

    and i want it display:none because I don't want the space to show if the field shouldn't show

    what's the best way to do this

  • #5
    Regular Coder Lerura's Avatar
    Join Date
    Aug 2005
    Location
    Denmark
    Posts
    947
    Thanks
    0
    Thanked 130 Times in 129 Posts
    them you should use :
    $(".companyfields").css('display','table-row'); instead of $(".companyfields").show();
    and
    $(".companyfields").css('display','none'); instead of $(".companyfields").hide();

  • #6
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,927
    Thanks
    6
    Thanked 1,041 Times in 1,014 Posts
    Wow, this is some old-school HTML with some new-school jQuery.

    And sorry to object, Lerura, but the display property doesn’t have anything to do with this. It works perfectly fine with display: none because the elements still exist, they are just not shown.

    Anyway, it works for me on http://jsfiddle.net/sRVr9/ Instead of “click” you should use “change”, though.

    You should always have a doctype in your documents. I think jQuery even requires this in order to work. In your case, with that old-school HTML I would suggest an HTML 4.01 transitional doctype:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    But I also strongly suggest you update your HTML to the latest standards (e. g. by using semantic HTML — a table is not meant for layout, and you should use labels along with form controls, etc.).

  • #7
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,075
    Thanks
    0
    Thanked 256 Times in 252 Posts
    Quote Originally Posted by Lerura View Post
    them you should use :
    $(".companyfields").css('display','table-row'); instead of $(".companyfields").show();
    and
    $(".companyfields").css('display','none'); instead of $(".companyfields").hide();
    jQuery knows to set display-row when a table row is .show()'n
    Glenn
    ____________________________________

    My Blog
    Tower of Hanoi Android app (FREE!)
    Tower of Hanoi Leaderboard
    Samegame Facebook App
    vBulletin Plugins
    ____________________________________

  • #8
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,075
    Thanks
    0
    Thanked 256 Times in 252 Posts
    VIPStephan, click also works and is more appropriate than change.

  • #9
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,075
    Thanks
    0
    Thanked 256 Times in 252 Posts
    Quote Originally Posted by esthera View Post
    thanks I changed that and it's still not working

    and i want it display:none because I don't want the space to show if the field shouldn't show

    what's the best way to do this
    Post your code.

  • #10
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,927
    Thanks
    6
    Thanked 1,041 Times in 1,014 Posts
    Quote Originally Posted by glenngv View Post
    VIPStephan, click also works and is more appropriate than change.
    Why is that? Did you ever click on a label and see what happens?

  • #11
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,075
    Thanks
    0
    Thanked 256 Times in 252 Posts
    The OP is not using labels so I was only clicking on the checkbox itself. I don't understand why you said the OP should use "change" instead of "click" when "click" works.

    I agree with you though that the OP should not use table for layouts and use labels for form controls.
    Glenn
    ____________________________________

    My Blog
    Tower of Hanoi Android app (FREE!)
    Tower of Hanoi Leaderboard
    Samegame Facebook App
    vBulletin Plugins
    ____________________________________

  • #12
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,927
    Thanks
    6
    Thanked 1,041 Times in 1,014 Posts
    Well, I was kind of thinking as this being a first step to better code. Expecting some back and forth, in the process of showing code one could introduce more code enhancements step by step. Also, sometimes it’s best to not just give people what they think they want, based on what they currently have, but what they should have in the first place.

  • #13
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,075
    Thanks
    0
    Thanked 256 Times in 252 Posts
    Agreed.

    I was just correcting that 'click' works and is more appropriate. Everything you said is correct except that one.
    Glenn
    ____________________________________

    My Blog
    Tower of Hanoi Android app (FREE!)
    Tower of Hanoi Leaderboard
    Samegame Facebook App
    vBulletin Plugins
    ____________________________________


  •  

    Posting Permissions

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