Question

161

Auto Calculate form fields value using jQuery calculation plugin

rated 0 times [ 167] [ 6] / answers: 1 / hits: 21634 / 14 Years ago, thu, january 6, 2011, 12:00:00

I am building a form that will automatically calculate the values entered by a user ideally using jQuery/javascript, i am not sure how to do this but have a general idea of the logic required (i am no expert so feel free to correct me) - I have created a dummy image to help explain what I am trying to do.

http://i.stack.imgur.com/WScNO.png

I have a single form, which has many input fields automatically calculate the total amount for each table provided it has been selected.
Using jQuery - I would expect the logic to be something like -
i) Find the input field element
ii) Find all the text fields within the table that have a value
iii) Add these together and display in the 'total' form field

While i'm ok on the PHP, javascript is something I still get confused with at times - I would appreciate any help on doing this, and if possible a quick overview to help me learn from the code.

Thanks in advance

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

quentinaveryb

Add To Favorites

Follow

Total Points: 102

Total Questions: 100

Total Answers: 93

Location: Colombia

Member since Mon, May 2, 2022

2 Years ago

quentinaveryb questions

1 How to use annotation layer in PDF.js?

Thu, Aug 6, 20, 00:00, 4 Years ago

1 Cannot assign to read only property of #< Object> using React with Recoil

Sat, Jul 18, 20, 00:00, 4 Years ago

1 Strapi JWT token lifetime?

Fri, Jul 17, 20, 00:00, 4 Years ago

1 What is the difference between async await and a regular fetch?

Tue, Feb 4, 20, 00:00, 4 Years ago

1 How do I include a JavaScript variable in an HTML header?

Mon, Aug 12, 19, 00:00, 5 Years ago

View All

answered 14 Years ago kevenirvina · Accepted Answer

Try this:http://jsfiddle.net/Ajkkb/26/

<div>

    <input  name=r  class=rate type=text maxlength=255 size=5 value=/> 

    <input  name=p class=pack type=text maxlength=255 size=5 value=/>

    <input  name=b class=bag type=text maxlength=255 size=5 value=/> 

    <input  name=w class=weight type=text maxlength=255 size=5 value=/> 

    <span  class=amount></span> 

</div>

<div>

    <input  name=r  class=rate type=text maxlength=255 size=5 value=/> 

    <input  name=p class=pack type=text maxlength=255 size=5 value=/>

    <input  name=b class=bag type=text maxlength=255 size=5 value=/> 

    <input  name=w class=weight type=text maxlength=255 size=5 value=/>

    <span class=amount></span> 

</div>

<div>

    <input  name=r  class=rate type=text maxlength=255 size=5 value=/> 

    <input  name=p class=pack type=text maxlength=255 size=5 value=/>

    <input  name=b class=bag type=text maxlength=255 size=5 value=/> 

    <input  name=w class=weight type=text maxlength=255 size=5 value=/>

    <span class=amount></span> 

</div>

<div class=total_amount>total</div>







$(document).ready(function() {

    $('input[name=r],input[name=p]').change(function(e) {

        var total = 0;

        var $row = $(this).parent();

        var rate = $row.find('input[name=r]').val();

        var pack = $row.find('input[name=p]').val();

        total = parseFloat(rate * pack)*100;

        //update the row total

        $row.find('.amount').text(total);



        var total_amount = 0;

        $('.amount').each(function() {

            //Get the value

            var am= $(this).text();

            console.log(am);

            //if it's a number add it to the total

            if (IsNumeric(am)) {

                total_amount += parseFloat(am, 10);

            }

        });

        $('.total_amount').text(total_amount);

    });

});



//isNumeric function Stolen from: 

//http://stackoverflow.com/questions/18082/validate-numbers-in-javascript-isnumeric



function IsNumeric(input) {

    return (input - 0) == input && input.length > 0;

}