Price change with jquery (radio button select)

JavaScript
1

im trying change price of dropdwon (select option) on radio button checked.

trp
trp713Ă—278 45.3 KB

when user will selection option from dropdown and checked NO carpet or Yes Carpet price amount will change according to user input

<form action="" method="post">
    <div class="row">
        <div class="col-md-4 mb-3">
        <select name="cars" id="form-select" class="form-select carsOption">
            <option value="select your option">Select your option</option>
            <option data-price="350"  data-carpet="410" value="1 bed 1 bath" id="1">1 bed 1 bath</option>
            <option data-price="350" data-carpet="410" value="2 bed 1 bath" id="2">2 bed 1 bath</option>
            <option data-price="350" data-carpet="500" value="3 bed 1 bath" id="3">3 bed 1 bath</option>
            <option data-price="400" data-carpet="500" value="3 bed 2 bath" id="4">3 bed 2 bath</option>
            <option data-price="454" data-carpet="600" value="4 bed 2 bath" id="5">4 bed 2 bath</option>
            <option data-price="500" data-carpet="645" value="5 bed 2 bath" id="6">5 bed 2 bath</option>
        </select>
        </div>
        <div class="col-md-2 mb-3">
            <label for="nocarpet">
            <input type="radio" name="clean" class="radioClean form-check-input" id="nocarpet" value="nocarpet">
            No Carpet
            </label>
        </div>
        <div class="col-md-2 mb-3">
            <label for="yescarpet">
                <input type="radio"  name="clean" class="radioClean form-check-input" id="yescarpet" value="yescarpet">
                Yes Carpet
            </label>
        </div>
        <div class="col-md-3 mb-3">
            <!-- <input type="text" name="price" class="form-control" id="markup"> -->
            <span class="product-price" itemprop="price" id="markup"></span>
        </div>
    </div>
</form>

Jquery

 $('input:radio[name="clean"]').change(
            function(){
                if ($(this).is(':checked') && $(this).val() == 'nocarpet') {
                    var basePrice = +($('#markup').html()).replace(/[^0-9\.]+/g,"");
                    $(".form-select").change(function() {
                    newPrice = basePrice;
                    $(".form-select option:selected").each(function() {
                        newPrice = +$(this).attr('data-price')
                    });
                    $("#markup").html("$" + newPrice.toFixed(2));
                    });
                }
        });

        $('input:radio[name="clean"]').change(
            function(){
                if ($(this).is(':checked') && $(this).val() == 'yescarpet') {
                    var basePrice = +($('#markup').html()).replace(/[^0-9\.]+/g,"");
                    $(".form-select").change(function() {
                    newPrice = basePrice;
                    $(".form-select option:selected").each(function() {
                        newPrice = +$(this).attr('data-carpet')
                    });
                    $("#markup").html("$" + newPrice.toFixed(2));
                    });
                }
        });

when select option from dropdown when 1st radio button is selected price changes according but when i select second radio button (yes carpet) price does changes, i have again select option from drop down for price change… on shift radio button price doesn’t after shifting radio button i have to choose option from dropdown again for price to works

2

Hi,

You can do it like this.

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="utf-8">
  <title>Dynamic select</title>
</head>
<body>
  <form action="" method="post">
    <div class="row">
      <div class="col-md-4 mb-3">
        <select name="cars" id="form-select" class="form-select carsOption">
          <option value="select your option">Select your option</option>
          <option data-price="350"  data-carpet="410" value="1 bed 1 bath" id="1">1 bed 1 bath</option>
          <option data-price="350" data-carpet="410" value="2 bed 1 bath" id="2">2 bed 1 bath</option>
          <option data-price="350" data-carpet="500" value="3 bed 1 bath" id="3">3 bed 1 bath</option>
          <option data-price="400" data-carpet="500" value="3 bed 2 bath" id="4">3 bed 2 bath</option>
          <option data-price="454" data-carpet="600" value="4 bed 2 bath" id="5">4 bed 2 bath</option>
          <option data-price="500" data-carpet="645" value="5 bed 2 bath" id="6">5 bed 2 bath</option>
        </select>
      </div>

      <div class="col-md-2 mb-3">
        <label for="nocarpet">
          <input type="radio" name="clean" class="radioClean form-check-input" id="nocarpet" value="nocarpet" checked>
        No Carpet
        </label>
      </div>
      <div class="col-md-2 mb-3">
        <label for="yescarpet">
          <input type="radio"  name="clean" class="radioClean form-check-input" id="yescarpet" value="yescarpet">
        Yes Carpet
        </label>
      </div>
      <div class="col-md-3 mb-3">
        <span class="product-price" itemprop="price" id="markup"></span>
      </div>
    </div>
  </form>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script src="index.js"></script>
  <script>
    const price = $('.product-price');
    const mySelect= $('#form-select');
    const carpetControl = $('input[name="clean"]');

    function updatePrice() {
      const withCarpet = $('input[name="clean"]:checked').val() === 'yescarpet';
      const selectedOpt = mySelect.find(":selected");
      if (withCarpet) {
        price.text(selectedOpt.data('price'));
      } else {
        price.text(selectedOpt.data('carpet'));
      }
    }

    [mySelect, carpetControl].forEach((el) => {
      el.on('change', updatePrice);
    });
  </script>
</body>
</html>

This code doesn’t take into account all select/radio button combinations (i.e. what if the user selects an option and a price is displayed, then they reselect the “select your option” option), but it should hopefully put you on the right track.

Let me know if you have any questions.

4

thank you sir, its works perfectly as my requirement

1 Like
5

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.