Reputation: 869
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:
<table>
<tr>
<td style="width:20%;">
<div class="input-group date">
<div class="input-group-addon">
<span class="glyphicon glyphicon-duplicate addsection"></span>
</div>
<select class="form-control" id="ProductCode[0]" name="ProductCode[0]" style="border-bottom-color:black!important;border-color:white;">
<option selected>Select Product</option>
<option value='292' data-description='APRIL Afternoon At the Greenhouse TICKET' data-price='35.00'>AAATG</option>
<option value='285' data-description='APRIL AFTERNOON AT THE GREENHOUSE Ticket EARLYBIRD SPECIAL' data-price='30.00'>AAATGearlybird</option>
<option value='30' data-description='Organic Adzuki Beans 1/2 Lb' data-price='4.25'>AB12LB</option>
<option value='31' data-description='Organic Adzuki Beans 1/4 Lb' data-price='2.25'>AB14LB</option>
<option value='29' data-description='Organic Adzuki Beans 1 Lb' data-price='8.00'>AB1LB</option>
<option value='47' data-description='Organic Adzuki Seeds 1 Lb' data-price='5.00'>ABS1LB</option>
<option value='145' data-description='Alberto's Lemon/Garlic Salad Dressing 16 Oz.' data-price='11.00'>Alberto's Dressing</option>
<option value='241' data-description='Organic Fenugreek Sprouted Beans 4 oz.' data-price='2.00'>APRIL</option>
<option value='310' data-description='Organic Fenugreek Sprouted Beans 16 oz' data-price='7.75'>April16oz</option>
<option value='309' data-description='Organic Fenugreek Sprouted Beans 8 oz' data-price='4.00'>April8oz</option>
<option value='284' data-description='SeaVeggieSpecialAUGUST1Kelp/1Dulse/1TripleBlendPACKAGE of 3' data-price='11.50'>AUGUST</option>
<option value='271' data-description='DM Organic Tomato Basil Sauce CASE' data-price='36.00'>BB BasilS case</option>
<option value='273' data-description='DM Organic Tomato Chili Sauce CASE' data-price='36.00'>BB ChiliS case</option>
<option value='276' data-description='DM Organic Linguine Pasta CASE' data-price='36.00'>BB Lpasta case</option>
<option value='277' data-description='DM Organic Extra Virgin Olive Oil 500ML CASE' data-price='84.00'>BB OO 500ML</option>
<option value='278' data-description='DM Organic Extra Virgin Olive Oil 750ML CASE' data-price='132.00'>BB OO 750ML</option>
<option value='275' data-description='DM Organic Spaghetti Pasta CASE' data-price='36.00'>BB Spasta case</option>
<option value='274' data-description='DM Organic Tagliatelle Pasta CASE' data-price='36.00'>BB Tpasta case</option>
<option value='272' data-description='DM Organic Tomato Vegetable Sauce CASE' data-price='36.00'>BB VegS case</option>
<option value='117' data-description='Organic Mixed Beans 1 Lb' data-price='8.00'>BEEMB</option>
</select>
</div>
<td style="width:70%;"><input id="ProductDesc[0]" class="form-control" style="width: 100%; border-bottom-color: black!important; border-color: white;" name="ProductDesc[0]" type="text" value="" /></td>
<td><input id="quantity[0]" class="form-control" style="width: 50px; border-bottom-color: black!important; border-color: white; text-align: center;" name="quantity[0]" type="text" value="0" placeholder="1" /></td>
<td>
<input id="ProductPrice[0]" class="form-control cost" style="width: 95px; text-align: center; border-bottom-color: black!important; border-color: white;" name="ProductPrice[0]" type="text" value="" placeholder="$0.00" />
</td>
<td>
<div class="input-group-addon">
<span class="glyphicon glyphicon-eject remove"></span>
</div>
</td>
</tr>
</table>
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));
});
});
Upvotes: 1
Views: 607
Reputation: 78590
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
Upvotes: 2