Replace Add To Card Image with Text (When Using Options)

[drumnjazz]

Hello there. I normally replace the "Add To Cart" button on my site with plain text (as formatted by CSS).



However, I just added a t-shirt to my store and have options for different sizes. I am not sure how to alter the code so that I can continue to use plain text formatting instead of the ej_add_to_cart.gif.



Here is my current code which forces me to use the gif and renders the plain text dead:



<form action="https://www.e-junkie.com/ecom/gb.php?c=cart&i=210879&cl=10022&ejc=2" target="ejejc" method="POST" accept-charset="UTF-8">

<input type="hidden" name="on0" value="Size"/>

Size:<br/>

<select name="os0">

<option value="Small">Small</option>

<option value="Medium">Medium</option>

<option value="Large">Large</option>

<option value="Extra Large">Extra Large</option>

</select>

<br/>

<input type="image" src="http://www.e-junkie.com/ej/ejadd_to_cart.gif" border="0" alt="Add to Cart" class="ec_ejc_thkbx"/></form>ADD TO CART [T-SHIRT+MP3 $15.99]</a>





Here is my standard code which allows me to use plain text:



<a href="https://www.e-junkie.com/ecom/gb.php?c=cart&i=201769&cl=10022&ejc=2" target="ejejc" class="ec_ejc_thkbx" onClick="javascript:return EJEJC_lc(this);">ADD TO CART [CD+MP3 $7.99]</a>

[E-junkie_Guru]

Taking the Add to Cart code example you provided above, this should work:



<form action="https://www.e-junkie.com/ecom/gb.php?c=cart&i=210879&cl=10022&ejc=2" target="ejejc" method="POST" accept-charset="UTF-8">

<input type="hidden" name="on0" value="Size"/>

Size:<br/>

<select name="os0">

<option value="Small">Small</option>

<option value="Medium">Medium</option>

<option value="Large">Large</option>

<option value="Extra Large">Extra Large</option>

</select>

<br/>

<a href=# onClick="javascript:return EJEJC_lc(this.parentNode);">ADD TO CART [T-SHIRT+MP3 $15.99]</a>

</form>



The only drawback to this, and there's really no way around it, is that buyers who have JavaScript disabled in their browser will be unable to Add to Cart this item. HTML provides no "standard" way to submit a form using a text link instead of a button, so the only way of doing it involves JavaScript tricks, which of course won't work if JavaScript has been disabled.

[drumnjazz]

Tyson, I just want to thank you for the quick response and accurate code. Much appreciated.



Also, thanks for the heads up with the Javascript issue. I suppose the only thing that would work to fix this would be to use the standard button. Is that right?

[drumnjazz]

Tyson, I just want to thank you for the quick response and accurate code. Much appreciated.



Also, thanks for the heads up with the Javascript issue. I suppose the only thing that would work to fix this would be to use the standard button. Is that right?

[E-junkie_Guru]

Yes, you would need to use either the standard button, or a custom image button if you wish, to allow all buyers to Add to Cart this item even if they have disabled JavaScript. This page shows you how to replace our standard button with a custom image:

http://www.e-junkie.com/ej/help.custom.purchase-buttons.htm



You can even replace our fancy Add to Cart button with a regular Submit type of button in the browser's default style -- replace this:

<input type="image" src="http://www.e-junkie.com/ej/ejadd_to_cart.gif" border="0" alt="Add to Cart" class="ec_ejc_thkbx" onClick="javascript:return EJEJC_lc(this.parentNode);"/>



...with this:

<input type="button" value="Add to Cart" onClick="javascript:return EJEJC_lc(this.parentNode);">

[drumnjazz]

Gotcha. Again, many thanks.

[E-junkie_Guru]

Slight correction -- the browser-default-style button code should actually be this:



<input type="submit" value="Add to Cart" onClick="javascript:return EJEJC_lc(this.parentNode);">



The version I posted previously would not work if the buyer had disabled JavaScript, but this version will work with and without JS.