how to do multiplication on input fields

Question

I have the following code and I want to be able to perform multiplication when a value is typed into the "quantity" input using .keyup(). So basically a user inputs a number into the "quantity" input and it will multiply its value by the hidden input "cash5" and "amazon5" and display the results of the multiplication in the labels "amazon5totalpoints" and "amazon5totalcash". Also how would you make the "quantity" input only accept integers? Thanks you.

<input name="quantity" type="text" id="quantity" />

<input name="amazon5" type="hidden" id="amazon5" value="450">
<input name="cash5" type="hidden" id="cash5" value="5">
<label id="amazon5totalpoints"></label>
<label id="amazon5totalcash"></label>

<input name="amazon25" type="hidden" id="amazon25" value="3150">
<input name="cash25" type="hidden" id="cash25" value="25">
<label id="amazon25totalpoints"></label>
<label id="amazon25totalcash"></label>

<input name="amazon50" type="hidden" id="amazon50" value="5900">
<input name="cash50" type="hidden" id="cash50" value="50">
<label id="amazon50totalpoints"></label>
<label id="amazon50totalcash"></label>

score 1 · Accepted Answer · edited May 23 '17 at 12:03

1

It will looks somethign like:

$('#quantity').keyup(function() {
    var quantity = parseFloat($(this).val());
    var amazon5= parseFloat($('#amazon5').val());
    var cash5 = parseFloat($('#cash5').val());

    $('#amazon5totalpoints').text((quantity * amazon5 )); 
    $('#amazon5totalcash').text((quantity * cash5)); 
});

Code: http://jsfiddle.net/xPU6H/1/

About numeric restrictions take a look here: jQuery: what is the best way to restrict "number"-only input for textboxes? (allow decimal points). You can use already created and tested plugins.

edited May 23 '17 at 12:03

Community

1
1

answered Nov 18 '11 at 09:27

Samich

29,157
6
68
77

The code works in jsfiddle, but when I try it out on my page nothing happens. Here is exactly what I am using http://pastebin.com/0a1iRj8X – bammab Nov 18 '11 at 10:03
Wrap it in `$(document).ready(function() { /* put code here */ });` – Samich Nov 18 '11 at 10:22

score 0 · Answer 2 · answered Nov 18 '11 at 09:28

Untested but should plug right in

$('#quantity').keyUp(function(){
    $('#amazon5totalpoints').text( Number( $(this).val() ) * Number( $('#amazon5').val() ) );
    $('#cash5totalpoints').text( Number( $(this).val() ) * Number( $('#cash5').val() ) );
});

score 0 · Answer 3 · answered Nov 18 '11 at 09:29

Try this..

 <input type="text" onkeypress="return numbersonly(this.id,event,0)" id="quantity" value="1">


 function numbersonly(myfield, e, dec){
    var key;
    var keychar;

    if (window.event)
        key = window.event.keyCode;
    else if (e)
         key = e.which;
    else
         return true;
    keychar = String.fromCharCode(key);

      // control keys
      if ((key==null) || (key==0) || (key==8) || (key==9) || (key==13) || (key==27) ){
         return true;
      }
      // numbers
      else {    
          if ((("0123456789").indexOf(keychar) > -1)){
              return true;
          }else{
              // decimal point jump
              if (dec && (keychar == ".")){             
                  //myfield.form.elements[dec].focus();
                  var deci = document.getElementById(myfield).value.indexOf(".");
                  if(deci!=-1)return false;
                  return true;
              } else {
                  //document.getElementById(myfield).focus();
                  return false;
              }
          }
      }

}

This function allow the user to type the numbers only. it wont convert the values. — balaphp, Nov 18 '11 at 09:33

score 0 · Answer 4 · answered Nov 18 '11 at 09:50

$('input[name=quantity]').keyup(function(e) {
    var me = this;
    if(e.which == 110 || e.which == 190) { // checking for integer
        alert('Quantity Should be Only Integer');
        return false;
    } else {
        if ((e.which >= 96 && e.whick <= 105) || (e.which >= 48 && e.which <= 57)) {
            $('input[type=hidden]').each(function(index, el) {
                $('label:eq(' + (index + 2) + ')').empty().text($(el).val() * $(me).val());
            });
        }
    }
});

@bammab user cant input any DOT symbol – thecodeparadox Nov 18 '11 at 09:55 — thecodeparadox, Nov 18 '11 at 09:55

how to do multiplication on input fields

4 Answers4