0

SKUで製品を保存するためのTiddlyWiki（fyi）の一部であるこのJavascriptデータストアがあります。ただし、フォームを作成して更新する方法がわかりません。を使用して利用可能なIDの製品の量をフォームで取得したいGetAmount。ユーザーには、値を加算、減算、または更新するオプションが与えられ、Update関数を使用して値を保存します。新しい金額も金額フィールドに表示されます。これは単純なはずのようですが、HTMLフォームについてはその方法を十分に理解していません。

これが私がこれまでに持っているもののフィドルです。http://jsfiddle.net/Arlen22/pCDx3/

4

1 に答える 1

0

データを送信するためにhtmlフォームを使用することを忘れてください。データソースはJavaScriptに直接接続されているため、ポストバックやコードビハインドをスキップできます。簡単にするためにjQueryを使用しますが、ネイティブjavascriptでも使用できます。jQueryを学習して使用することにした場合は、jQueryが十分に文書化されており、私に尋ねれば、時間をかけて学習する価値があります。

この例は、始めるのに役立つはずです。必要に応じて、自由に編集してコメントしてください。

HTML

<fieldset class="stock-control">

    <legend>Edit Stock Amount</legend>

    <label>ID:</label>
    <input type="text" id="txt-id">

    <label>Amount:</label>
    <input type="text" id="txt-change"><br />

    <input type="button" id="btn-add" value="Add">
    <input type="button" id="btn-sub" value="Subtract">
    <input type="button" id="btn-set" value="Set">

    <br />
    <label>In stock: </label><span id="lbl-total"></span>

</fieldset>

<fieldset class="stock-control">

    <legend>Edit Stock Amount</legend>

    <label>ID:</label>
    <input type="text" class="txt-id">

    <label>Amount:</label>
    <input type="text" class="txt-change"><br />

    <input type="button" class="btn-add" value="Add">
    <input type="button" class="btn-sub" value="Subtract">
    <input type="button" class="btn-set" value="Set">

    <br />
    <label>In stock: </label><span class="lbl-total"></span>

</fieldset>

Javascript

// Your code

$(function () {

    $('.stock-control').each(function () {

        var $control = $(this);
        var $id = $control.find('.txt-id');
        var $amount = $control.find('.txt-amount');
        var $total = $control.find('.lbl-total');

        function RenderAmount() {
            $total.text(StockRecorder.GetAmount($id.val()));
        };

        $('.btn-add').click(function () {
            var stock = parseInt($total.text()) + parseInt($amount.val());
            StockRecorder.Update($id.val(), stock);
            RenderAmount();
        });

        $('.btn-sub').click(function () {
            var stock = parseInt($total.text()) - parseInt($amount.val());
            StockRecorder.Update($id.val(), stock);
            RenderAmount();
        });

        $('.btn-set').click(function () {
            StockRecorder.Update($id.val(), parseInt($amount.val()));
            RenderAmount();
        });

        // Initialize
        RenderAmount();

    });

});

注： IDテキストボックスにIDが入力/変更されたときに、RenderAmount（）関数を呼び出すボタンまたはイベントが必要になります。私の例では、すでに記入されているふりをしました。

ちなみに、手に入れた楽しいプロジェクトのようです。楽しめ！:) </ p>

于 2012-10-17T18:43:47.233 に答える