0

我在网上商店看到过几种表格，您只需更改您想要的商品数量，它就会立即改变价格。没有重新加载，也没有提交（或计算）按钮。

我正在寻找类似的东西，但非常简单。

Amount of pages: [textfield]
price: [answer]

就这样。代码必须从 [textfield] 获取输入并将其乘以某个数字（我可以在代码中更改）。该计算的结果应显示在 [answer] 中。

我一直在谷歌上四处寻找，但我只能找到使用提交按钮的非常困难和大的表单。而且我的 php/ajax/javascript 还不足以自己编写代码。我知道 Stackoverflow 上有几个提交表单，但我不明白如何编辑它们来做我想做的事情。

你不必让它看起来很花哨，我已经制作了一个很好的表格来放入代码。显然它必须在每个主要浏览器上工作。

编辑：我试过 Khòi 提供的代码。

我试过玩这个：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<script src="jquery-1.8.2.min.js" type="text/javascript" defer="defer">
$('#pages').change(function(ev){
var total = $('#pages').val() * 0.2;
$('#total').html((total).toFixed(2));
});?
</script>
</head>
<body>

Pages: <input type="text" name="pages" id="pages" />
<br/><br/>
Total: <span id="total">0.00</span>

</body>
</html>

但这不起作用？？我确实下载了 Jquery 文件并放入与此页面相同的文件夹中。

4

2 回答 2

2

我建议你学习一些基本的 JQuery。使用 JQuery 可以非常有效地完成这些事情，并且学习曲线不会太陡峭。

我做了一个小提琴让你开始：

http://jsfiddle.net/jRs3n/

以下是单个工作 HTML 页面的完整代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>

<title>test</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></script>

<script  type="text/javascript">
$(document).ready(function() {
    $('#pages').keyup(function(ev){
        var total = $('#pages').val() * 0.2;
        $('#total').html((total).toFixed(2));
    });
});
</script>
</head>
<body>

Pages: <input type="text" name="pages" id="pages" />
<br/><br/>
Total: <span id="total">0.00</span>

</body>
</html>
于 2012-10-09T12:47:39.760 回答
1

如果您希望在不离开框的情况下进行计算，则需要将事件从 更改change为keyup这将允许您在特定字段上的每次按键后进行更新。

于 2012-10-09T21:18:53.557 回答