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

【问题标题】：change the value of a label with using a form but without refresh the page使用表单更改标签的值但不刷新页面
【发布时间】：2016-04-18 13:28:39
【问题描述】：

我想创建一个基于输入值、计算结果的表单，并将其输入到网页 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;

【问题讨论】：

Prevent form redirect OR refresh on submit?的可能重复
您的代码中有很多错误：您有一个avanti-testa 的标签，但没有一个具有该ID 的元素。此外，您应该只使用一次标签。在您的 JavaScript 中，您试图访问 HTML 文档中不存在的 ID。我宁愿用 AngularJS 来完成这项任务。使用 jQuery 有什么限制吗？
@AlexanderM。不，OP的问题不止于此。他需要更多帮助。
@cezar 我发布了错误的代码...
请发布正确的代码。错误的代码会导致错误的假设，从而导致提出的解决方案也是错误的。

标签： javascript jquery html

【解决方案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>

【讨论】：

如果您使用 HTML5 输入类型，您可以增强表单。您可以使用type="number" 而不是type="text"。因此，您可以简化 var x = y + z 行。
这是解决这个问题的好方法，但它必须实现对向表单输入数据的控制。
感谢您的建议，但这只是一个函数的演示。

【解决方案2】：

如果我理解正确，您正在尝试检索输入值，对它们进行一些数学运算，然后将其返回到页面而不刷新它，如果是这样的话：

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

$("#firstId").change(function() { $("#thirdId").val(calculate()); }); $("#secondID").change(function() { $("#thirdId").val(calculate()); });
做一个计算函数：

函数计算（）{ var a = parseInt($("#firstId").val()); var b = parseInt($("#secondID").val());

返回 a+b; }

【讨论】：

【解决方案3】：

先生，您好，

我建议您可以通过几种不同的方式绑定此输入值以在页面上对其进行更新，而无需刷新。 jQuery 库可能是最容易通过直接 javascript 实现的。您熟悉以下功能吗？按键/模糊？

我为你创造了这个小提琴。希望它有所帮助。 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>

【讨论】：

【解决方案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>

【讨论】：

【解决方案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，只是为了让它更好一点。

【讨论】：