Question

I have this Javascript datastore which is part of a TiddlyWiki (fyi) for storing product by SKU. However I’m not sure how to make a form to update it. I want the form to retrieve the amount of the product in ID that is available using GetAmount. The user is given the option to add to, subtract from, or update the value, and then it saves it using the Update function. The new amount should also be displayed in the amount field. This seems like it should be simple, but I don’t know enough about HTML forms to know how to do it.

Here is a fiddle with what I have so far. http://jsfiddle.net/Arlen22/pCDx3/

Answer 1

Forget about using html forms to submit your data. Your datasource is connected directy to your javascript so you can skip the postback and codebehind stuff. I would use jQuery for simplicity but you could do it with native javascript as well. jQuery is well documented if you decide to learn and use it, and worth the time to learn if you ask me.

This example should help to get you started, feel free to edit and comment on it as needed:

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();

    });

});

NOTE: You would want a button or an event that calls the RenderAmount() functions when an id has been entered/changed in the id textbox. In my example i pretended it was already filled in.

By the way, seems like a fun project you have gotten your hands on. Enjoy it! 🙂
​