Functions not working in Internet Explorer
Hi!
So, I have this page with a dropdown containing a list of states (id #province). When a button (id #buyThis) is clicked, the user is either given an error telling them the state is not allowed or, if it is allowed, a modal pops up with a checkbox they must check (id #age_verification) before proceeding.
Everything works perfectly except on internet explorer. Nothing happens when the button is clicked, no modal, no errors...I'm wondering if I have a syntax error in my script.
Thanks in advance!
Susan
Complete script for this section:
- $(function() {
$("#BuyThis").unbind("click").click(function() {
if(validateState()){
// if state is valid do this
$("#product-options").modal('toggle');
}else{
// do that
$("#product-options").modal('hide');
}
});
});
// Validates State is in list of allowed for wine shipping...
function validateState() {
// Confirms province is allowed for wine shipping
var states = ["Alabama"];
if ($.inArray($("#province").val(), states) >= 0) {
alert("Oh no! Shipping items containing alcohol to this state is prohibited by law. Please choose another item.");
return false;
}
return true;
}
// Validates age verification is checked...
function validateAge() {
if (!$("#age_verification").is(':checked')) {
alert("This gift contains alcohol. You must be 21 years of age or older to purchase. Please check box to verify you are of legal age. An adult signature with ID will be required upon delivery.");
return false;
}
$("#product-options").modal('toggle');
return true;
}
//generates random number for hidden field
var randomnumber=Math.floor(Math.random()*1111111)
$('.productAttributeConfigurableEntryNumbersOnlyText .productAttributeValue input[type="text"]').val( randomnumber );
HTML in case it's relevant:
- <select id="province">
- <option value="Alabama">Alabama</option>
- <option value="Alaska">Alaska</option>
- <option value="Arizona">Arizona</option>
- <option value="Arkansas">Arkansas</option>
- <optionvalue="California">Colorado</option>
- </select>
- <form method="post" class="form-horizontal" enctype="multipart/form-data" id="productDetailsAddToCartForm">
- <div class="ProductDetailsGrid ProductAddToCart" id="ProductDetailsAddToCart">
- <div class="productAttributeList" style="display: none">%%GLOBAL_ProductAttributeList%%</div>
- <a id="BuyThis" type="button" class="btn btn-small btn-warning" type="button"><i class="icon-shopping-cart icon-white"></i> Buy This!</a>
- <div class="modal hide fade in" id="product-options">
<div class="modal-header center">
- <a class="close modal-close l-m" data-dismiss="modal" aria-hidden="true">x</a>
- <h2 class="title">Please Verify Your Age</h2>
- </div>
- <div class="modal-body ll-m r-m">
- <div class="label label-success btm-m"><i class="icon-ok-sign icon-white"></i> This Item is Available! </div>
- <div id="ageVerificationDiv" class="top-m">
- <p class="modalHeader top-m btm-m">This gift contains alcohol. You must be 21 years of age or older to purchase.</p>
- <label for="age_verification">
- <input type="hidden" value="93" />
- <input id="age_verification" type="checkbox" class="validation" value="92" />
- <p class="center-text">By checking this box you certify you are 21yrs of age or older. An adult signature with ID will be required upon delivery.</p>
- </label>
- <div class="cf"></div> </div>
- </div><!-- end of modal body-->
- <div class="modal-footer">
- <button id="modalCancel" class="btn btn-small" data-dismiss="modal" aria-hidden="true">Cancel</button>
- <button href="#" id="addtocart" class="btn btn-small btn-warning" onclick="return validateAge();"><i class="icon-shopping-cart icon-white"></i> I am 21 or Over! Add To Cart!</button> </div><!-- end of modal footer -->
- </div> <!-- end of modal --> </div> <!-- End #ProductDetailsAddtoCart -->
- </form>