0

ウェブショップで、必要なアイテムの量を変更するだけで、価格が即座に変更されるフォームをいくつか見ました。再読み込みや送信（または計算）ボタンはありません。

私はそのようなものを探していますが、非常に単純です。

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

それで全部です。コードは[textfield]から入力を受け取り、それを特定の数値（コードで変更できます）で乗算する必要があります。その計算の結果は[回答]で提示する必要があります。

私はグーグルで周りを見回してきましたが、送信ボタンを使用する非常に難しくて大きなフォームしか見つけることができません。そして、私の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/

以下は、動作する 1 つの 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 に答える