Im using a shopping cart software wordpress plugin which utilizes a fundamental form around the product page to submit values like cost, product title, etc.. However , the wordpress plugin utilizes a standard submit button to transmit the values and I must replace stated button having a more attractive custom jquery rollover. To be able to achieve this I made use of some JS and thrown a hyperlink 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 shape submits and also the user is rerouted towards the home page however the data within the form does not appear to obtain posted and also the product never will get put into the 'cart' page. I suspect the form gets posted however i am neglecting to fire some additional JS function that submits the information. The wordpress plugin adds some JS to the top 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 wish to browse the the website under consideration, have a look here and click on 'add to trolley button': http://hardtopdepot.com/?p=34

You can observe the trolley at the very top: http://hardtopdepot.com/?page_id=50

Any help could be super appreciated- thanks!

It reacts like a button let it rest like a button. Marking up like a link means your form will unnecessarily break without JavaScript, and provides you undesirable link behavior, like middle-click-for-new-tab or attempting to bookmark it. You may even stop Enter-to-submit working if one makes an application with multiple fields but no submit button.

Only use CSS to create the button to resemble a link or anything you want it to appear like. Alter the background and remove the border and padding.

Really the only trouble with this method is the fact that IE (naturally, IE) adds 1px of unremovable padding. You are able to usually deal with by using a little of specific CSS. Alternatively, should you simply want an easy image, make use of an <input type="image"/>. That is what it's there for and technology-not only inside a rollover as with every other image.

You will find two forms on that page, you are presently posting the very first, the search form. Alter the onclick to:

document.forms[1].submit()

Also, there is no onsubmit event to have an a element, so that your link can easily 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: Although this will fix what you are presently attempting to do, bobince constitutes a very good point.