0

I have a JQuery function, on which i am trying to simply apply the multiplication of 2 inputs onto a 3rd input.

But, for some reason, it isn't working. What i basically want to do, is for the result to automatically appear on the 3rd input, after i have values on the first 2

I tried searching for an answer, but maibe due to inexperience, i am unable to use the correct keywords. Sorry for that

<html> <head> <script src="https://code.jquery.com/jquery-1.10.2.js"></script> <script type="text/javascript" > $(document).ready(function () { $(".txtMult input").keyup(multInputs); function multInputs() { var mult = 0; // for each row: $("txtMult").each(function () { // get the values from this row: var $val1 = $('.val1', this).val(); var $val2 = $('.val2', this).val(); var $total = ($val1 * 1) * ($val2 * 1) $('.multTotal',this).text($total); mult += $total; }); }); </script> </head> <body> <div class="txtMult"> <div class="row"> <label for="name">Comprimento em centimetros:</label><br /> <input id="cmp" class="val1" name="cmp" type="text" value="" size="30" /><br /> </div> <div class="row"> <label for="email">Largura em centimetros:</label><br /> <input id="lrg" class="val2" name="lrg" type="text" value="" size="30" /><br /> </div> <div class="row"> <label for="email">Área em M<small>2</small></label><br /> <div class='section'> <input id="lrg" class="multTotal" name="lrg" type="text" value="" size="30" /><br /> </div> </div> </div> </body> </html>
Improve this question
6
  • all of your inputs have the same 'id', you miss a dot '.' on your $.each code... try to put together an example code at JsFiddle and it will be easier for us to help you... Commented Aug 25, 2015 at 11:43
  • Check this Commented Aug 25, 2015 at 11:44
  • @Nameismy I tried changing to what that Fiddle says, but it won't run. Maibe i'm missing some point to make it run automatically? If so, i don't know what it is Commented Aug 25, 2015 at 11:48
  • Why negative vote? There must be some suggestion or guidance. I can't see any valid reason Commented Aug 25, 2015 at 11:48
  • @Sami I didn't understand eighter.. Got a negative vote for a "noob" question? I tried searching around, and there's probably an answer somewhere already, as i know this is probably a common error to beginers, but, i explained that i searched as best as i can to my extent of english wording.. Commented Aug 25, 2015 at 11:52

5 Answers 5

Reset to default
1

2 things:

  • First you are not binding each to proper selector and you are missing . for class selector
  • Second instead of assigning .val to input type="text" you are trying to assign .text which will not work.

DEMO

Below are the changes you need to do:

$(".txtMult input").keyup(multInputs); function multInputs() { var mult = 0; // for each row: $(".txtMult").each(function () { var $val1 = $('.val1', this).val(); var $val2 = $('.val2', this).val(); var $total = ($val1 * 1) * ($val2 * 1) $('.multTotal',this).val($total); //should be .val() mult += $total; }); }
Improve this answer
Sign up to request clarification or add additional context in comments.

7 Comments

Thank you for clearing that for me. I understood what i had wrong in not assigning the classes. But, it is still not working, even after correcting those parts of the code :(
I did check it, but it isn't running correctly on my end, when i apply it to my local website
@Heatmanofurioso then problem is with your end buddy!! You need to debug or check console for any errors!
I believe i may be missing something on the body to make it continuously working maibe? Not sure about that. Something similar to the onload method? Tried debugging and checked console. All clear
place a debugger in your javascript and check whether it is hitting your event or not!! may be you are having more elements since you are using each and that is causing the issue!! posting the whole code might help to resolve!
|
1

You forgot to add . as prefix for the class here

$(".txtMult").each(function () { ---^---

Edit:

Need to change from .text() to .val() as for inputs we set value using val only.

$('.multTotal', this).val($total);

FIDDLE DEMO

Improve this answer

Comments

1

here is a working JsFiddle

HTML

<div class="txtMult"> <div class="row"> <label for="name">Comprimento em centimetros:</label><br /> <input id="cmp" class="val1" name="cmp" type="text" value="" size="30" /><br /> </div> <div class="row"> <label for="email">Largura em centimetros:</label><br /> <input id="lrg" class="val2" name="lrg" type="text" value="" size="30" /><br /> </div> <div class="row"> <label for="email">Área em M<small>2</small></label><br /> <div class='section'> <input id="lrg" class="multTotal" name="lrg" type="text" value="" size="30" /><br /> </div> </div> </div>

Javascript

 function multInputs() { $(".txtMult").each(function () { var $current = $(this); // get the values from this row: var val1 = $('.val1', $current).val(); var val2 = $('.val2', $current).val(); if (val1 != '' && val2 != '') { var total = parseInt(val1) * parseInt(val2); $('.multTotal', $current).val(total); } }); };

$(".txtMult input").keyup(multInputs);

Improve this answer

2 Comments

Although i hate "copy paste". Even after doing so from your fiddle, and other fiddles, the code just isn't working. I am running Xampp correctly, as other jscript is working fine. But not this, for some reason
Try to put a JsFiddle with your exact code, that actually reproduces the bug, and that way we can better help you :-)
1

You have a couple of errors in that code. Here is a corrected version that works (I've added a few things, like parseInt and checking that the result isn't NaN):

<html> <head> <meta name="character-encoding" charset="UTF-8"> <script src="https://code.jquery.com/jquery-1.10.2.js"></script> <script type="text/javascript" > $(document).ready(function () { function multInputs() { var mult = 0; // for each row: $(".txtMult").each(function () { // get the values from this row: var $val1 = $('.val1', this).val(); var $val2 = $('.val2', this).val(); var $total = parseInt($val1) * parseInt($val2); if (!isNaN($total)) { $('.multTotal', this).val($total); } mult += $total; }); } $(".txtMult input").keyup(multInputs); }); </script> </head> <body> <div class="txtMult"> <div class="row"> <label for="name">Comprimento em centimetros:</label><br /> <input id="cmp" class="val1" name="cmp" type="text" value="" size="30" /><br /> </div> <div class="row"> <label for="email">Largura em centimetros:</label><br /> <input id="lrg" class="val2" name="lrg" type="text" value="" size="30" /><br /> </div> <div class="row"> <label for="email">Área em M<small>2</small></label><br /> <div class='section'> <input id="lrg" class="multTotal" name="lrg" type="text" value="" size="30" /><br /> </div> </div> </div> </body> </html>
Improve this answer

Comments

1

There are multiple ways of elements selection. With Id #, class ., or position eq(n)

Demo on plunker

function multInputs() { var val1 = $('#cmp').val(); var val2 = $('#lrg').val(); $('#result').val(val1*val2); //Or //var inputs = $(".txtMult input"); //var val1 = inputs.eq(0).val(); //var val2 = inputs.eq(1).val(); //inputs.eq(2).val(val1*val2); }
Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.