Clever Geek Handbook

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?>)" />
+3


source to share


5 answers


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>
+5


source


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.

+4


source


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>
+2


source


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.

0


source


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!!');" />
0


source






More articles:


All Articles