JQuery Hidden Object Input Object

Question

I have this jsfiddle code. All I'm trying to do is hide / show a specific input object if select is checked.

JSFIDDLE CODE

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

Therefore, if the user selects "Other", he displays a different input object.

Now the problem is this. First, when you open the page, the first option is selected by default and an additional input object is displayed. It hides after choosing another option.

Is there any trick to hide it the first time the page loads? Not only when choosing a value manually.

Thanks guys.

Answer 1

Just add:

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

After the announcement of the announcement, changes to the 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/

Answer 2

You can use css to hide it initially

 #add_fields_placeholderValue{display:none;} 

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

Also, you have several elements with the same identifier (specified by Brandon), which is unacceptable

Answer 3

I usually define 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 would be interested to know what other people usually do.

Answer 4

You can simply do this with CSS:

Change id here:

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

since you are already using it here

 <div id="add_fields_placeholderValue"> 

and then add this css:

 #add_fields_placeholderValue { display: none; }​ 

Answer 5

if you change the anonymous method to the called function, you should be able to call it Ready ()

eg.

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

Answer 6

Place the following code under the placeholder elements:

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

Doing this in the finished handler may cause the element to “blink” in certain circumstances:

Flicker when calling hide () while preparing a document