CODEWITHSUNDEEP
jquery
jeewan
jeewan

Reputation: 1605

Not Working: changing placeholder's value of input type accoring to the select value in select option

I have the following HTML:

<span style="margin-top: -2px;">    
    <select id="selectID" style="width: 150px">
    <option value="customerID">Customer ID</option>
        <option value="ECPDProfileID">ECPD Profile ID</option>
</select>

</span>

<input type="text" id="customerProfileID" placeholder="here"/>

I was trying to change the placeholder value according to the value selected in the select option.

I tried the following jQuery code for this:

<script type="text/javascript">
  $(document).ready(function(){
      var v = $("#selectID").val();
  $("#customerProfileID").attr('placeholder', v);
  });
</script>

This code changes the placeholder's value only once when the page loads first time, as I know I kept it inside document ready function. I wanted to change the value of placeholder according to the value is selected in the select option. Do I need to make another call or can do from inside the document ready function, or any other solution?

Upvotes: 1

Views: 600

Answers (2)

Alexan
Alexan

Reputation: 8637

Put it inside $('#selectID').change

<script type="text/javascript">
  $(document).ready(function(){
    $('#selectID').change(function () {
      var v = $("#selectID").val();
      $("#customerProfileID").attr('placeholder', v);
    });
  });
</script>

Upvotes: 1

Rik Leigh
Rik Leigh

Reputation: 1328

This should work

<script type="text/javascript">
    $(document).ready(function(){
        $('#selectID').on('change', function(){
            $("#customerProfileID").attr('placeholder', $(this).val());
        });
    });
</script>

Upvotes: 1

Related Questions