Question

我在网上商店看过几种形式，您只需更改所需的商品数量，即可立即更改价格。没有重新加载，也没有提交（或计算）按钮。

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

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

这就是全部。代码必须从[textfield]获取输入并将其乘以一定数量（我可以在代码中更改）。计算结果应在[答案]中给出。

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

你不必让它看起来很花哨，我已经制作了一个很好的表格来放入代码。显然它必须适用于所有主流浏览器。

编辑：我已经尝试过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文件，并将其放入与此页面相同的文件夹中。

Answer 1

我建议你学习一些基本的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>

Answer 2

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

寻找没有提交按钮的计算脚本而不重新加载

2 个答案: