Question

我想创建一个基于输入值，计算结果的表单，并将其输入到网页html中某处的div / label / bit中。

类似于在线货币转换器的工作（插入第一种货币的编号，您可以在不刷新页面的情况下查看结果，是否使用提交按钮）

这是我的一小段代码（我无法理解如上所述做我想要的概念/机制）

<form id="form" class="green" method="post">
<label class="title">
    <span class="titolo-riga required">Number1</span>
    <input id="firstId" class="small" type="number" name="number1" required="required" value="0" />
</label>
<label class="title">
    <span class="titolo-riga required">Number2</span>
    <input id="secondID" class="small" type="number" name="number2" required="required" value="0" />
</label>
<div class="submit"><input type="submit" onclick="return submitForm();" value="Submit"/></div>
</form>
<div><label id="printHere" class="result"></label></div>

这是html里面的一个基本脚本：

function submitForm(){
var a = parseInt($("#firstId").val());
var b = parseInt($("#secondID").val());

result = a+ b;

Answer 1

使用html尝试这个简单的脚本：

<html>
  <body>
    <p>Click the button to calculate x.</p>
    <button onclick="myFunction()">Add it</button>
    <br/>Enter first number:
    <input type="text" id="txt1" name="text1">
    <br/>Enter second number:
    <input type="text" id="txt2" name="text2">
    <p id="demo"></p>
    <script>
      function myFunction() {
        var y = document.getElementById("txt1").value;
        var z = document.getElementById("txt2").value;
        var x = +y + +z;
        document.getElementById("demo").innerHTML = x;
      }
    </script>
  </body>
</html>

Answer 2

如果我理解正确，你试图检索输入值，用它们做一些数学运算，并将其返回到页面而不刷新它，如果是这样的话：

在两个输入上创建一个更改事件侦听器，在这种情况下：

$（“＃firstId”）。change（function（）{ $（ “＃thirdId”）VAL（计算（））。 }）; $（“＃secondID”）。change（function（）{ $（ “＃thirdId”）VAL（计算（））。 }）;
制作计算功能：

function calculate（）{ var a = parseInt（$（“＃firstId”）。val（））; var b = parseInt（$（“＃secondID”）。val（））;

返回a + b; }

Answer 3

主席先生，

我建议您可以通过几种不同的方式绑定此输入值以在页面上更新它，而无需刷新。 jQuery库可能是最简单的javascript实现。您熟悉以下功能吗？ KEYUP /模糊？

我为你创造了这个小提琴。希望它有所帮助。 https://jsfiddle.net/wkdjwzfv/

<script>
$(function(){
//val for firstid
$("#firstId").keyup(function() {
//val of firstId
var total = parseInt($(this).val()) + parseInt($("#secondID").val());
console.log(total);
$("#total").empty().append(total);
});

//for keyup for second
$("#secondID").keyup(function() {
var total = parseInt($(this).val()) + parseInt($("#firstId").val());
console.log(total);
$("#total").empty().append(total);
});

})
</script>

Answer 4

试试这个html和jquery组合：

<form id="form" class="green">
  <div class="element-number column1">
    <label for="avanti-testa" class="title">
        <span class="titolo-riga required">Number1</span>
        <input id="firstId" class="small" type="number" min="0" max="100" name="number1" required="required" value="0" />
    </label>
  </div>
  <div class="element-number column1">
    <label for="avanti-testa" class="title">
        <span class="titolo-riga required">Number2</span>
        <input id="secondID" class="small" type="number" min="0" max="100" name="number1" required="required" value="0" />
    </label>
  </div> 
  <div id="answer"></div>
  <button id="submitForm" type="button">Submit</button>
</form>

<script>
    // assuming jQuery is loaded
  (function($) {
    $('#submitForm').on('click', function (e) {
        e.preventDefault();
        var answer = parseInt($('#firstId').val(), 10) + parseInt($('#secondId').val(), 10);
        $('#answer').text(answer);
    });
  })(jQuery);
</script>

Answer 5

作为替代解决方案，我想发布一个使用AngularJS创建的简单答案。这是Plunker：http://plnkr.co/edit/46Xf23jUhrmaT2x31S0K?p=preview

代码如下：

<div class="col-md-2 col-md-offset-5 form-group">
  <input class="form-control" type="number" ng-model="firstValue" />
  <p class="text-center">+</p>
  <input class="form-control" type="number" ng-model="secondValue" />
</div>
<div class="panel panel-primary col-md-2 col-md-offset-5 text-center">
    {{ firstValue + secondValue }}
</div>

这些类来自Bootstrap，只是为了让它更好一些。

使用表单更改标签的值，但不刷新页面

5 个答案: