将动态javascript值设置为具有总和的html文本输入

Question

Please read the form and javascript carefully. 请仔细阅读表格和JavaScript。 My goal is grab text input value 'a' and 'b' then total integer value will be dynamically set to text input id called- 'x'. 我的目标是获取文本输入值“ a”和“ b”，然后将总整数值动态设置为名为“ x”的文本输入ID。 How can i set dynamic javascript value to html text input? 如何将动态javascript值设置为html文本输入？ Also it should be real time updating so user can see the total value of a+b on x. 同样，它应该是实时更新，以便用户可以看到x上a + b的总值。 x is actually displaying the value and will be submitting this value if 'submit' button pressed. x实际上正在显示该值，如果按下“提交”按钮将提交该值。

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <script src="http://code.jquery.com/jquery-1.11.1.js" type="text/javascript"></script>
</head>
<body>

<form method="post">

<input type="text" id="a" value="5">
<input type="text" id="b" value="2">
<input type="text" id="x" value="dynamic_value_from_javascript">
<input type="submit" name="submit" value="submit">

</form>



<script type='text/javascript'>

        $('#a').keyup(updatetxt);
        $('#a').keydown(updatetxt);

        var a = $('#a');
        var b = $('#b');
        var x = a+b;

        function updatetxt() {
            $('#x').val($(x).val());
        }

</script>

</body>
</html>

Answer 1

Check this fiddle I have made recently,It will update real time. 检查我最近做的这个小提琴，它将实时更新。 let me know if any query occurs 让我知道是否有任何查询

$(function() {
    $( "#a" ).keyup(function() {
    var a = $('#a').val();
   var b = $('#b').val();
  var c = parseInt(a) + parseInt(b);
  $('#c').val(c);
    });
  $( "#b" ).keyup(function() {
    var a = $('#a').val();
  var b = $('#b').val();
  var c = parseInt(a) + parseInt(b);
  $('#c').val(c);
    });
});

<input type="text" id="a" value="1"/><br>
<input type="text" id="b" value="2"/><br>
<input type="text" id="c" value=""/><br><br>

My Jsfiddle link 我的Jsfiddle链接

Answer 2

There are a few problems with your code, I have fixed them below: 您的代码存在一些问题，我在下面对其进行了修复：

You need to get values of a and b during the keyup events. 您需要在键入事件期间获取a和b的值。
You need subscribe to keyup events of both a and b inputs. 您需要订阅a和b输入的键入事件。
In order to add integer values, you can use parseInt 为了添加整数值，可以使用parseInt
Call updatetxt for the first time without any events, so that it can set the total value based on default values in the inputs 第一次调用updatetxt时没有任何事件，因此它可以根据输入中的默认值设置总值

 $('#a').keyup(updatetxt); $('#b').keyup(updatetxt); function updatetxt() { var a = $('#a').val(); var b = $('#b').val(); var x = parseInt(a) + parseInt(b); $('#x').val(x); } updatetxt();

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <input type="text" id="a" value="5"> <input type="text" id="b" value="2"> <input type="text" id="x" value="">

将动态javascript值设置为具有总和的html文本输入

问题描述

2 个解决方案

解决方案1
1 2017-08-11 12:34:05

解决方案2
0 已采纳 2017-08-11 12:35:20

将动态javascript值设置为具有总和的html文本输入

问题描述

2 个解决方案

解决方案1 1 2017-08-11 12:34:05

解决方案2 0 已采纳 2017-08-11 12:35:20

解决方案1
1 2017-08-11 12:34:05

解决方案2
0 已采纳 2017-08-11 12:35:20