conditionally hide input in table

Question

I am trying to have a select input with an other option when the other option is selected the input should become visible, however I want it defaulted as hidden and it should rehide if select is changed again later. I have tried == and literal === and reversing the hide show commands with != without change

currently I have

HTML:

<tr>
    <td colspan="3" align="center" border="1">Certification:</td>
    <td colspan="3" align="center" border="1">
        <select name="certname" id="certname">
            <option value=""> </option>
            <option value="State">State</option>
            <option value="Other">Other</option>
        </select>
        <input type="text" id="othercert" name="othercert" />
    </td>
</tr>

and JS:

$("#othercert").hide();

$(document).ready(function () {
    $("#certname select").change(function (e) {
        if ($(this).val() != "Other") {
            $("#othercert").hide();
        }
        else {
            $("#othercert").show();
        }     
    });
});

I am unsure where to go from here or what is going wrong - any assistance is appreciated.

or can u hard code the css visibilitiy:hidden within the #othercert tag? — g2000
– g2000, Commented Sep 17, 2015 at 19:05

Derek Story · Accepted Answer · 2015-09-17 19:07:08Z

2

Your selector thinks select is the child to #certname rather than its id. It should be:

select#certname and not #certname select

JS Fiddle

$("#othercert").hide();

$(document).ready(function () {
    $("select#certname").change(function (e) {
        if ($(this).val() != "Other") {
            $("#othercert").hide();
        } else {
            $("#othercert").show();
        }
    });
});

answered Sep 17, 2015 at 19:07

Derek Story

9,5831 gold badge26 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

James Stafford Over a year ago

this worked, thanks - oddly enough my syntax worked on another page with a different id name

Curtis · Accepted Answer · 2015-09-17 19:04:47Z

2

Your change selector is wrong. The select isn't a child of #certname, therefore change to the following:

$("select#certname").change(function (e) {

http://jsfiddle.net/ndgadeb1/

Also you need to put your initial hide inside the document ready function:

  $(document).ready(function () {
      $("#othercert").hide();

However if you wish to hide on page load then you can just do this in CSS:

#othercert{
   display:none;
}

That way it won't flash on page load.

answered Sep 17, 2015 at 19:04

Curtis

104k69 gold badges280 silver badges359 bronze badges

Collectives™ on Stack Overflow

conditionally hide input in table

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related