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.

Travis J · Accepted Answer · 2012-08-11 23:15:20Z

26

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/

answered Aug 11, 2012 at 23:15

Travis J

82.6k43 gold badges213 silver badges280 bronze badges

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

Comments

Musa · Accepted Answer · 2012-08-11 23:27:05Z

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, 2012 at 23:27

answered Aug 11, 2012 at 23:18

Musa

97.9k17 gold badges123 silver badges144 bronze badges

1 Comment

Brandon Over a year ago

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.

Tuanderful · Accepted Answer · 2012-08-11 23:17:23Z

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, 2012 at 23:17

Tuanderful

1,3191 gold badge10 silver badges13 bronze badges

1 Comment

Tuanderful Over a year ago

sure, hope it helps. similar to other answers, this comes in handy when you reload the page with a pre-populated form.

Brandon · Accepted Answer · 2012-08-11 23:19:11Z

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, 2012 at 23:19

Brandon

3,5541 gold badge18 silver badges7 bronze badges

2 Comments

inrob Over a year ago

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.

Brandon Over a year ago

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.

Craig Godden-Payne · Accepted Answer · 2012-08-11 23:21:32Z

1

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();
    }
}

answered Aug 11, 2012 at 23:21

Craig Godden-Payne

2451 silver badge4 bronze badges

Comments

Community · Accepted Answer · 2017-05-23 12:00:27Z

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, 2017 at 12:00

CommunityBot

11 silver badge

answered Aug 11, 2012 at 23:23

Dave R.

7,3033 gold badges33 silver badges53 bronze badges

Collectives™ on Stack Overflow

jQuery: hide and show an input element

6 Answers 6

Comments

1 Comment

1 Comment

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

1 Comment

1 Comment

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related