Question

我有一个html表格，人们可以输入购买项目的数量。该文本字段的默认值为1.

<input type="text" size="5" value="1" id="position" class="amntstyle" name="position">

我想要价格的另一个文本输入字段，其中值将自动为位置的15倍。

例如，如果有人在位置字段中输入3，则价格输入字段将自动获得值45。喜欢这个

<input type="text" size="5" value="45" id="price" class="amntstyle" name="price">

有可能吗？

非常感谢你的帮助。

Answer 1

简单..使用javascript函数和onkeyup

<script type="text/javascript">
    function updatePrice(amount, element){
       var amount = parseInt(amount);
       if(!amount) amount = 0;
       var toUpdate = amount*15;
       document.getElementById(element).value = toUpdate;
    }
</script>


<input type="text" size="5" value="1" id="position"  class="amntstyle" name="position"  onkeyup="updatePrice(this.value,'price');">
<input type="text" size="5" value="45" id="price" class="amntstyle" name="price">

Answer 2

工作演示：http://jsfiddle.net/YgheP/

针对特定情况制作，但您可以根据自己的需要进行调整。

希望它能满足你的需求。 :)

还要查找isNaN检查和浮动值！ parseFloat(string)

<强>码

$('#position').keyup(function() {
    var price = parseInt(this.value) * 15;

    $('#price').prop('value', price);
});

Answer 3

您可以使用此代码附加可解决问题的事件处理程序：

$("#position").bind("change", function(){
   $("#price").val(parseInt($("#position").val()) * 15);
}

希望有所帮助

Answer 4

这是YUI3版本：



<script src="http://yui.yahooapis.com/3.6.0/build/yui/yui-min.js"></script>
<script>
    YUI().use("node", function(Y) {
        var priceNode = Y.one("#price");
        var positionNode = Y.one("#position");
        positionNode.on("change", function(e) {
             priceNode.set("value", positionNode.get("value")*15);
        });
    });
</script>

<script src="http://yui.yahooapis.com/3.6.0/build/yui/yui-min.js"></script> <script> YUI().use("node", function(Y) { var priceNode = Y.one("#price"); var positionNode = Y.one("#position"); positionNode.on("change", function(e) { priceNode.set("value", positionNode.get("value")*15); }); }); </script>

Answer 5

如果你使用jquery然后使用插件formInteract，你只需要这样做。

<input type="text" size="5" value="1" id="position" class="amntstyle" name="position"> 

<input type="text" size="5" value="45" id="price" class="amntstyle" name="price" data-bind-change-value="#position*15">

在页面底部只包含此插件文件，其他所有内容都将自行完成。

这是项目的链接 https://bitbucket.org/ranjeet1985/forminteract

您可以将此插件用于多种用途，例如获取表单的价值，将值赋予表单，验证表单等等。你可以在项目的index.html文件中看到一些代码示例

javascript或jQuery函数用于输入字段值之间的交互

5 个答案: