SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Wizard billy_111's Avatar
    Join Date
    Jul 2009
    Posts
    1,683
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How to make a label and texbox vanish

    Hey,

    I have a question. I dont know if this can be done. But my client is insisting it to be done.

    Baiscally if you take a look at this page:-

    http://www.judgethejob.com/vinny/submit-review/

    You can see the question "Are you a past or present employee"..

    The user here needs to click a radio button. What i want to do is when the user clicks on the present the "Leave date" question dissapears. When the user clicks on past i want the "Leave date" to re-appear..

    Can this be done?

    Regards

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    3 Thread(s)
    The radio buttons will need to trigger the appropriate actions.
    The past radio button has no id, so another technique will currently be used to target it.

    Be sure to place these scripts just before the </body> tag.

    Code javascript:
    var form = document.getElementById['advertise'],
        past = form.elements.past[0],
        present = form.elements.past[0];
    present.onclick = hideLeaveDate;
    past.onclick = showLeaveDate;

    Now we need to get the parent of the leave date, and hide its parent, that being the list item element.

    Code javascript:
    function hideLeaveDate() {
        var leaveDate = this.form.txt_end;
        hide(leaveDate.parentNode);
    }
    function showLeaveDate() {
        var leaveDate = this.form.txt_end;
        show(leaveDate.parentNode);
    }
    function hide(el) {
        el.className = '';
    }
    function show(el) {
        el.className = 'hidden';
    }

    And finally, some css to perform the hiding.

    Code css:
    .hidden { display: none; }
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Wizard billy_111's Avatar
    Join Date
    Jul 2009
    Posts
    1,683
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey,

    I am not sure if i am doing this right, but can you have a look at this link? It does not seem to be working

    http://www.judgethejob.com/vinny/submit-review/

  4. #4
    SitePoint Addict
    Join Date
    Apr 2007
    Posts
    300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Since you are using jQuery you could try this... Copy the following code in to a file and include it in the head section.

    Code:
    $(function(){
    
    $('#advertise li').eq(7).hide();
    
    $('#ValidPast input').click(function(){
    
    if($('#ValidPast input[value="Past"]').attr('checked')){
    $('#advertise li').eq(7).show();
    }
    else {
    $('#advertise li').eq(7).hide();
    }
    
    });
    
    });

  5. #5
    SitePoint Wizard billy_111's Avatar
    Join Date
    Jul 2009
    Posts
    1,683
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey,

    Thanks for the reply. But how would the code change now that i am using drop down boxes for the month/year?

    If you see the page again you can see i am using a 2 drop down boxes so basically what i want to do is make them both invisible when the present radio button is selected...

    Regards

  6. #6
    SitePoint Addict
    Join Date
    Apr 2007
    Posts
    300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The code targets the parent li element. So any changes inside the li do not require any modifications. The code above will still work. I mean the code I have posted.

  7. #7
    SitePoint Wizard billy_111's Avatar
    Join Date
    Jul 2009
    Posts
    1,683
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey,

    Thanks. I have no idea how and why that works but it works!


  8. #8
    SitePoint Addict
    Join Date
    Apr 2007
    Posts
    300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here is an explanation of what each line does...

    $(function(){ Run these after the DOM is ready.

    $('#advertise li').eq(7).hide(); hide 8th li element inside element #advertise

    $('#ValidPast input').click(function(){ Do this when input element inside #validPast element is clicked on.

    if($('#ValidPast input[value="Past"]').attr('checked')){ Check if the radio button with value=Past is checked
    $('#advertise li').eq(7).show(); If checked show the li element
    }
    else {
    $('#advertise li').eq(7).hide(); If not checked hide the li element
    }

    });

    });


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
  •