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

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

javascript jquery html

Javascript 使用表单更改标签的值，但不刷新页面,javascript,jquery,html,Javascript,Jquery,Html,我想创建一个基于输入值和计算结果的表单，并将其输入到网页html中的div/label/bit中一种类似于在线货币转换器的工作方式（插入第一种货币的数字，无论是否使用提交按钮，您都可以在不刷新页面的情况下看到结果）这是我的一小段代码（我无法理解实现上述目标的概念/机制）使用html尝试以下简单脚本： <html> <body> <p>Click the button to calculate x.</p> <but

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

一种类似于在线货币转换器的工作方式（插入第一种货币的数字，无论是否使用提交按钮，您都可以在不刷新页面的情况下看到结果）

这是我的一小段代码（我无法理解实现上述目标的概念/机制）

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


单击按钮以计算x
加上

输入第一个数字：

输入第二个数字：

函数myFunction（）{
var y=document.getElementById（“txt1”）.value；
var z=document.getElementById（“txt2”）.value；
var x=+y++z；
document.getElementById（“demo”）.innerHTML=x；
}

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

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

$（“#firstId”）.change（函数（）{ $（“#thirdId”）.val（calculate（））； }); $（“#secondID”）.change（函数（）{ $（“#thirdId”）.val（calculate（））； });

生成一个计算函数：

函数计算（）{ var a=parseInt（$（“#firstId”）.val（）； var b=parseInt（$（“#secondID”）.val（）

返回a+b； }

您好，先生

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

我为你做了这把小提琴。希望能有帮助。


$（函数（）{
//第一身份证的val
$（“#firstId”）.keyup（函数（）{
//一等兵
var total=parseInt（$（this.val（））+parseInt（$（“#secondID”）.val（））；
控制台日志（总计）；
$（“#总计”）.empty（）.append（总计）；
});
//为第二个关键点
$（“#secondID”）.keyup（函数（）{
var total=parseInt（$（this.val（））+parseInt（$（“#firstId”）.val（））；
控制台日志（总计）；
$（“#总计”）.empty（）.append（总计）；
});
})

尝试以下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>


第一
2号
提交
//假设jQuery已加载
（函数（$）{
$（#submitForm'）。在（'click'，函数（e）上{
e、 预防默认值（）；
var-answer=parseInt（$（'firstId'）.val（），10）+parseInt（$（'firstId'）.val（），10）；
$（'答案'）。文本（答案）；
});
})（jQuery）；

作为替代解决方案，我想发布一个使用AngularJS创建的简单答案。这是普朗克：

守则是：

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


+
{{firstValue+secondValue}}

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

可能的重复代码中有很多错误：您有一个标签用于

avanti testa

，但没有一个元素具有该id。您也应该只使用一次标签。在JavaScript中，您试图访问HTML文档中不存在的ID。我宁愿用AngularJS来完成这项任务。使用jQuery有什么限制吗？@AlexanderM。不，OP的问题不止这些。他需要更多的帮助。@cezar我发布了一个错误的代码…请发布正确的代码。错误的代码会导致错误的假设，因此提出的解决方案也会是错误的。如果使用HTML5输入类型，可以增强表单。您可以使用

type=“number”

而不是

type=“text”

。因此，您可以简化行

var x=y+z

。这是解决这一问题的好方法，但必须实现将数据输入表单的控件。感谢您的建议，但这只是一个函数的演示。

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

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

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