Need total amount displayed of data-price attribute from each table


Joined
Feb 25, 2022
Messages
7
Reaction score
1
I'm not 100% on Javascript and got bit stuck on a feature I am trying to do. I want to display the total amount of data-price attribute. The code currently works so when I click add to list, it adds the service name and cost to a table below and the same for the part name and cost table which is all good. I just need to somehow get the total amount from each table row of both service and part table and display the amount below the tables. I'm sure Javascript code can do what I need but I'm unsure what the code should be, can anyone help please

I created a codepen as thought it might be easier that way to see the code

 
Ad

Advertisements

Joined
Jul 3, 2022
Messages
23
Reaction score
0
HTML:
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title></title>
    <script src="https://code.jquery.com/jquery-latest.min.js"></script>
    <style>
    
    </style>
  
  </head>
  <body>   
      <div class="row">
    <div class="form-group col-md-9 servicename">
        <select id="service" name="service" class="form-control servicelist">
            <option value="">Select Service</option>
            <option data-price="1.00" value='Service 1'>Service 1</option>
            <option data-price="2.00" value='Service 2'>Service 2</option>
        </select>
    </div>
    <div class="col-md-3">
        <input type="text" name="Price" class="form-control form-control-border text-right price-input-service" readonly>
    </div>
</div>
<div class="row">
    <input type="button" value="Add To List" class="btn btn-primary submit1" id="submit1" />
</div>

<div class="row">
    <div class="form-group col-md-9 partname">
        <select id="part" name="part" class="form-control partlist">
            <option value="">Select Part</option>
            <option data-price="0.00" value="None Needed">None Needed</option>
            <option data-price="1.00" value='Part 1'>Part 1</option>
            <option data-price="2.50" value='Part 2'>Part 2</option>
        </select>
    </div>
    <div class="col-md-3">
        <input type="text" class="form-control form-control-border text-right price-input-part" readonly>
    </div>
</div>
<div class="row">
    <input type="button" value="Add To List" class="btn btn-primary submit2" id="submit2" />
</div>
<div class="row">
    <table id="table1" class="table table-stripped table-bordered mt-3">
        <colgroup>
            <col width="65%">
            <col width="25%">
        </colgroup>
        <thead>
            <tr class='bg-gradient-dark text-light'>
                <th>Service Name</th>
                <th>Service Cost</th>
            </tr>
        </thead>
        <tbody></tbody>
    </table>
    <table id="table2" class="table table-stripped table-bordered mt-3">
        <colgroup>
            <col width="65%">
            <col width="25%">
        </colgroup>
        <thead>
            <tr class='bg-gradient-dark text-light'>
                <th>Part Name</th>
                <th>Part Cost</th>
            </tr>
        </thead>
        <tbody></tbody>
    </table>
</div>
<div class="row">
    <div class="col-lg-12">
        TOTAL AMOUNT HERE (WANT TO HAVE TOTAL AMOUNT OF EACH TABLE ROW FROM BOTH TABLE 1 AND 2 DISPLAYED HERE)
    </div>
</div>
<script>
$("#submit1").click(function () {
    const selected = $(".servicelist");
        selected.each(function () {
            $("#table1").append(
                "<tr><td>" +
                    $(this).val() +
                    "</td>" +
                    "<td class=\"cost\">" +
                    $("#service option:selected").attr("data-price") +
                    "</td></tr>"
            );
        });
});

$("#submit2").click(function () {
    const selected = $(".partlist");
        selected.each(function () {
            $("#table2").append(
                "<tr><td>" +
                    $(this).val() +
                    "</td>" +
                    "<td class=\"cost\">" +
                    $("#part option:selected").attr("data-price") +
                    "</td></tr>"
            );
        });
});
$(".servicename").on("change", function () {
    $(".price-input-service").val($(this).find(":selected").data("price"));
});
$(".partname").on("change", function () {
    $(".price-input-part").val($(this).find(":selected").data("price"));
});

