Multiply and add 2 input boxes using jquery

Question

I would like the script to multiply values from input boxes by the values of hidden inputs, and print the result upon clicking the button.

Script pretty much does it but only for 1 input.

Any easy way to do it?

Much appreciated.

Fiddle: http://jsfiddle.net/eN7S6/3/

 <table>
        <tr>
            <td>
    <input name="inputone" id="inputone" class="calc" value="1"><span id="Total"></span>
                </td>
        </tr>
            <tr>
            <td>
    <input name="inputone" id="inputone" class="calc" value="1"><span id="Total"></span>
                </td>
                </tr>
    </table>
        <input name="inputtwo" id="inputtwo" class="calc" value="2" type="hidden" readonly>
        <input name="inputtwo" id="inputtwo" class="calc" value="3" type="hidden" readonly>
        <input type="button" id="update" value="Calculate" />

And jQuery

$(document).ready(function() {      
    $('#update').click(function() { 
        var inputone = $('#inputone').val();
        var inputtwo = $('#inputtwo').val();
        var totalTotal = ((inputone * 1) * (inputtwo * 1));     
        $('#Total').text(totalTotal);
    });
});

ids must be unique on a page.

elclanrs
– elclanrs

2013-11-12 00:59:13 +00:00
Commented Nov 12, 2013 at 0:59 — elclanrs
– elclanrs, Commented Nov 12, 2013 at 0:59

Filippos Karapetis · Accepted Answer · 2013-11-12 01:09:19Z

Your element IDs are not unique. You have duplicates, such as "inputone" and "inputtwo".

I've changed their names, and added a new total span.

Here's the updated code:

<table>
    <tr>
        <td>
<input name="inputone" id="inputone" class="calc" value="1"><span id="TotalOne"></span>
            </td>
    </tr>
        <tr>
        <td>
<input name="inputtwo" id="inputtwo" class="calc" value="1"><span id="TotalTwo"></span>
            </td>
            </tr>
</table>
    <input name="multiplierone" id="multiplierone" class="calc" value="2" type="hidden" readonly>
    <input name="multipliertwo" id="multipliertwo" class="calc" value="3" type="hidden" readonly>
    <input type="button" id="update" value="Calculate" />

and jQuery:

$(document).ready(function() {      
    $('#update').click(function() { 
        var inputone = $('#inputone').val();
        var multiplierone = $('#multiplierone').val();
        var inputtwo = $('#inputtwo').val();
        var multipliertwo = $('#multipliertwo').val();
        var totalTotalOne = (inputone * multiplierone);
        var totalTotalTwo = (inputtwo * multipliertwo);
        $('#TotalOne').text(totalTotalOne);
        $('#TotalTwo').text(totalTotalTwo);
    });
});

and updated jsFiddle: http://jsfiddle.net/eN7S6/4/

megawac · Accepted Answer · 2013-11-12 01:08:04Z

0

This little algorithm will get all the input.calc elements and multiply their values. Think this should work for you based on your given html.

var total = 1;
$("input.calc").val(function(idx, val) {
    total*= val;
})
$('#Total').text(total);

JSFiddle demo

answered Nov 12, 2013 at 1:08

megawac

11.4k6 gold badges43 silver badges61 bronze badges

Comments

Progo · Accepted Answer · 2013-11-12 01:08:16Z

There can never be two IDsDon the same page that are the same, that's why the class was invented.

Modify your code to something like this:

 <table>
   <tr>
     <td>
         <input name="inputone"class="inputone calc" value="1"><span id="Total"></span>
     </td>
   </tr>
   <tr>
     <td>
       <input name="inputone" class="inputone calc" value="1"><span id="Total"></span>
     </td>
   </tr>
 </table>
 <input name="inputtwo" class="calc inputtwo" value="2" type="hidden" readonly>
 <input name="inputtwo" class="calc inputtwo" value="3" type="hidden" readonly>
 <input type="button" id="update" value="Calculate" />

Then:

$(document).ready(function() {      
    $('#update').click(function() { 
        var inputone = $('.inputone').val();
        var inputtwo = $('.inputtwo').val();
        var totalTotal = ((inputone * 1) * (inputtwo * 1));     
        $('#Total').text(totalTotal);
    });
});

Collectives™ on Stack Overflow

Multiply and add 2 input boxes using jquery

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related