rory-h rory-h - 4 months ago 14
HTML Question

Getting input value from a data attribute

I have this code below where user can choose - each dropdown option has different data-tenure:

<div class="ten columns">
<p class="slider-label">Loan Tenure (Years)</p>
<!-- <input type="text" class="loan-tenure numeric-only" /> -->
<div class="field">
<div class="picker picker-dd2">
<select class="dropdown2 loan-tenure">
<option class="dropdown2-opt" data-tenure=“0.0298” value="1">1</option>
<option class="dropdown2-opt" data-tenure=“0.0387” value="2">2</option>
<option class="dropdown2-opt" data-tenure=“0.0418” value="3">3</option>
<option class="dropdown2-opt" data-tenure=“0.0434” value="4">4</option>
<option class="dropdown2-opt" data-tenure=“0.0444” value="5">5</option>
</select>
</div>
</div>
</div>


What I want is to set the input value to the data-tenure above - :

<input type="hidden" class="loan-rate" value="??" />


Do I need to add onchange() function to the dropdown above?

Leo Leo
Answer

Try the below code. Here we are passing the object via an onchange event.

<div class="ten columns">
  <p class="slider-label">Loan Tenure (Years)</p>
  <!-- <input type="text" class="loan-tenure numeric-only" /> -->
  <div class="field">
    <div class="picker picker-dd2">
      <select onchange="tenure_rates(this)" class="dropdown2 loan-tenure">
        <option class="dropdown2-opt" data-tenure=“0.0298” value="1">1</option>
        <option class="dropdown2-opt" data-tenure=“0.0387” value="2">2</option>
        <option class="dropdown2-opt" data-tenure=“0.0418” value="3">3</option>
        <option class="dropdown2-opt" data-tenure=“0.0434” value="4">4</option>
        <option class="dropdown2-opt" data-tenure=“0.0444” value="5">5</option>
      </select>
    </div>
  </div>
</div>

<script type="text/javascript">
    function tenure_rates(dropdownValue) {
       $('.dropdown2-opt').data('tenure',dropdownValue.value);
    }
</script>
Comments