如何在输入字段上进行乘法运算

时间:2011-11-18 09:20:58

标签: jquery

我有以下代码,我希望能够在使用.keyup()将值输入“数量”输入时执行乘法。所以基本上用户在“数量”输入中输入一个数字,它将其值乘以隐藏的输入“cash5”和“amazon5”,并在标签“amazon5totalpoints”和“amazon5totalcash”中显示乘法的结果。另外你如何使“数量”输入只接受整数?谢谢你。

<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>

4 个答案:

答案 0 :(得分:1)

它看起来像:

$('#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)); 
});

代码: http://jsfiddle.net/xPU6H/1/

关于数字限制请点击此处:jQuery: what is the best way to restrict "number"-only input for textboxes? (allow decimal points)。您可以使用已经创建和测试过的插件。

答案 1 :(得分:0)

未经测试但应插入

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

答案 2 :(得分:0)

试试这个..

 <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;
              }
          }
      }

}

答案 3 :(得分:0)

$('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());
            });
        }
    }
});