Menu
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>
338
Use the textContent property to change the text of a span element, e.g. span. textContent = 'Replacement text' . The textContent property will set the text of the span to the provided string, replacing any of the existing content. Here is the HTML for the examples in this article.
var span = $('<span />'). attr({'className':'folder_name' , 'text':'favre' }); var insert= $('<div/>', { className: "folder", html: span }); which yielded this result.
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);
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
