I'm trying to update a span tag that is in a fieldset tag that is in a legend tag. The idea is to update the cost of a Software Item as components are selected. The code below works fine if I only have one software item (e.g. - Visual Studio 2008 Pro $2800), but if I add a second item in another fieldset, then when I try to update the span for that fieldset, it updates the span for the fieldset containing my Visual Studio Software. Any ideas what I'm doing wrong?
<script language="javascript" type="text/javascript">
$(document).ready(function() {
$("li").click(function() {
var itemCost = 0;
$("legend").each(function() {
var SoftwareItem = $(this).text();
itemCost = GetItemCost(SoftwareItem);
$("input:checked").each(function() {
var Component = $(this).next("label").text();
itemCost += GetItemCost(Component);
});
$("#ItemCostSpan").text("Item Cost = $ " + itemCost);
});
function GetItemCost(text) {
var start = 0;
start = text.lastIndexOf("$");
var textCost = text.substring(start + 1);
var itemCost = parseFloat(textCost);
return itemCost;
}
});
});
</script>
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<fieldset>
<legend>Visual Studio 2008 Pro $2800</legend>
<ul class="AspNet-CheckBoxList-RepeatDirection-Vertical">
<li class="AspNet-CheckBoxList-Item">
<input id="CheckBoxList1_0" type="checkbox" name="CheckBoxList1$0" value="first1" />
<label for="CheckBoxList1_0">Software Assurance $300.00</label>
</li>
<li class="AspNet-CheckBoxList-Item">
<input id="CheckBoxList1_1" type="checkbox" name="CheckBoxList1$1" value="second2" />
<label for="CheckBoxList1_1">Another Component $255.25</label>
</li>
<li class="AspNet-CheckBoxList-Item">
<input id="CheckBox1" type="checkbox" name="CheckBoxList1$1" value="second2" />
<label for="CheckBoxList1_1">A Second Component $15.25</label>
</li>
</ul>
<span id="ItemCostSpan" style="background-color:White"> </span>
</fieldset>
<fieldset>
<legend>Visio 2008 Pro $415</legend>
<ul class="AspNet-CheckBoxList-RepeatDirection-Vertical">
<li class="AspNet-CheckBoxList-Item">
<input id="CheckBox2" type="checkbox" name="CheckBoxList1$0" value="first1" />
<label for="CheckBoxList1_0">Software Assurance $40.00</label>
</li>
<li class="AspNet-CheckBoxList-Item">
<input id="CheckBox3" type="checkbox" name="CheckBoxList1$1" value="second2" />
<label for="CheckBoxList1_1">Another Component $25.55</label>
</li>
<li class="AspNet-CheckBoxList-Item">
<input id="CheckBox4" type="checkbox" name="CheckBoxList1$1" value="second2" />
<label for="CheckBoxList1_1">A Second Component $10.25</label>
</li>
</ul>
<span id="ItemCostSpan" style="background-color:White"></span>
</fieldset>
<span id="TotalCostSpan" style="background-color:White"></span>
</form>
Tag ids must be unique. You are updating the span with ID 'ItemCostSpan' of which there are two. Give the span a class and get it using find.
$("legend").each(function() {
var SoftwareItem = $(this).text();
itemCost = GetItemCost(SoftwareItem);
$("input:checked").each(function() {
var Component = $(this).next("label").text();
itemCost += GetItemCost(Component);
});
$(this).find(".ItemCostSpan").text("Item Cost = $ " + itemCost);
});
Source: Stackoverflow.com