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

标签 javascript jquery

请仔细阅读表单和 JavaScript。我的目标是获取文本输入值“a”和“b”,然后总整数值将动态设置为名为“x”的文本输入 ID。如何将动态 javascript 值设置为 html 文本输入?此外,它应该是实时更新的,以便用户可以看到 x 上 a+b 的总值。 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>

最佳答案

看看我最近做的这个 fiddle ,它会实时更新。如果有任何疑问请告诉我

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

关于javascript - 将动态 javascript 值设置为带有总和的 html 文本输入,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45635220/

相关文章:

javascript - 未定义 JSONP 跨域

javascript - ES5 中的 block 作用域

jquery - MySQL查询仅当两个字段不存在时才插入数据

javascript - jquery 文件树高亮选中

jquery - 两个滚动条的问题?

javascript - Knockout Javascript select 返回 Object 对象

javascript - 你如何用 react-router 布局路由来包装故事?

javascript - Google 跟踪代码管理器中的简单 DOM 属性匹配

jquery - 禁用初始自动 ajax 调用 - DataTable 服务器端分页

asp.net - 从粗框控件中获取值