Using JQuery to update Array values at run time

Question

I am trying to find a solution for this Table that I am cloning with JQuery. I am able to clone the table and update the ID and NAME properties to avoid html conflicts. I was able to get this to work during my original test . However, my goal is to actually provide choices that can then be duplicated by a user when ordering from a list of products. I will then need to import these items for that one user into a database. I have read that the best way to get these similar IDs into a database is to use an array, like ProductCode[0], etc... I tried to apply this concept to my app, but once I added the array, the JQuery no longer updates the remaining fields when selected. Is there a better way to use arrays that can then be cloned at run time, that can then be imported into a database with C# for processing?

The HTML Form that I am using to request a Selection:

The Script that I am using to update the remaining fields when the Product ID field is selected:

$(document).ready(function () {

    $(document).on('change', '#ProductCode[0]', function () {
        var data = "";
        data = $("#ProductCode[0] option:selected").data();
        $("#ProductDesc[0]").val(data.description);
        $("#quantity[0]").val(data.quant);
        $("#ProductPrice[0]").val(data.price);
        $("#DefaultUnitPrice[0]").val(data.price);
    });

});

$(document).ready(function () {
    $(document).on('change', '#quantity[0]', function () {
        var quant = "";
        var data = "";
        data = $("#ProductCode[0] option:selected").data();
        quant = Number($("#quantity[0]").val());
        $("#ProductPrice[0]").val((data.price * quant).toFixed(2));
    });

});

Joseph Marikle · Accepted Answer

First of all, [ and ] are not valid for an ID attribute, which consists of letters, digits ([0-9]), hyphens ("-"), underscores ("_"), colons (":"), and periods. Secondly, you can use attribute selectors to make your event listeners more generic (e.g. $(document).on('change', '[id^=quantity]', function () { ...) (^= is a begins-with attribute selector). Lastly, you can use a second parameter for jquery objects as a means of giving a selector context. This will reduce the number of times you have to have jQuery search the document. All that comes down to the following code:

$(document).ready(function () {

    $(document).on('change', '[id^=ProductCode]', function () {
        var data = "";
        var curTable = $(this).closest('table');
        data = $("option:selected", curTable).data();
        $(this).val(data.description);
        $("[id^=quantity]", curTable).val(data.quant);
        $("[id^=ProductPrice]", curTable).val(data.price);
        $("[id^=DefaultUnitPrice]", curTable).val(data.price);
    });

});

$(document).ready(function () {
    $(document).on('change', '[id^=quantity]', function () {
        var quant = "";
        var data = "";
        var curTable = $(this).closest('table');
        data = $("option:selected", curTable).data();
        quant = Number($(this).val());
        $("[id^=ProductPrice]", curTable).val((data.price * quant).toFixed(2));
    });

});

However in the end, it might just be better to use classes instead of IDs

Using JQuery to update Array values at run time

Answers (1)

Related Questions