Given the following table cell:
<td>
<input class="SearchProdID" type="hidden" value="460" name="ProdID"/>
<input class="SearchQty" type="text" value="1" size="2" name="qty"/>
<input class="cartadd" type="button" value="+" name="searchcartadd"/>
</td>
The following JavaScript works in FF2 and IE7 but not in IE6:
$(".cartadd").click(function() {
// GET SIBLING PRODUCT IDS
IDBox = $(this);
ProdID = $(this).siblings(".SearchProdID").val();
Qty = $(this).siblings(".SearchQty").val();
alert("Here");
// MORE CODE....
}
In FF2 and IE7 "Here" is alerted and the entire function (which later
posts these variables via AJAX) runs perfectly. In IE6 I don't get the
alert. If I alert IDBox right after the line where it's set, I get
[object Object] which I believe is correct, but as soon as it hits the
next lines involving siblings, it just stops dead - no error, no
warning, nothing.
Following up to my own post but while I was waiting for my post to
appear in the group I decided to try changing the variable name from
ProdID to ProductID - and it worked!
A near identical piece of code was having a similar problem so I changed
the variable from SeriesName to SeriesID - and that fixed the problem
there too!
My theory here is that if you look at the above snippets, the hidden
form elements in both cases had the names "ProdID" and "SeriesName", so
they were already defined as variables and IE6 had a problem with
overwriting or reassigning them somehow?
Regards,
Michael Price