Question

Im working with a shopping cart plugin and that uses a basic form on the product page to submit values like price, product name, etc.. The problem is that the plugin uses a standard submit button to send the values and I would like to replace said button with a prettier custom jquery rollover. In order to make this happen I used some JS and tossed a link around my custom submit button:

<a href="#" onclick="document.forms[0].submit()" value="Add to Cart" onsubmit="return ReadForm(this, true);">
<img class="fade" src="style/img/add_btn.jpg" style="background: url(style/img/add_ro.png);" alt=""/>
</a> 

The form submits and the user is redirected to the homepage but the data in the form doesn’t seem to get submitted and the product never gets added to the ‘cart’ page. I suspect that the form is getting submitted but I am failing to fire some additional JS function that submits the data. The plugin adds some JS to the top of the page:

<!--
//
function ReadForm (obj1, tst) 
{ 
// Read the user form
var i,j,pos;
val_total="";val_combo="";  

for (i=0; i<obj1.length; i++) 
{     
// run entire form
obj = obj1.elements[i];

// a form element
if (obj.type == "select-one") 
{   // just selects
if (obj.name == "quantity" ||
obj.name == "amount") continue;
pos = obj.selectedIndex;        // which option selected
val = obj.options[pos].value;   // selected value
val_combo = val_combo + "(" + val + ")";
}
}
// Now summarize everything we have processed above
val_total = obj1.product_tmp.value + val_combo;
obj1.product.value = val_total;
}
//-->

If you want to check out the the site in question, take a look here and click ‘add to cart button’:
http://hardtopdepot.com/?p=34

You can see the cart at the top:
http://hardtopdepot.com/?page_id=50

Any help would be super appreciated- thanks!

Answer 1

There are two forms on that page, you’re currently submitting the first, which is the search form. Change the onclick to:

document.forms[1].submit()

Also, there’s no onsubmit event for an a element, so your link can simply be:

<a href="#" onclick="document.forms[1].submit()" value="Add to Cart">
    <img class="fade" src="style/img/add_btn.jpg" style="background: url(style/img/add_ro.png);" alt=""/>
</a>

Edit: While this will fix what you’re currently trying to do, bobince makes a very good point.