没有提交按钮的JS自动计算

Question

i want to auto calculate the 5 textboxes without using a submit button from the value of my main textbox so 1 textbox = (auto computed) 5textbox 我想自动计算5个文本框而不使用我的主文本框的值使用提交按钮，所以1个文本框=（自动计算）5个文本框

this is the js in my <head> tag 这是我<head>标记中的js

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

form 形成

        <form>
    <br>input textbox:        <input id = "textbox" type = "text"    name="textbox" required>
    </td>
    </td>
    </table>
    <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>
    </form>

im new on JS, i dont know whats the problem. 我在JS上是新手，我不知道出了什么问题。 how am i able to auto calculate? 我如何自动计算？

thank you guys 感谢大伙们

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

Answer 1

First thing you have written readonly in tb6 and keyup on same input which can not be possible Do $('input[type="text"]').keyup(function() { if you want auto compute on input text.. As per you code I modified in jquery 首先，您已经在tb6写了readonly，并且不可能在相同的输入上进行keyup编写$('input[type="text"]').keyup(function() {如果要对输入文本进行自动计算，请执行$('input[type="text"]').keyup(function() {每一个我在jQuery中修改的代码

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

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

//As you didnot mentioned what will be in other textboxes.. //因为您没有提到其他文本框中的内容。

Answer 2

when do 什么时候

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

the tb6 input is not render tb6输入未呈现

没有提交按钮的JS自动计算

问题描述

2 个解决方案

解决方案1
1 已采纳 2016-02-01 09:03:42

解决方案2
0 2016-02-01 08:55:28

没有提交按钮的JS自动计算

问题描述

2 个解决方案

解决方案1 1 已采纳 2016-02-01 09:03:42

解决方案2 0 2016-02-01 08:55:28

解决方案1
1 已采纳 2016-02-01 09:03:42

解决方案2
0 2016-02-01 08:55:28