用於跟蹤庫存量的簡單javascript程序

Question

我有這個Javascript數據存儲區，它是由SKU存儲產品的TiddlyWiki（fyi）的一部分。不過，我不確定如何製作表單來更新它。我希望表單能夠使用GetAmount檢索ID中可用的產品數量。用戶可以選擇添加，減去或更新該值，然後使用Update函數將其保存。新金額也應顯示在金額字段中。這似乎應該很簡單，但我對HTML表單知之甚少，無法知道如何去做。

這是我到目前爲止的一把小提琴。 http://jsfiddle.net/Arlen22/pCDx3/

Answer 1

忘記使用html表單提交您的數據。你的數據源直接連接到你的JavaScript，所以你可以跳過回發和代碼隱藏的東西。爲了簡單起見，我會使用jQuery，但您也可以使用原生JavaScript來完成此操作。如果你決定學習和使用它，那麼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(); 

    }); 

}); 

注意：你會想要一個按鈕或ev如果在ID文本框中輸入/更改了ID，則會調用RenderAmount（）函數。在我的例子中，我假裝它已經填滿了。

順便說一句，看起來像一個有趣的項目，你已經得到了你的手。好好享受！ :)