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

我想创建一个基于输入值，计算结果并将其输入到网页html中某处的div/label /位的表单。使用表单更改标签的值，但不刷新页面

的工作类似于货币转换器在网上（插入数第一的货币，你可以看到结果，而不刷新页面，与使用的提交按钮或没有）

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

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

来源

2016-01-13 Odino

可能重复[防止表单重定向或刷新提交？]（http://stackoverflow.com/questions/1263852/prevent-form-redirect-or-refresh-on-submit） –

有很多错误你的代码：你有一个'avanti-testa'的标签，但没有一个具有该id的元素。你也应该只使用一次标签。在JavaScript中，您试图访问HTML文档中不存在的ID。我宁愿让AngularJS完成这项任务。你有使用jQuery的限制吗？ – cezar

@AlexanderM。不，OP的问题超出了这个范围。他需要更多的帮助。 – cezar

试试这个简单的脚本和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>

来源

2016-01-13 14:21:29

如果您使用HTML5输入类型，则可以增强表单。而不是'type =“text”'你可以使用'type =“number”'。因此，您可以简化'var x = y + z'这一行。 – cezar

这是解决这个问题的好方法，但必须在输入数据的窗体中实施控制。 – Odino

感谢您的建议，但这只是演示功能。 –

如果我理解正确的话，你想检索到的输入值，做一些数学运算与他们，并返回页面而不刷新它，如果它是所以：

做出改变事件监听双方的投入，在这种情况下：

$（ “＃firstId”）变化（函数（）{ $（ “＃thirdId”）。 VAL（计算（））; }）; （）＃ $（“＃secondID”）。change（function（）{ $（“＃thirdId”）.val（calculate（））; }）;
使计算功能：

函数计算（）{ VAR一个= parseInt函数（$（ “＃firstId”）VAL（））; var b = parseInt（$（“＃secondID”）。val（））;

return a + b; }

来源

2016-01-13 14:25:25 pailodze

好日子先生，

我建议你可以绑定这个输入值几种不同的方式来更新它在页面上，而无需刷新。 jQuery库可能是最容易实现的直接JavaScript。您是否熟悉以下功能？ Keyup/Blur？

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

来源

2016-01-13 14:33:00 ChrisBurns

试试这个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>

来源

2016-01-13 14:33:06

作为一种替代解决方案，我想发布与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>

的类是从引导，只是为了使其点点更好。

来源

2016-01-13 14:48:36 cezar

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

回答

相关问题