function getTotal(){
let tmp = 0;
$('.cost').each(function(el){
tmp += Number($(this).html());
});
$('.col-lg-12').html('Total: ' + tmp);
}

$('[id^=submit]').click(getTotal);
</script>
  </body>
</html>
 
Ad

Advertisements

Joined
Feb 25, 2022
Messages
7
Reaction score
1
HTML:
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title></title>
    <script src="https://code.jquery.com/jquery-latest.min.js"></script>
    <style>
   
    </style>
 
  </head>
  <body>  
      <div class="row">
    <div class="form-group col-md-9 servicename">
        <select id="service" name="service" class="form-control servicelist">
            <option value="">Select Service</option>
            <option data-price="1.00" value='Service 1'>Service 1</option>
            <option data-price="2.00" value='Service 2'>Service 2</option>
        </select>
    </div>
    <div class="col-md-3">
        <input type="text" name="Price" class="form-control form-control-border text-right price-input-service" readonly>
    </div>
</div>
<div class="row">
    <input type="button" value="Add To List" class="btn btn-primary submit1" id="submit1" />
</div>

<div class="row">
    <div class="form-group col-md-9 partname">
        <select id="part" name="part" class="form-control partlist">
            <option value="">Select Part</option>
            <option data-price="0.00" value="None Needed">None Needed</option>
            <option data-price="1.00" value='Part 1'>Part 1</option>
            <option data-price="2.50" value='Part 2'>Part 2</option>
        </select>
    </div>
    <div class="col-md-3">
        <input type="text" class="form-control form-control-border text-right price-input-part" readonly>
    </div>
</div>
<div class="row">
    <input type="button" value="Add To List" class="btn btn-primary submit2" id="submit2" />
</div>
<div class="row">
    <table id="table1" class="table table-stripped table-bordered mt-3">
        <colgroup>
            <col width="65%">
            <col width="25%">
        </colgroup>
        <thead>
            <tr class='bg-gradient-dark text-light'>
                <th>Service Name</th>
                <th>Service Cost</th>
            </tr>
        </thead>
        <tbody></tbody>
    </table>
    <table id="table2" class="table table-stripped table-bordered mt-3">
        <colgroup>
            <col width="65%">
            <col width="25%">
        </colgroup>
        <thead>
            <tr class='bg-gradient-dark text-light'>
                <th>Part Name</th>
                <th>Part Cost</th>
            </tr>
        </thead>
        <tbody></tbody>
    </table>
</div>
<div class="row">
    <div class="col-lg-12">
        TOTAL AMOUNT HERE (WANT TO HAVE TOTAL AMOUNT OF EACH TABLE ROW FROM BOTH TABLE 1 AND 2 DISPLAYED HERE)
    </div>
</div>
<script>
$("#submit1").click(function () {
    const selected = $(".servicelist");
        selected.each(function () {
            $("#table1").append(
                "<tr><td>" +
                    $(this).val() +
                    "</td>" +
                    "<td class=\"cost\">" +
                    $("#service option:selected").attr("data-price") +
                    "</td></tr>"
            );
        });
});

$("#submit2").click(function () {
    const selected = $(".partlist");
        selected.each(function () {
            $("#table2").append(
                "<tr><td>" +
                    $(this).val() +
                    "</td>" +
                    "<td class=\"cost\">" +
                    $("#part option:selected").attr("data-price") +
                    "</td></tr>"
            );
        });
});
$(".servicename").on("change", function () {
    $(".price-input-service").val($(this).find(":selected").data("price"));
});
$(".partname").on("change", function () {
    $(".price-input-part").val($(this).find(":selected").data("price"));
});

function getTotal(){
let tmp = 0;
$('.cost').each(function(el){
tmp += Number($(this).html());
});
$('.col-lg-12').html('Total: ' + tmp);
}

$('[id^=submit]').click(getTotal);
</script>
  </body>
</html>
Hi

Thank you for the reply, I managed to solve the issue a few hours after posting the new topic. I can past the code below if needed to show how I did it
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Top