SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Addict Iceman90's Avatar
    Join Date
    Mar 2006
    Location
    Calgary, Alberta, Canada
    Posts
    392
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Showing content when other content is filled in

    Hello guys,

    I am learning JavaScript slowly (I am a PHP developer), but I was wondering if someone can help me with a simple script I need.

    I am trying to write a script that will display some content (in a "div") only if the user has filled in a textbox.

    For example - I ask a user to enter their middle name. If they do (they may enter anything), I then have a div of content appear that will ask the user if they wish to have us display their full middle name, or just their initial. I would also like it to work in reverse, so that if the field is again empty, the div would hide.

    How would I accomplish having my div display only when the user fills in a text field?

    Below is the code I have written so far, and it is triggered by an onkeyup event, which isn't doing anything. What I have, is a div which has a display of none, which, when the user enters any value into the textbox, should be changed to "block" and hence display.

    Code JavaScript:
    function showMiddleName(){
    	middleLength = document.getElementById('middleName').value.length;
    	if(middleLength!=0){
    		document.getElementById('middleNameDropdown').style.display="block";
    	}
    }

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    The onchange event is the one that you're after. It's best practice to avoid changing styles directly from javascript, and use classnames instead, which provides a better separation of duties and ensures it's easier to refine the presentation as required.

    From the top of my head (untested, here be dragons, may contain nuts) here is how you should perform this task.

    I presume that you have the dropdown code already in the HTML for when javascript is not available. This is a good practice, and means using javascript to hide the dropdown.

    With the input box, do not use inline event handlers to attach the function. If javascript isn't available they will be useless and if there is javascript, that is better suited to attach the event. You wouldn't use inline css would you? It's just as bad to do that with javascript event handlers.

    The HTML for the input then becomes nice and simple, as it should be.

    Code HTML4Strict:
    <label for="middleName">Middle Name</label>
    <input id="middleName" name="middleName">

    And the hidden style does the work for you.

    Code CSS:
    .hidden {
        display: none;
    }

    Because we're going to hide the dropdown from both the below function and also when the page loads, we should create a separate function to show and hide elements, which helps to remove duplication and makes management easier.

    Code Javascript:
    function showMiddleName() {
        var middleName = document.getElementById('middleName');
        if (middleName.value.length === 0) {
           hide('middleNameDropdown');
        } else {
            show('middleNameDropdown');
        }
    }
    function hide(id) {
        var el = document.getElementById(id);
        el.className = 'hidden';
    }
    function show(id) {
        var el = document.getElementById(id);
        el.className = '';
    }

    If you think you'll have more than one class name on the element, you can create a couple of custom functions that do the job for you, such as addClass('hidden') and removeClass('hidden') but for now, setting a class name to the element is perfectly adequate.

    Now you can attach the function on to the element.

    Instead of attaching the event with an inline event, use the traditional event registration technique to attach the event instead. This is best done from the end of the document body so that it's performed as soon as the DOM is ready, and before the content has finished loading.

    Code Javascript:
    document.getElementById('middleName').onchange = showMiddleName;

    And also from the end of the document body, you can hide the dropdown with the following

    Code Javascript:
    hide('middleNameDropdown');
    Last edited by paul_wilkins; Jan 23, 2008 at 03:13.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Addict Iceman90's Avatar
    Join Date
    Mar 2006
    Location
    Calgary, Alberta, Canada
    Posts
    392
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Excellent. Thanks so much Paul. That makes a lot more sense now!


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
  •