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

标签 javascript jquery html

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

最佳答案

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

关于javascript - 使用表单更改标签的值但不刷新页面,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34768963/

相关文章:

javascript - 如何解决Angular数据服务功能错误?

php - Paypal 交易 list

php - 每秒刷新一个变量

html - 对齐 td 内的 div

javascript - 我无法在 ColdFusion 页面中加载 Plupload 2.1.2

javascript - 从对象数组创建单个对象 - JS/ES6

javascript - 如何使用 npm 的 csvtojson 将 csv 转换为 json 并忽略 csv 中的第一行?

javascript - Node 中的全局变量是否被垃圾收集器清理?

javascript - 在 Javascript 中轮询输入字段

javascript - 阻止 jQuery UI slider 移动超过给定值?