jQuery Summation: A Step-by-Step Guide

Question

jQuery Summation: A Step-by-Step Guide

Hello everyone, I am a new member of this forum and I am looking forward to learning and contributing with all of you. I have encountered a problem that I tried to solve on my own but couldn't figure it out. Would anyone be able to lend me a hand? Here is the code snippet I am working on: Jquery:

$(document).ready(function() {
var max_fields      = 10; allowed
var moreprod         = $(".contenedor"); wrapper
var add_button      = $("#e");

var x = 1;
$(add_button).click(function(e){ 
    e.preventDefault();
    if(x < max_fields){
        x++; //text box increment
        $(moreprod).append('<div class="fieldprod"><div id="a"><input type="text" placeholder="Product"></input></div><div id="b" class="csymbol" data-symbol="$"><input id="prices" type="text" placeholder=" 0.00"></input></div><div id="c"><input id="prices" type="text" placeholder="qty"></input></div><div id="d" class="csymbol" data-symbol="$"><p id="qty">0.00</p></div><div id="f" class="removebtn">-</div></div>'); //add input box
    }
});


$(moreprod).on("click",".removebtn", function(e){ 
    e.preventDefault(); $(this).parent('div').remove(); x--;
})

});

HTML:

<div class="result">total</div>
<div class="contenedor">
<div class="fieldprod">
<div id="a">
<input type="text" placeholder="Product"></input>
</div>
<div id="b" class="csymbol" data-symbol="$">
<input id="prices" type="text" placeholder=" 0.00"></input>
</div>
<div id="c">
<input id="prices" type="text" placeholder="qty"></input>
</div>
<div id="d" class="csymbol" data-symbol="$"><p id="qty">0.00</p></div>
<div id="e">+</div>
</div>
</div>

I am dynamically creating three inputs and two divs to form a row. However, I need help in summing up the values from two inputs (c = a + b) within each row. If I add a new row, I want to make the sum of values in that row (g = e + f), and then calculate the total sum (total = c + g). Can anyone assist me with this task? Thank you in advance for your help, and I apologize for any language errors in my message.

jquery html css

Answer 1

Answer №1

It is recommended to use classes instead of replicating the id, as it should be unique in the document.
To perform calculations, capture the change event of the input element.

Below is the script to handle these functionalities:

$(document).ready(function () {
    var max_fields = 10;
    var moreprod = $(".contenedor");
    var add_button = $("#e");
    var grandTotal = $('#grand-total');

    var x = 1;
    $(add_button).click(function (e) {
        e.preventDefault();
        if (x < max_fields) {
            x++;
            $(moreprod).append('<div class="fieldprod"><div><input type="text" placeholder="Product"></input></div><div class="csymbol" data-symbol="$"><input class="price" type="text" placeholder=" 0.00"></input></div><div><input class="quantity" type="text" placeholder="qty"></input></div><div class="csymbol" data-symbol="$"><p class="product-total">0.00</p></div><div class="removebtn">-</div></div>');
        }
    });


    moreprod.on("click", ".removebtn", function (e) {
        e.preventDefault();
        $(this).closest('.fieldprod').remove();
        x--;
        moreprod.find('.price').first().trigger('change');
    }).on('change', '.price, .quantity', function(){
        var group = $(this).closest('.fieldprod'),
            quantity = +group.find('.quantity').val(),
            price = +group.find('.price').val(),
            total = group.find('.product-total');

        total.text( (quantity*price).toFixed(2) );

        var grand = moreprod
                        .find('.product-total').get()
                        .reduce(function(p,v){
                            return p + +$(v).text();
                        },0);
        grandTotal.text(grand.toFixed(2));

    });

});

You can view a working demo at http://jsfiddle.net/gaby/9tp5aycy/

Answer 2

It is recommended to use classes instead of replicating the id, as it should be unique in the document.
To perform calculations, capture the change event of the input element.

Below is the script to handle these functionalities:

$(document).ready(function () {
    var max_fields = 10;
    var moreprod = $(".contenedor");
    var add_button = $("#e");
    var grandTotal = $('#grand-total');

    var x = 1;
    $(add_button).click(function (e) {
        e.preventDefault();
        if (x < max_fields) {
            x++;
            $(moreprod).append('<div class="fieldprod"><div><input type="text" placeholder="Product"></input></div><div class="csymbol" data-symbol="$"><input class="price" type="text" placeholder=" 0.00"></input></div><div><input class="quantity" type="text" placeholder="qty"></input></div><div class="csymbol" data-symbol="$"><p class="product-total">0.00</p></div><div class="removebtn">-</div></div>');
        }
    });


    moreprod.on("click", ".removebtn", function (e) {
        e.preventDefault();
        $(this).closest('.fieldprod').remove();
        x--;
        moreprod.find('.price').first().trigger('change');
    }).on('change', '.price, .quantity', function(){
        var group = $(this).closest('.fieldprod'),
            quantity = +group.find('.quantity').val(),
            price = +group.find('.price').val(),
            total = group.find('.product-total');

        total.text( (quantity*price).toFixed(2) );

        var grand = moreprod
                        .find('.product-total').get()
                        .reduce(function(p,v){
                            return p + +$(v).text();
                        },0);
        grandTotal.text(grand.toFixed(2));

    });

});

You can view a working demo at http://jsfiddle.net/gaby/9tp5aycy/

Answer 3

Answer №2

In order to dynamically add and remove rows with products in a shop software, it is crucial to ensure that each ID value is unique globally.

There are several approaches to achieve this goal:

Create unique IDs such as x1, x2, x3, etc.
Erase all IDs and rely on CSS selectors to access the fields http://api.jquery.com/category/selectors/
Implement other solutions...

Another important issue to address is the functionality of the remove button. As it stands, only the first row may be deletable due to having just one remove handler registered. It would be wise to register the remove handler immediately after appending each row to ensure proper deletion functionality for all rows.

Answer 4

In order to dynamically add and remove rows with products in a shop software, it is crucial to ensure that each ID value is unique globally.

There are several approaches to achieve this goal:

Create unique IDs such as x1, x2, x3, etc.
Erase all IDs and rely on CSS selectors to access the fields http://api.jquery.com/category/selectors/
Implement other solutions...

Another important issue to address is the functionality of the remove button. As it stands, only the first row may be deletable due to having just one remove handler registered. It would be wise to register the remove handler immediately after appending each row to ensure proper deletion functionality for all rows.

jQuery Summation: A Step-by-Step Guide

Answer №1

Answer №2

Similar questions

Why is my CSS not recognizing the animation I specified for it to play?

The autocomplete feature in my jquery textbox is malfunctioning

Is there a way to align the image next to the form and ensure they are both the same size?

Utilizing jQuery for updating values within an XML document

Searching through a current array to select the sixth element, using jQuery or JavaScript

Stylish progress bar using CSS animations

What is the reason behind caching form data in an ajax call?

What is the best way to transfer information from a client's HTML to a node.js server?

ASP.NET can have issues with the functionality of jQuery AJAX

Rule for jQuery validation based on variables

I am experiencing an issue where the submit button in my HTML form is unresponsive to clicks

Automatically populate a dropdown menu with options based on the user's birth date

Solid white border encasing the full page

"Troubleshooting the ERR_SPDY_PROTOCOL_ERROR issue with Ajax and .NET Web

Using cakePHP to submit a form using ajax

Incorporate Web-GL sandbox effects into an HTML webpage

Text Box: Add a touch of flair with resizing

Retrieving a designated value from a jquery object sent via an ajax call

How can I create editable text using typed.js?

Materialize Modal Event fails to trigger