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

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

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

Answer 2

如果您使用的是 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 文件中看到一些代码示例

Answer 3

简单..使用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 4

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

为特定场景制作，但您可以根据需要对其进行调整。

希望它能满足你的事业。:)

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

代码

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

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

Answer 5

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

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

希望有帮助