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

I

ianhaney

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

 
Padonak

Padonak

Joined
Jul 3, 2022
Messages
93
Reaction score
23
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>
 
I

ianhaney

Joined
Feb 25, 2022
Messages
7
Reaction score
1
Padonak said:
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>
Click to expand...
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

Similar Threads

How to add dropdown selected data to table using jquery 2
Show/Hide HTML Table Columns using SELECT option 1
How to use PDF-lib and how to center each line of texts on the page? 1
Javascript 1
Only one table shows up with the information 2
How to create a JSON array with values from DOM(HTML TABLE) when I click a button using JQuery/Javascript? 0
Trying to get JSON data from API into HTML table 7
Need Assistance With A Coding Problem 0

Members online

Total: 44 (members: 2, guests: 42)
Robots: 209

Forum statistics

Threads
473,763
Messages
2,569,562
Members
45,039
Latest member
CasimiraVa

Latest Threads

Top