jQuery: hide and show an input element

Question

I'm trying to do is hiding/showing a certain input object if a select value is checked.

The HTML part of the code is here:

<label for="add_fields_placeholder">Placeholder: </label>
<select name="add_fields_placeholder" id="add_fields_placeholder">
    <option value="50">50</option>
    <option value="100">100</option>
    <option value="Other">Other</option>
</select>
<div id="add_fields_placeholderValue">
    Price:
    <input type="text" name="add_fields_placeholderValue" id="add_fields_placeholderValue">
 </div>

And the jQuery part is here:

$(document).ready(function()
{
    $("#add_fields_placeholder").change(function() {
        if($(this).val() == "Other") {
            $("#add_fields_placeholderValue").show();
        }
        else {
            $("#add_fields_placeholderValue").hide();
        }
    });
});

So if user selects "Other", it shows another input object.

The problem now is this. First when you open the page the first option is selected by default and the optional input object is shown. It hides once you select another option.

Is there any trick to make it hide when you first load the page too? Not just when you select a value manually.

Thank you guys.

score 26 · Accepted Answer · answered Aug 11 '12 at 23:15

Just add:

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

After your change event declaration on page load.

i.e.

$(document).ready(function()
{
 $("#add_fields_placeholder").change(function()
 {
  if($(this).val() == "Other")
  {
   $("#add_fields_placeholderValue").show();
  }
  else
  {
   $("#add_fields_placeholderValue").hide();
  }
 });
 $("#add_fields_placeholderValue").hide();
});

Working example: http://jsfiddle.net/bZXYR/

Musa · Answer 2 · 2012-08-11T23:27:05.743

2

You can use css to hide it initially

#add_fields_placeholderValue{display:none;}

http://jsfiddle.net/FarVX/20/

Also you have multiple elements with the same id(pointed out by Brandon), which is not valid

edited Aug 11 '12 at 23:27

answered Aug 11 '12 at 23:18

Musa

96,336
17
118
137

If you do this without resolving the conflicting IDs, the input box will never show up. At least it won't for me in chrome. – Brandon Aug 11 '12 at 23:22

score 1 · Answer 3 · answered Aug 11 '12 at 23:17

1

I typically factor out the hide/show logic:

function foobar(){
    if($(this).val() == "Other"){
        $("#add_fields_placeholderValue").show();
    }
    else{
        $("#add_fields_placeholderValue").hide();
    }
}

and call it when the page loads.

$(document).ready(function(){
    foobar();
    $("#add_fields_placeholder").change(function(){
        foobar();
    });
});

but i'd be curious to see what other folks usually do.

answered Aug 11 '12 at 23:17

Tuanderful

1,337
1
10
13

sure, hope it helps. similar to other answers, this comes in handy when you reload the page with a pre-populated form. – Tuanderful Aug 11 '12 at 23:25

score 1 · Answer 4 · answered Aug 11 '12 at 23:19

1

You could simply do it with CSS:

Change the ID here:

<input type="text" name="add_fields_placeholderValue" id="add_fields_placeholderValue">

since you already use it here

<div id="add_fields_placeholderValue">

and then add this css:

#add_fields_placeholderValue {
  display: none;       
}

answered Aug 11 '12 at 23:19

Brandon

3,174
1
16
7

Thanks. I dont think it'd be really the best option for this case. But you gave me an extra option on other cases ;) Thanks. – inrob Aug 11 '12 at 23:22
I agree if for some reason javascript isn't enabled the div would never be shown. You might still want to resolve the shared ID though. – Brandon Aug 11 '12 at 23:27

score 1 · Answer 5 · answered Aug 11 '12 at 23:21

if you change the anonymous method into a callable function, you should be able to call it on Ready()

e.g.

$(document).ready(function () {
    $("#add_fields_placeholder").change(ShowIfOther);
    ShowIfOther();
});

function ShowIfOther() {
    if ($("#add_fields_placeholder").val() == "Other") {
        $("#add_fields_placeholderValue").show();
    } else {
        $("#add_fields_placeholderValue").hide();
    }
}

score 1 · Answer 6 · edited May 23 '17 at 12:00

1

Place the following code beneath the placeholder elements:

<script>$('#add_fields_placeholderValue').hide();</script>

Doing it in the ready handler may induce 'flashing' of the element in certain circumstances:

Twinkling when call hide() on document ready

edited May 23 '17 at 12:00

Community

1
1

answered Aug 11 '12 at 23:23

Dave R.

7,206
3
30
52

jQuery: hide and show an input element

6 Answers6

Linked