Получить значение в JS из опции выбора HTML - PullRequest
Новая
       1

Получить значение в JS из опции выбора HTML

0 голосов
/ 03 февраля 2020

У меня есть элемент select в HTML, и я пытаюсь вытянуть выбранное значение опций, чтобы добавить к уравнению в JS, но я понятия не имею, как это сделать. 

$(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

Ответы [ 3 ]

0 голосов
/ 03 февраля 2020
  1. Используйте ID во всех полях вместо класса.
  2. Измените функцию на функцию, которую можно вызывать при изменении или при вводе
  3. Вам необходим parseFloat процента в годовом доходе
  4. Используйте более подходящие имена переменных.
  5. будьте единообразны в идентификаторах, например у Annualincome есть идентификатор дохода, поэтому ваш код не работает

Я не уверен, что лог c Приведенные ниже расчеты верны, ваши алгоритмы не были супер ясными

Но код выполняется, поэтому просто перемещайте вычисления по мере необходимости 

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
0 голосов
/ 03 февраля 2020

Попробуйте этот код. При изменении выпадающего списка значения будут пересчитаны. 

 $(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
0 голосов
/ 03 февраля 2020

Попробуйте следующий код: 

$(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

Обратите внимание, что я также добавил событие onchange в поле select, потому что вы можете пересчитать комиссию при изменении .

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...