使用 jQuery/Ajax 进行数学计算

Posted 2023-05-09

【中文标题】使用 jQuery/Ajax 进行数学计算

【英文标题】：Mathematical calculations using jQuery/Ajax

【发布时间】：2012-05-01 23:30:09

【问题描述】：

我的表单中有这个

 <%= f.label :price, "price"%> 
<%= f.text_field :price, :size=>20, :id =>"price" %>

<%= f.label :quantity, "Quantity"%>
<%= f.text_field :quantity, :size=>20, :id =>"qty" %>

<%= f.label :amount, "Amount"%>
<%= f.text_field :amount, :size=>20, :id =>"amount"%>

我希望在“价格”和“数量”中输入值后立即在“金额”字段中发生 price*quantity，即计算应该在提交之前进行。我是 jQuery/Ajax 的新手，所以任何帮助都可以。提前致谢。

【问题讨论】：

@Yorgo 准备好学习 ruby​​，你会看到从未见过 html 的 HTML。

@micha 你可以在浏览器中看到创建的 html。例如在 Internet Explorer 中，您可以在开发者工具 (F12) 中看到

@Yorgo 是的，但这不是必需的，因为我们有 ruby​​ 代码。顺便说一下，IE 是个坏例子。

@micha 我要求提供 html 代码，因为我不知道 ruby​​ 符号。所以我需要它，为什么 IE 是不好的例子？

@Yorgo 因为 Chrome 和 Firefox 的开发者工具要好得多，顺便说一句，即使 IE10 也不支持 File API。所以我不推荐使用IE。

【参考方案1】：

你可以这样做

$(function() 
    $("#price, #qty").keyup(function() 
        var p = $("#price").val();
        var q = $("#qty").val();
        $("#amount").val(q * p);
    );
);

但您必须为金额字段提供 id“金额”，而不是重复使用“价格”作为 id。

【讨论】：

我的金额字段中出现“NaN”。我哪里错了？

知道了。有一个拼写错误，因为我使用的是 jquery，所以建议我使用jQuery 而不是$。工作得很好。 :) 非常感谢队友..!!