用于跟踪库存量的简单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（）函数。在我的例子中，我假装它已经填满了。

顺便说一句，看起来像一个有趣的项目，你已经得到了你的手。好好享受！ :)