Submit form with JS

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.

Answer 2

It behaves as a button; leave it as a button. Marking it up as a link means your form will unnecessarily break without JavaScript, and gives you unwanted link behaviour, like middle-click-for-new-tab or trying to bookmark it. You may also stop Enter-to-submit working if you make a form with multiple fields but no submit button.

Just use CSS to style the button to look like a link or whatever you want it to look like. Change the background and take off the border and padding.

The only real problem with this approach is that IE (naturally, IE) adds 1px of unremovable padding. You can usually work around that with a bit of targeted CSS. Alternatively, if you just want a simple image, use an <input type="image"/>. That's what it's there for and you can use it in a rollover just like any other image.