JS自动计算没有提交按钮

时间:2016-02-01 08:48:33

标签: javascript

我想在不使用主文本框值的提交按钮的情况下自动计算5个文本框 1 textbox =(自动计算)5textbox

这是我的$("#attnUpdate").click(function (e) { // set a flag error = false; //check textbox is blank $('.TID').each(function() { if ($(this).is(':checked') && $(this).closest('tr').find('input').val() == ""){ $(this).closest('tr').find('.remarks').attr('placeholder','Input can not be left blank'); alert('Input can not be left blank'); // set the error flag so that ajax won't fire. error = true; } }); //ajax post if (!error) $.ajax({ url: "<?php echo base_url(); ?>index.php/attendance/statusUpdate", type: "POST", data: $("#attnData").serialize() + '&fromAjax=' + true, success: function (data) { alert(data) }, error: function () { alert("Fail") } }); e.preventDefault(); // could also use: return false; }); 标记

中的js
<head>

形式

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"> </script>
<script>
$('#tb6').keyup(function(){
    var textbox;

        var tb1;
        var tb2;
        var tb3;
        var tb4;
        var tb5;

    textbox = parseInt($('#textbox').val());
    tb1 = parseInt($('#tb1').val());
    tb2 = parseInt($('#tb2').val());
    tb3 = parseInt($('#tb3').val());
    tb4 = parseInt($('#tb4').val());
    tb5 = parseInt($('#tb5').val());


        tb1 =  textbox * 0.10;
        tb2  = textbox * 0.10;
        tb3  = textbox * 0.10;
        tb4  = textbox * 0.50;
        tb5   = tb1+ tb2 + tb3;
    var tb6 = tb4 - tb5;
    $('#tb6').val(tb6.toFixed(2));


});
</script>
</head>

我是JS的新手,我不知道这是什么问题。我怎么能自动计算?

谢谢你们

https://jsfiddle.net/no619pmu/5/

2 个答案:

答案 0 :(得分:1)

你首先在tb6写了一个readonly,而在同一个输入上的keyup是不可能的 做 $('input[type="text"]').keyup(function() {如果你想在输入文字上自动计算.. 根据你在jquery中修改的代码

&#13;
&#13;
$('input[type="text"]').keyup(function() {
  var textbox = parseInt($('#textbox').val());
  var tb1 = parseInt($('#tb1').val());
  var tb2 = parseInt($('#tb2').val());
  var tb3 = parseInt($('#tb3').val());
  var tb4 = parseInt($('#tb4').val());
  var tb5 = parseInt($('#tb5').val());

  tb1 = textbox * 0.10;
  tb2 = textbox * 0.10;
  tb3 = textbox * 0.10;
  tb4 = textbox * 0.50;
  tb5 = tb1 + tb2 + tb3;

  var tb6 = tb4 - tb5;
  $('#tb6').val(tb6.toFixed(2));

});
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <br>input textbox:
  <input id="textbox" type="text" name="textbox" required>

  <table>
    <tr>
      <td>
        <br>
        <p id="para">label1</p>
        <br>textbox1:
        <input id="tb1" type="text" name="tb1" required>
        <br>textbox2:
        <input id="tb2" type="text" name="tb2" required>
        <br>textbox3:
        <input id="tb3" type="text" name="tb3" required>
      </td>
      <td>
        <br>
        <br>
        <br>
        <br>
        <p id="paraa">label2</p>
        <br>textbox4:
        <input id="tb4" type="text" name="tb4" readonly>
        <br>textbox5:
        <input id="tb5" type="text" name="tb5" readonly>
        // result 
        <br>textbox5:
        <input id="tb6" type="text" name="tb6" readonly>
      </td>
    </tr>
  </table>
</form>
&#13;
&#13;
&#13;

//你没有提到其他文本框中的内容..

答案 1 :(得分:0)

什么时候

$('#tb6').keyup(function(){})

tb6输入未呈现