Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    text
    copied!<p>Try like this:</p> <pre><code>&lt;h3 id="BuyThis" &gt;&lt;button class="Button buyThisBtn"&gt;&lt;i class="icon-shopping-cart"&gt;&lt;/i&gt;&amp;nbsp;&amp;nbsp;Buy This!&lt;/button&gt;&lt;/h3&gt; &lt;div class="ProductContainer" id="product-options"&gt; &lt;form&gt; [BODY OF ACCORDION PANEL WITH A BUNCH OF IRRELEVANT CODE......] &lt;button id="addtocart" type="submit" class="Button" onclick="validateAge(); return validateState();"&gt;&lt;i class="icon-shopping-cart"&gt;&lt;/i&gt; ADD TO CART&lt;/button&gt; &lt;/form&gt; &lt;/div&gt; $(function () { $("#buyThis").click(function () { if(validateState()){ if ($.inArray($("#province").val(), states) &lt;0) { alert("Shipping gifts containing alcohol to this state is prohibited by law. Please choose another item."); $("product-options").hide(); } $("product-options").show(); } } </code></pre> <p><strong>Edit 2</strong></p> <p>Please see this <a href="http://jsfiddle.net/Ej9ZX/17/" rel="nofollow">fiddle</a> with some changes to your code:</p> <p>Please not that you are using the $.inArray method in the wrong way . In the click event and also in the validateState function i think. </p> <p>I also made some changes to the html markup</p> <p><strong>Edit 3</strong></p> <p>Please see this <a href="http://jsfiddle.net/ymycW/17/" rel="nofollow">fiddle</a> with an working example : I hope this could help you now. </p> <p><strong>html</strong></p> <pre><code>&lt;select id="province"&gt; &lt;option value="Alabama"&gt;Alabama&lt;/option&gt; &lt;option value="Alaska"&gt;Alaska&lt;/option&gt; &lt;option value="Arizona"&gt;Arizona&lt;/option&gt; &lt;option value="Arkansas"&gt;Arkansas&lt;/option&gt; &lt;option value="California"&gt;Colorado&lt;/option&gt; &lt;/select&gt; &lt;button id="test" &gt;Teste&lt;/button&gt; &lt;h3 id="BuyThis" style="background:red;" &gt; &lt;button id="buyThisButton" class="Button buyThisBtn"&gt;&lt;i class="icon-shopping-cart"&gt;&lt;/i&gt;&amp;nbsp;&amp;nbsp;Buy This!&lt;/button&gt; &lt;/h3&gt; &lt;div class="ProductContainer" id="product-options"&gt; &lt;form&gt; [BODY OF ACCORDION PANEL WITH A BUNCH OF IRRELEVANT CODE......] &lt;button id="addtocart" type="submit" class="Button" onclick="validateAge(); return validateState();"&gt;&lt;i class="icon-shopping-cart"&gt;&lt;/i&gt; ADD TO CART&lt;/button&gt; &lt;/form&gt; &lt;/div&gt; </code></pre> <p>javascript</p> <pre><code>$( document ).ready(function() { // Handler for .ready() called. $("#BuyThis").click(function() { //alert("test"); if(validateState()){ // if state is valid do this }else{ // do that } }); }); // end of dom ready // Validates State is in list of allowed for wine shipping... function validateState() { // Confirms province is allowed for wine shipping var states = ["Alaska", "Arizona"]; if ($.inArray($("#province").val(), states) &gt;= 0) { alert("Oh no! Shipping items containing alcohol to this state is prohibited by law. Please choose another item."); //$("#BuyThis").unbind("click"); $("#product-options").slideUp(); return false; } alert("Item Available! Please choose your options."); $("#product-options").slideDown(); return true; } // Validates age verification is checked... function validateAge() { if (!$('#age_verification').is(':checked')) { alert("Please verify you are 21 years of age or older."); return false; } return true; } </code></pre>
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload