CODEWITHSUNDEEP
javascriptjquery
Casper Round
Casper Round

Reputation: 343

How to get total data-price from all Select options (Total up each select)

How would I total up each select option and add them together? To get the total for their purchase? Here is my code:

I've looked through various posts and tried altering the code, yet no success.

It wants me to add more information, but theres not really much more I can add. So heres some lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 

<ul style="height:100%;overflow: visible;"> 


  <li class="flip-container" style="z-index: 20;">
    <div class="flipper default">
      <div class="front">
        <h2>Case</h2>
      </div>
      <div class="back" style="height:auto;width:400px;padding:15px; ">
        <h2>click to choose</h2>
        <script>
          function casePreview(sel) {
            document.getElementById('case').src = "" + sel.options[sel.selectedIndex].value;
          }
        </script>
        <form name="prieviewselect">
          <div class="custom-select">
            <label for="select-choice1" class="label select-1"><span class="selection-choice">Please choose something</span> </label>
            <select id="case" class="select" onChange="casePreview(this)" >
              <option data-price="0">Please select 1</option>
              <?php $type = $con->query("SELECT * FROM parts WHERE type = 'case'");?>
              <?php while($case = $type->fetch_object()): ?>
              <option value="<?= $case->image ?>" data-price="<?= $case->price ?>"><?= $case->name ?></option>
              <?php endwhile;?>
            </select>
          </div>
          <img name="case" id='case' src="" width="300px" height="auto">
        </form>
      </div>
    </div>
  </li>


  <li class="flip-container" style="z-index: 20;">
    <div class="flipper default">
      <div class="front">
        <h2>PSU</h2>
      </div>
      <div class="back" style="height:auto;width:400px;padding:15px; ">
        <h2>click to choose</h2>
        <script>
          function psuPreview(sel) {
            document.getElementById('Imgpsu').src = "" + sel.options[sel.selectedIndex].value;
          }
        </script>
        <form name="prieviewselect">
          <div class="custom-select">
            <label for="select-choice1" class="label select-1"><span class="selection-choice">Please choose something</span> </label>
            <select id="psu" class="select" onChange="psuPreview(this)" >
              <option data-price="0">Please select 1</option>
              <?php $psut = $con->query("SELECT * FROM parts WHERE type = 'psu'");?>
              <?php while($psu = $psut->fetch_object()): ?>
              <option value="<?= $psu->image ?>" data-price="<?= $psu->price ?>"><?= $psu->name ?></option>
              <?php endwhile;?>
            </select>
          </div>
          <img id='Imgpsu' src="https://www.evga.com/articles/00823/images/hero/750G2_prod_shot.png" width="300px" height="auto">
        </form>
      </div>
    </div>
  </li>


  <div class="row" style="margin-top:20px;">
    <div class="col-xs-6">

      <p style="display:inline-block;font-size: 30px;">Total £</p>
      <input style="color:white;border:0px;font-size: 30px;background:none;display: inline-block" type="text" id="opt_price" />  

    </div>
    <div class="col-xs-6">
    </div>
  </div>

</ul>

Upvotes: 2

Views: 314

Answers (2)

Louys Patrice Bessette
Louys Patrice Bessette

Reputation: 33943

You have to get each selected data-price values on change of the select elements.
Then the addition is simple.

parseFloat is ensuring you get a float number for the addition, since that is text in the HTML.
And .tofixed(2) ensures 2 decimals.

$("select").on("change", function(){
  var total=0;
  $("select").each(function(){
    var price = parseFloat($(this).find("option:selected").data("price"));
    console.log( price );
    total += price;
  });
  $("#opt_price").css({"color":"black"}).val(total.toFixed(2))
});

CodePen

Also... I swiched the color to black... To see it.
I don't get why you set it as white.

Upvotes: 2

Sam Battat
Sam Battat

Reputation: 5745

$(document).ready(function() {
  var total = 0;
  $('.select').each(function() {
    total += parseFloat($(this).val()).toFixed(2);
  });
});

Upvotes: 0

Related Questions