Unable to read radio button and select box simultaneously in JQuery

Question

So I have a fairly simple task at hand. Read the values from a Radio button and a select box, multiply them and show them in a span tag.

The problem is, I can't read both simultaneously. If I read one, the other doesn't send data through.

Here's my 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>
});

Here's my JQuery:

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

I can only get either the radio button's value or the select box's value to show up in my price span. Also, this needs to happen in real-time, so the values need to change if there are any changes in the text field as well.

Also in case, you were wondering the PHP echos are values I've pulled from a MySQL database and stored in variables. They're showing up just fine.

How do I get the values of the radio button and the select box, multiply them and show them in the price span?

@MeesEgberts Didn't work. How does it even matter though? Like I'm not even referencing the name anywhere — YaddyVirus, Mar 10 '20 at 08:15
No, but if they have the same `name` you can only select one and not both — , Mar 10 '20 at 08:16
I got it. They don't have the same names anymore and I'm still having the same problem — YaddyVirus, Mar 10 '20 at 08:17
maybe you can find your answer here: https://stackoverflow.com/questions/596351/how-can-i-know-which-radio-button-is-selected-via-jquery — , Mar 10 '20 at 08:19
@TobiasSchäfer do you mean something like: $('input[type=checkbox]').change(function(){ //random code here }); — YaddyVirus, Mar 10 '20 at 08:19
You currently read the values when the page is loaded. But I guess you want to recalculate the price after the user chooses. So yes, you need to listen to this change. Yes, this function will get you somewhere — Tobias Schäfer, Mar 10 '20 at 08:22
@TobiasSchäfer Okay so do I need two separate listeners or is there a global one I can use? — YaddyVirus, Mar 10 '20 at 08:25
You can add a class and listen to that: https://api.jquery.com/change/ — Tobias Schäfer, Mar 10 '20 at 08:27

score 0 · Answer 1 · answered Mar 10 '20 at 08:49

You can try the following code:

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);

Unable to read radio button and select box simultaneously in JQuery

1 Answers1