Get value in JS from a Select Option HTML

Question

I have a select element in the HTML and I'm trying to pull the selected options value to add to the equation in JS, but I have no clue how to do it.

$(document).ready(function() {
  $('input[type="text"]').keyup(function() {
    var val1 = parseInt($('.value1').val());
    var val2 = parseInt($('.value2').val());
    var val3 = parseInt($('.value3').val());
    var val4 = parseInt($('.income').val());
    var sum = val1 + (val1 / 100 * 20);
    $("input#result").val(sum);

    var sum = (val1 / 100 * 20);
    $("input#loading").val(sum);

    var sum = (val1 + (val1 / 100 * 20)) * val4;
    $("input#annualincome").val(sum);
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span class="$prefix">$</span>
<input type="text" class="input value1" placeholder="Course Cost">
<span class="$prefix">$</span>
<input type="text" class="input value3" id="loading" disabled="disabled" placeholder="20% Loading">
<span class="$prefix">$</span>
<input type="text" disabled="disabled" id="result" placeholder="Total VET Student Loan Amount">
<select name="annualincome" class="input value2" id="income" placeholder="Your Annual Income">
  <option value="" disabled selected hidden>Your Annual Income</option>
  <option value="0">Below $45,881</option>
  <option value="0.01">$45,881 - $52,973 (1%)</option>
  <option value="0.02">$52,974 - $56,151 (2%)</option>
  <option value="0.025">$56,152 – $59,521 (2.5%)</option>
  <option value="0.03">$59,522 - $ 63,092 (3%)</option>
  <option value="0.035">$63,093 - $66,877 (3.5%)</option>
  <option value="0.04">$66,878 - $70,890 (4%)</option>
  <option value="0.045">$70,891 - $75,144 (4.5%)</option>
  <option value="0.05">$75,145 - $79,652 (5%)</option>
  <option value="0.055">$79,653 - $84,432 (5.5%)</option>
  <option value="0.06">$84,433 - $89,498 (6%)</option>
  <option value="0.065">$89,499 - $94,868 (6.5%)</option>
  <option value="0.07">$94,869 - $100,560 (7%)</option>
  <option value="0.075">$100,561 - $106,593 (7.5%)</option>
  <option value="0.08">$106,594 - $112,989 (8%)</option>
  <option value="0.085">$112,990 - $119,769 (8.5%)</option>
  <option value="0.09">$119,770 - $126,955 (9%)</option>
  <option value="0.095">$126,956 - $134,572 (9.5%)</option>
  <option value="0.10">$134,573 and above (10%)</option>
</select>
<br> Your after tax repayments are
<span class="$prefix">$</span>
<input type="text" disabled="disabled" id="peryearresult" placeholder="After Tax Repayment"> Per Year

Does this answer your question? [Get selected value in dropdown list using JavaScript](https://stackoverflow.com/questions/1085801/get-selected-value-in-dropdown-list-using-javascript) — A. Meshu, Feb 03 '20 at 09:11
`var val4 = parseInt($('.income').val());` will always give you `0` as they values are all `<1` (it truncates, not rounds) - change to `var val4 = parseFloat($('.income').val());` or use integer values and divide to get a %age — freedomn-m, Feb 03 '20 at 09:15

technophyle · Answer 1 · 2020-02-03T09:33:51.723

Try the following code:

$(document).ready(function() {
  function calculate() {
    var val1 = parseInt($('.value1').val());
    var val3 = parseInt($('.value3').val());
    
    var income = $('#income').val() || 0; // <== income value
    var sum = val1 + (val1 / 100 * 20);
    console.log(sum);
    $("input#result").val(sum);

    sum = (val1 / 100 * 20);
    $("input#loading").val(sum);

    sum = (val1 + (val1 / 100 * 20)) * income;
    $("input#annualincome").val(sum);
  }
  
  $('input[type="text"]').keyup(function() {
    calculate();
  });
  
  $('#income').change(function() {
    calculate();
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span class="$prefix">$</span>
<input type="text" class="input value1" placeholder="Course Cost">
<span class="$prefix">$</span>
<input type="text" class="input value3" id="loading" disabled="disabled" placeholder="20% Loading">
<span class="$prefix">$</span>
<input type="text" disabled="disabled" id="result" placeholder="Total VET Student Loan Amount">
<select name="annualincome" class="input value2" id="income" placeholder="Your Annual Income">
  <option value="" disabled selected hidden>Your Annual Income</option>
  <option value="0">Below $45,881</option>
  <option value="0.01">$45,881 - $52,973 (1%)</option>
  <option value="0.02">$52,974 - $56,151 (2%)</option>
  <option value="0.025">$56,152 – $59,521 (2.5%)</option>
  <option value="0.03">$59,522 - $ 63,092 (3%)</option>
  <option value="0.035">$63,093 - $66,877 (3.5%)</option>
  <option value="0.04">$66,878 - $70,890 (4%)</option>
  <option value="0.045">$70,891 - $75,144 (4.5%)</option>
  <option value="0.05">$75,145 - $79,652 (5%)</option>
  <option value="0.055">$79,653 - $84,432 (5.5%)</option>
  <option value="0.06">$84,433 - $89,498 (6%)</option>
  <option value="0.065">$89,499 - $94,868 (6.5%)</option>
  <option value="0.07">$94,869 - $100,560 (7%)</option>
  <option value="0.075">$100,561 - $106,593 (7.5%)</option>
  <option value="0.08">$106,594 - $112,989 (8%)</option>
  <option value="0.085">$112,990 - $119,769 (8.5%)</option>
  <option value="0.09">$119,770 - $126,955 (9%)</option>
  <option value="0.095">$126,956 - $134,572 (9.5%)</option>
  <option value="0.10">$134,573 and above (10%)</option>
</select>
<br> Your after tax repayments are
<span class="$prefix">$</span>
<input type="text" disabled="disabled" id="peryearresult" placeholder="After Tax Repayment"> Per Year JS

Notice that I've added the onchange event of the select field as well, because you might want to re-calculate the fees upon change.

`onchange` does work, but the values are the same. it's not part of the question to fix that logic. and thanks for the shortened version. updated. — technophyle, Feb 03 '20 at 09:33
ok, yeah your solution looks better. still, I don't think my answer deserves a downvote since those things you mentioned are not the point of the question. — technophyle, Feb 03 '20 at 09:36
There is no longer a downvote on your answer - the downvote was for the non-working of the code — mplungjan, Feb 03 '20 at 09:36

mplungjan · Answer 2 · 2020-02-03T10:36:42.853

Use ID on all fields instead of class.
Change the function to one you can call on change or on input
You need parseFloat of the percentage in the annualincome
Use better variable names.
be consistent in IDs for example annualincome has the id of income so your code fails

I am not sure the logic of the calculations below are correct, your algorithms were not super clear

But the code runs so just move the calculations around as needed

const calc = () => {
  var cost = parseInt($('#cost').val());
  var loading = parseInt($('#loading').val());
  var income = parseFloat($('#annualincome').val());
  var loading = (cost / 100 * 20);
  var sum = cost + loading
  $("#result").val(sum.toFixed(2));
  $("#loading").val(loading.toFixed(2));
  var total = cost + (loading * income);

  if (isNaN(total)) total = 0;
  $("#peryearresult").val(total.toFixed(2));
}

$(document).ready(function() {
  $('.input').on("input", calc)
  $('#income').on("input", calc)
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span class="$prefix">$</span>
<input type="text" class="input" id="cost" placeholder="Course Cost">
<span class="$prefix">$</span>
<input type="text" class="input" id="loading" disabled="disabled" placeholder="20% Loading">
<span class="$prefix">$</span>
<input type="text" disabled="disabled" id="result" placeholder="Total VET Student Loan Amount">
<select name="annualincome" class="input" id="annualincome" placeholder="Your Annual Income">
  <option value="" disabled selected hidden>Your Annual Income</option>
  <option value="0">Below $45,881</option>
  <option value="0.01">$45,881 - $52,973 (1%)</option>
  <option value="0.02">$52,974 - $56,151 (2%)</option>
  <option value="0.025">$56,152 – $59,521 (2.5%)</option>
  <option value="0.03">$59,522 - $ 63,092 (3%)</option>
  <option value="0.035">$63,093 - $66,877 (3.5%)</option>
  <option value="0.04">$66,878 - $70,890 (4%)</option>
  <option value="0.045">$70,891 - $75,144 (4.5%)</option>
  <option value="0.05">$75,145 - $79,652 (5%)</option>
  <option value="0.055">$79,653 - $84,432 (5.5%)</option>
  <option value="0.06">$84,433 - $89,498 (6%)</option>
  <option value="0.065">$89,499 - $94,868 (6.5%)</option>
  <option value="0.07">$94,869 - $100,560 (7%)</option>
  <option value="0.075">$100,561 - $106,593 (7.5%)</option>
  <option value="0.08">$106,594 - $112,989 (8%)</option>
  <option value="0.085">$112,990 - $119,769 (8.5%)</option>
  <option value="0.09">$119,770 - $126,955 (9%)</option>
  <option value="0.095">$126,956 - $134,572 (9.5%)</option>
  <option value="0.10">$134,573 and above (10%)</option>
</select>
<br> Your after tax repayments are
<span class="$prefix">$</span>
<input type="text" disabled="disabled" id="peryearresult" placeholder="After Tax Repayment"> Per Year

Arnab Dibosh · Accepted Answer · 2020-02-04T07:06:57.447

Try this code. On Dropdown selection change the values will be recalculated.

 $(document).ready(function() {
            $('input[type="text"]').keyup(function() {
                calculate();
            });

            $('#income').change(function() {
                calculate();
            });

            function calculate(){
                var val1 = parseFloat($('.value1').val());
                var val2 = parseFloat($('.value2').val());
                var val3 = parseFloat($('.value3').val());
                var val4 = parseFloat($('#income').val());
                var sum = val1 + (val1 / 100 * 20);
                $("input#result").val(sum);

                sum = (val1 / 100 * 20);
                $("input#loading").val(sum);

                sum = (val1 + (val1 / 100 * 20)) * val4;
                $("input#peryearresult").val(sum);
            }
        });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

  <span class="$prefix">$</span>
    <input type="text" class="input value1" placeholder="Course Cost">
    <span class="$prefix">$</span>
    <input type="text" class="input value3" id="loading" disabled="disabled" placeholder="20% Loading">
    <span class="$prefix">$</span>
    <input type="text" disabled="disabled" id="result" placeholder="Total VET Student Loan Amount">
    <select name="annualincome" class="input value2" id="income" placeholder="Your Annual Income">
      <option value="" disabled selected hidden>Your Annual Income</option>
      <option value="0">Below $45,881</option>
      <option selected value="0.01">$45,881 - $52,973 (1%)</option>
      <option value="0.02">$52,974 - $56,151 (2%)</option>
      <option value="0.025">$56,152 – $59,521 (2.5%)</option>
      <option value="0.03">$59,522 - $ 63,092 (3%)</option>
      <option value="0.035">$63,093 - $66,877 (3.5%)</option>
      <option value="0.04">$66,878 - $70,890 (4%)</option>
      <option value="0.045">$70,891 - $75,144 (4.5%)</option>
      <option value="0.05">$75,145 - $79,652 (5%)</option>
      <option value="0.055">$79,653 - $84,432 (5.5%)</option>
      <option value="0.06">$84,433 - $89,498 (6%)</option>
      <option value="0.065">$89,499 - $94,868 (6.5%)</option>
      <option value="0.07">$94,869 - $100,560 (7%)</option>
      <option value="0.075">$100,561 - $106,593 (7.5%)</option>
      <option value="0.08">$106,594 - $112,989 (8%)</option>
      <option value="0.085">$112,990 - $119,769 (8.5%)</option>
      <option value="0.09">$119,770 - $126,955 (9%)</option>
      <option value="0.095">$126,956 - $134,572 (9.5%)</option>
      <option value="0.10">$134,573 and above (10%)</option>
    </select>
    <br> Your after tax repayments are
    <span class="$prefix">$</span>
    <input type="text" disabled="disabled" id="peryearresult" placeholder="After Tax Repayment"> Per Year

This one works great! My only problem now, is that if I change the option in the dropdown menu, the code doesn't update. How would I be able to add a "calculate" button that refreshes the calculation? — moxiemason, Feb 04 '20 at 00:57
Modified the code to recalculate the values on Dropdown selection change — Arnab Dibosh, Feb 04 '20 at 07:08

Get value in JS from a Select Option HTML

3 Answers3