Change placeholder of input when I select Option

Question

I have been trying out some jQuery coding but doesn't seem to work. In the #vat input, I need the placeholder to change.

    <select id="VatExpense">
        <option value="" disabled selected></option>
        <option value="0"></option>
        <option value="1"></option>
        <option value="0"></option>
        <option value="0"></option>
        <option value="1"></option>
    </select>

   <input type="text" id="vat" placeholder="Rate">

where is the problem? Also the value property should be unique! But if the text property is not important, then you can do it like this. — Legends, Mar 25 '15 at 11:31
I need the #vat input placeholder to change when I select an option. When I select an option with value=0, the placeholder of #vat should change to 20%, and if it's value=1, to 0% @Legends — MarkBurns, Mar 25 '15 at 11:34
do you want to do it with native js or do you have jQuery at your hand? — Legends, Mar 25 '15 at 11:36

JNF · Accepted Answer · 2015-03-26T07:53:23.547

You should be using data- attributes, not value to determine the rates.

Demo fiddle

HTML:

<select id="VatExpense">
    <option data-rate="20" value="" disabled selected>Expense Type</option>
    <option data-rate="20" value="0">Telephone</option>
    <option data-rate="0" value="1">Public Transport & Taxis</option>
    <option data-rate="20" value="2">Computer Consumables</option>
    <option data-rate="20" value="3">Subsistence</option>
    <option data-rate="0" value="4">Overseas Travel</option>
</select>

Then read them in the jQuery and change the placeholder accordingly.

Script:

<script type="text/javascript">
   $(function(){
      $("#VatExpense").change(function(){
         $("#vat").attr("placeholder", $(this).find(":selected").data("rate") + "%");
      });
   });
</script>

score 1 · Answer 2 · answered Mar 25 '15 at 11:39

You can try this:

Jquery :

$("#VatExpense").on("change", function() {
    var vatExpense = $("#VatExpense option:selected").val();
    var vatPlaceholder = "Rate";
    if (vatExpense == 0) {
        vatPlaceholder = "Standard rate 20%";
    } else if (vatExpense == 1) {
        vatPlaceholder = "Zero Rate 0%";
    }
    $("#vat").attr("placeholder", vatPlaceholder);
});

JsFiddle: http://jsfiddle.net/ghorg12110/kzmL0e1j/

score 0 · Answer 3 · answered Mar 25 '15 at 11:35

0

You can do it like this :

(function() {
    var placeholders = {
        'value_':'Rate',
        'value_0':'Standard rate 20%',
        'value_1':'Zero Rate 0%'
    };
    $("#VatExpense").on('change', function(e) {   
       $("#vat").prop('placeholder', placeholders['value_' + $(this).val() ]);        
    });
})();

answered Mar 25 '15 at 11:35

RafH

4,504
2
23
23

I think this is a place to prefer [`attr` over `prop`](http://stackoverflow.com/questions/5874652/prop-vs-attr). Isn't it? – JNF Mar 26 '15 at 07:57

score 0 · Answer 4 · answered Mar 25 '15 at 11:35

Try below like this Demo Here use attr()

$('#VatExpense').change(function(){    
var selectedval = $(this).val();    
if(selectedval == 0){
  $('#vat').attr('placeholder','Standard rate 20%');
}else if(selectedval == 1){
 $('#vat').attr('placeholder','Zero Rate 0%');
}    
});

Change placeholder of input when I select Option

4 Answers4