How can I sum the price of the item that I selected from my dropdown that retrieved in the database

user_14786366 0
Viewed 36

I'm trying to sum the price after selecting an item in the dropdown, but it only displays NaN. The value of dropdown are retrieved from MySQL database

<?php
    //database connection here
?>
    <table border=" 1">

        <thead>
            <tr>
                <th>Component</th>
                <th>Item Name</th>
                <th>Price </th>
            </tr>
        </thead>

        <tbody>
            <tr>
                <td>CPU</td>
                <td>
                    <?php
                    //Retrieving CPU table
                    $query = $conn->query("SELECT * FROM cpu");
                    echo '<select  onChange = parseFloat($("#cpuprice").val($(this).find("option:selected").attr("cpuprice")))>';
                    echo "<option>---select your CPU---</option>";
                    while ($obj = $query->fetch_object()) {
                        echo '<option cpuprice = "' . $obj->price . '" >' . $obj->cpuname . '</option>';
                    }
                    echo '</select>';
                    ?>
                </td>
                <td>
                    <output class="form-control prc" id="cpuprice" disabled value="">
                </td>
            </tr>
        </tbody>

        <tbody>
            <tr>
                <td>GPU</td>
                <td>
                    <?php
                    //Retrieving GPU table
                    $query = $conn->query("SELECT * FROM gpu");
                    echo '<select  onChange = parseFloat($("#tpuprice").val($(this).find("option:selected").attr("gpuprice")))>';
                    echo "<option>---select your GPU---</option>";
                    while ($obj = $query->fetch_object()) {
                        echo '<option  gpuprice = "' . $obj->price . '" >' . $obj->gpuname . '</option>';
                    }
                    echo '</select>';
                    ?>
                </td>
                <td>
                    <output class="form-control prc" id="tpuprice" disabled value="">
                </td>
            </tr>
        </tbody>
    </table>

this is the jQuery that I used I don't know if this is right but I search everywhere and NaN is the best result I got so far, sorry I'm just new to using JavaScript or jQuery

<span class="totalprice">Total: </span>

    <script>
        var total = 0;
            $('select').change(function() {
            var cpu = ($('#totalprice').val($(this).find('option:selected').attr('cpuprice')))
            var gpu = ($('#Totalprice').val($(this).find('option:selected').attr('gpuprice')))
            total = parseFloat(cpu) + parseFloat(gpu);
            $('.totalprice').text('₱' + total);
            })
    </script>

here is the picture, after selecting it just NaN:
here is the picture, after selecting it just NaN

jquery javascript
1 Answers

You can check if the attr exist on not inside option because your first option doesn't have attr that's the reason its giving NaN so if doesn't exist just give value 0 else attr value .

Demo Code : 

var total = 0;
$('select').change(function() {
  //get value from cpu slect box check if attr there else take value 0
  var cpu_price = $(".cpu").find('option:selected').attr('cpuprice') ? $(".cpu").find('option:selected').attr('cpuprice') : 0

  $('#cpuprice').val(cpu_price)
  //get value from gpu slect box check if attr there else take value 0
  var gpu_price = $(".gpu").find('option:selected').attr('gpuprice') ? $(".gpu").find('option:selected').attr('gpuprice') : 0
  $('#tpuprice').val(gpu_price)

  total = parseFloat(cpu_price) + parseFloat(gpu_price);
  $('.totalprice').text('₱' + total);
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table border=" 1">

  <thead>
    <tr>
      <th>Component</th>
      <th>Item Name</th>
      <th>Price </th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>CPU</td>
      <td>
        <select class="cpu">
          <option>---select your CPU---</option>
          <option cpuprice="1222">Soemthing</option>
          <option cpuprice="1000">Soemthing1</option>
        </select>

      </td>
      <td>
        <output class="form-control prc" id="cpuprice" disabled value="" />
      </td>
    </tr>
  </tbody>

  <tbody>
    <tr>
      <td>GPU</td>
      <td>
        <select class="gpu">
          <option>---select your GPU---</option>
          <option gpuprice="1200">Somehingg</option>
          <option gpuprice="120">Somehingg1</option>
        </select>
      </td>
      <td>
        <output class="form-control prc" id="tpuprice" disabled value="" />
      </td>
    </tr>
  </tbody>
</table>
<span class="totalprice">Total: </span>

user_106064000
Related