CSS Decorated Button Becomes Inactive and Unprotected
After setting up the button with CSS, the decoration is applied correctly, but the button becomes inactive, I cannot click on it and it will not be submitted.
Here is the code:
.addToCart {
width: 100px;
border-radius: 4px/4px;
border: 2px #E8CD00;
height:20px;
text-align: center;
vertical-align: center;
font-family: "Trebuchet MS", sans-serif;
font-size: 13px;
font-weight: bold;
padding: 1px;
background-color: #E8CD00;
color: black;
}
<form name="cartAdding">
<input type="hidden" name="productid" />
<input type="hidden" name="command" />
</form>
<input type="submit" value="ADD TO CART" class="addToCart" onclick="addtocart(<?php $itemId?>)" />
You need to move input
to element form
.
<form name="cartAdding">
<input type="hidden" name="productid" />
<input type="hidden" name="command" />
<input type="submit" value="ADD TO CART" class="addToCart" onclick="addtocart(<?= $itemId ?>)" />
</form>
Put the button inside
<form>
tags. Also keep in mind that clicking the button will submit the form and if your Javascript function doesn't return false, you might see unexpected activity.
You need to place a submit button on the form, for example:
<form name="cartAdding">
<input type="hidden" name="productid" />
<input type="hidden" name="command" />
<input type="submit" value="ADD TO CART" class="addToCart" onclick="addtocart(<?php $itemId?>)" />
</form>
EDIT: Actually everything else is more correct - <input type="submit" />
should be inside tags <form></form>
. The odd php code issue still persists.
Check the resulting HTML - you forgot echo
in your handler onclick
.
<input type="submit" value="ADD TO CART" class="addToCart" onclick="addtocart(<?php $itemId?>)" />
^^ - add echo here
As a result, the HTML code looks like this:
<input type="submit" value="ADD TO CART" class="addToCart" onclick="addtocart()" />
or worse, it has a PHP error message in it. In any case, the JS function called addtocart()
is likely to die because it doesn't receive the correct argument.
Your button is clicked, check the syntax of your addtocart method, I changed the code a bit and it works fine. Here's the jsfiddle
<form name="cartAdding">
<input type="hidden" name="productid" />
<input type="hidden" name="command" />
</form>
<input type="submit" value="ADD TO CART" class="addToCart" onclick="alert('click!!');" />