Невозможно прочитать радио-кнопку и выбрать поле одновременно в JQuery

Question

Итак, передо мной стоит довольно простая задача. Прочитайте значения из переключателя и поля выбора, умножьте их и покажите их в теге span.

Проблема в том, что я не могу прочитать оба одновременно. Если я читаю один, другой не отправляет данные через.

Вот мой HTML:

<form class="" action="" method="post">
  <div class="form-group" required oninvalid="this.setCustomValidity('Please select a quanitity')" oninput="this.setCustomValidity('')">
    <label for="">Select purchase quantity:</label><br>
    <div class="form-check form-check-inline">
      <input class="form-check-input" type="radio" name="qty" id="bachelorsRadio" value="<?php echo $price125; ?>">
      <label class="form-check-label" for="bachelorsRadio">125 grams for &#8377; <?php echo $price125; ?></label>
    </div>
    <div class="form-check form-check-inline">
      <input class="form-check-input" type="radio" name="qty" id="mastersRadio" value="<?php echo $price250; ?>">
      <label class="form-check-label" for="mastersRadio">250 grams for &#8377; <?php echo $price250; ?></label>
    </div>
  </div>
    <div class="form-group col-md-6">
      <label for="orderquantity">Select packet quanitity:</label>
      <select class="custom-select"  id="myselect">
        <option selected>Select packet quantity</option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
      </select>
    </div>
    <div class="col-6">
      <p> Total price: &#8377; <span class="price">0</span> </p>
    </div>
  <button type="button" class="btn col-4 btn-outline-success">Buy now!</button>
  <button type="button" class="btn col-4 btn-outline-warning">Add to cart &#x1F6D2;</button>
</form>
});

Вот мой JQuery:

$(document).ready(function(){
  var amt = $('input[type=radio]:checked').val();
  var packet = $("#myselect option:selected").val();
  var final = amt*packet;
  $('.price').html(final);

Я могу получить только значение переключателя или значение поля выбора, чтобы отображаться в моем price промежутке. Кроме того, это должно происходить в режиме реального времени, поэтому значения должны меняться, если есть какие-либо изменения и в текстовом поле.

Также в случае, если вам интересно, PHP echo s это значения, которые я извлек из базы данных MySQL и которые хранятся в переменных. Они отображаются просто отлично.

Как получить значения переключателя и поля выбора, умножить их и показать их в диапазоне price?

Answer 1

Вы можете попробовать следующий код:

function calculateFinal() {
  // Get the two values and parse them to numbers.
  // You can use `parseInt()` if you're only expecting integers.
  var amt = parseFloat($('input[name="qty"]:checked').val());
  var packet = parseFloat($("#myselect option:selected").val());

  // Multiply the values:
  var final = amt*packet;

  // Set the value using `.text()` as we're not adding any HTML.
  // `.text()` is safer than `.html()` as it protects against possible XSS.
  $('.price').text(final);
}

// Perform the calculation once the page has loaded:
$(calculateFinal);

// Listen to the change events on the radio buttons and the select:
$("input[name='qty'], #myselect").on("change", calculateFinal);