CODEWITHSUNDEEP
javascriptjqueryhtml
Arron
Arron

Reputation: 13

jQuery onChange in a dropdown

I'm trying to get a dropdown to change a value of an input dependent upon the option attribute however it keeps putting undefined as the value.

<select class="form-control" name="ph1_plantype" onChange="document.getElementById('ph1_price').value=$(this).attr('data-price');">
    <option data-price="Arron is shit">Plan Type</option>
    <option data-price="1955">Topaz</option>
    <option data-price="2945">Pearl</option>
    <option data-price="3195">Sapphire</option>
    <option data-price="3595">Ruby</option>
    <option data-price="1695">Cremation Direct</option>
    <option>Emerald</option>
    <option>Other</option>
</select><br />

<div class="form-group input-group">
    <span class="input-group-addon"><i class="fa fa-gbp"></i></span>
    <input type="text" id="ph1_price" name="ph1_price" class="form-control" placeholder="Plan Price (excl interest)" >
</div>

Upvotes: 0

Views: 58

Answers (3)

Mateo Barahona
Mateo Barahona

Reputation: 1391

Try this. You're not taking data-price from selected option, but from select directly when you're using $(this).

<select class="form-control" name="ph1_plantype" onChange="$('#ph1_price').val($(this).find(':selected').data('price'));">
    <option data-price="Arron is shit">Plan Type</option>
    <option data-price="1955">Topaz</option>
    <option data-price="2945">Pearl</option>
    <option data-price="3195">Sapphire</option>
    <option data-price="3595">Ruby</option>
    <option data-price="1695">Cremation Direct</option>
    <option>Emerald</option>
    <option>Other</option>
</select><br />

<div class="form-group input-group">
    <span class="input-group-addon"><i class="fa fa-gbp"></i></span>
    <input type="text" id="ph1_price" name="ph1_price" class="form-control" placeholder="Plan Price (excl interest)" value="" />
</div>

As a side note, you better not use inline handlers. Better use this :

$('.form-control').change(function () {
    $('#ph1_price').val($(this).find(':selected').data('price'));
});

Upvotes: 1

Sudhansu Choudhary
Sudhansu Choudhary

Reputation: 3360

It is considered a bad practice to use inline handlers. Use jQuery's change or on('change' to bind change event on the element.

$('.form-control').change(function () {
    var price = $(this).find(':selected').attr('data-price');
    $('#ph1_price').val(price);
});

By using data() to get data-* on element 

$('select.form-control').change(function () {
    $('#ph1_price').val($(this).find(':selected').data('price'));
});

Live Demo

$('select.form-control').change(function() {
  $('#ph1_price').val($(this).find(':selected').data('price') || 'No price available');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="form-control" name="ph1_plantype">
  <option data-price="Arron is shit">Plan Type</option>
  <option data-price="1955">Topaz</option>
  <option data-price="2945">Pearl</option>
  <option data-price="3195">Sapphire</option>
  <option data-price="3595">Ruby</option>
  <option data-price="1695">Cremation Direct</option>
  <option>Emerald</option>
  <option>Other</option>
</select>
<br />

<div class="form-group input-group">
  <span class="input-group-addon"><i class="fa fa-gbp"></i></span>
  <input type="text" id="ph1_price" name="ph1_price" class="form-control" placeholder="Plan Price (excl interest)">
</div>

Upvotes: 2

DoomageAplentty
DoomageAplentty

Reputation: 2732

When you are referencing $(this) you are referencing the drop down menu itself, hence the undefined data-price. You want to traverse one more step down your menu to find the selected option.

$(this).find(':selected').attr('data-price')

I have put this together here: http://jsfiddle.net/wvsLcqop/3/

Upvotes: 0

Related Questions