SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Zealot Macchiato's Avatar
    Join Date
    Nov 2009
    Posts
    149
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Hide Button When Input Value Is Empty or N/A

    I'd like to hide the corresponding button when an input value is empty or has a value="n/a".

    In the following example, the input box "boat" is corresponding with the button "button_boat", and the input box "car" with the button "button_car", and the input box "dog" with the button "button_dog".

    Note: you cannot change the properties of the input element with type="text".

    HTML Code:
      <div>
        <form action="">
          <fieldset>
            <input type="text" name="boat" id="boat" disabled="disabled" value="n/a">
            <input type="text" name="car" id="car" disabled="disabled" value="2">
            <input type="text" name="dog" id="dog" disabled="disabled" value="">
          </fieldset>
        </form>
      </div>
    
      <div>
        <div id="button_boat"><input type="button" value="Boat"/></div>
        <div id="button_car"><input type="button" value="Car"/></div>
        <div id="button_dog"><input type="button" value="Dog"/></div>
      </div>
    Without script the output will look like this:
    hide_button_when_input_value_is_empty_before.gif

    With script the output will look like this:
    hide_button_when_input_value_is_empty_1.gif

    Anyone know a Javascript that can do this?
    "Take a seat and have a coffee." -- Macchiato

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,684
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by Macchiato View Post
    I'd like to hide the corresponding button when an input value is empty or has a value="n/a".
    Sure. Here's a way to do it:

    Code css:
    .hidden {
        display: none;
    }

    Code javascript:
    var form = document.getElementById('numberOfItems'),
        inputs = form.getElementsByTagName('input'),
        i,
        input,
        id,
        button;
     
    for (i = 0; i < inputs.length; i += 1) {
        input = inputs[i];
        id = 'button_' + input.id;
        button = document.getElementById(id);
        button.className = 'hidden';
        if (input.value !== 'n/a' && input.value > '') {
            button.className = '';
        }
    }
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Zealot Macchiato's Avatar
    Join Date
    Nov 2009
    Posts
    149
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The code works nicely, thanks!

    I was wondering, could this also work without id = 'button_' + input.id

    For example if you have the following html code:

    HTML Code:
      <div>
        <form id="numberOfItems" action="">
          <fieldset>
            <input type="text" id="boat" disabled="disabled" value="n/a">
            <input type="text" id="car" disabled="disabled" value="2">
            <input type="text" id="dog" disabled="disabled" value="">
          </fieldset>
        </form>
      </div>
    
      <div>
        <div id="sail"><input type="button" value="Boat"/></div>
        <div id="drive"><input type="button" value="Car"/></div>
        <div id="walk"><input type="button" value="Dog"/></div>
      </div>
    However you cannot change the html code manually.
    What needs to be changed to the javascript to accomplish the same result?
    "Take a seat and have a coffee." -- Macchiato

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,684
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by Macchiato View Post
    However you cannot change the html code manually.
    What needs to be changed to the javascript to accomplish the same result?
    You have a couple of different options there.

    You could create an array that specifies the relationship between ship and sail, and for the other ones there too.
    Or, you could loop through each div and compare the input field id with the value of the button.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  5. #5
    SitePoint Zealot Macchiato's Avatar
    Join Date
    Nov 2009
    Posts
    149
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by paul_wilkins View Post
    You have a couple of different options there.

    You could create an array that specifies the relationship between ship and sail, and for the other ones there too.
    Or, you could loop through each div and compare the input field id with the value of the button.
    I see where your going at, but I'm afraid this will also conflict with some other code on my page. So I tried something else instead. Can't post it here though, it's an completely different solution.

    Thanks for the help anyways!
    "Take a seat and have a coffee." -- Macchiato


Tags for this Thread

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
  •