Getting input value from a data attribute

Question

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?

Answer 1

Edit, Updated

I meant - getting the data-tenure and this will be the input value. So if the user selects 1, the input value will be 0.0298. If the user selects 2 the input value will be 0.0387

You can use change event at .dropdown2 element, document.querySelector() with selector "input.loan-rate" , set .value property with event.target Element.dataset at change event handler

document.querySelector(".dropdown2").addEventListener("change", function(event) {
  // set value here   
  document.querySelector("input.loan-rate")
  .value = event.target.dataset.tenure; 
})

Answer 2

 <select class="dropdown2 loan-tenure" id="selectId">
    <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>

  $(document).ready(function(){
    $("#selectId").change(function(){
     alert($("#selectId option:selected").attr("data-tenure"));
      alert($("#selectId").val());
  });
});

Answer 3

why don't you use select tag to take input

<select name="" form="tenureform">
  <option value="">1</option>
  <option value="">2</option>
  <option value="">3</option>
  <option value="">4</option>
</select>

Answer 4

<select onchange="changeInput()" 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>

function onChange(evt) {
    document.querySelector("input.loan-rate").dataset.tenure = evt.currentTarget.value;
}

Answer 5

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>

Answer 6

This is a vanilla js solution. There will probably be tons of jquery responses. You do need the onchange event:

<select class="dropdown2 loan-tenure" onchange="document.getElementById('loanrate').value = this.options[this.selectedIndex].dataset.tenure">

Make sure you add the id 'loadrate' to your input. See it in action here .

Answer 7

You can use selectedIndex to get the the current selected option. Then use getAttribute to get the data-tenure attribute value.Use getElementsByClassName to select the hidden input element and set it's value.

function tenure_rates(){
var e = document.getElementById("dropdown2");
var _option = e.options[e.selectedIndex].getAttribute('data-tenure');
document.getElementsByClassName('loan-rate')[0].value = _option;
}

JSFIDDLE

Note: Initially the value of hidden field will always be empty,since 1 is pre selected. So if an user don't change the option you will never find any value set this hidden element. You can select an option like Select

Answer 8

Try it :

 <!DOCTYPE html> <html> <head></head> <body> <div class="ten columns"> <input type="hidden" class="loan-rate" value="" /> <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> <script> var sel = document.querySelector(".loan-tenure"); var hidEle = document.querySelector(".loan-rate"); sel.onchange = function(){ var value = sel.value; hidEle.setAttribute("value",value); alert("Input hidden value is : " + hidEle.getAttribute("value")); } </script> </body> </html>