用JS提交表格

Question

我正在使用购物车插件，并使用产品页面上的基本表单来提交价格，产品名称等值。问题是插件使用标准的提交按钮来发送值，我想用一个漂亮的定制jQuery翻转来替换所述按钮。为了做到这一点我使用了一些JS和周围扔我的自定义链接提交按钮：

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

形式提交，并且用户会被重定向到首页，但在表单中的数据似乎并没有得到提交并且产品永远不会被添加到“购物车”页面。我怀疑表单正在提交，但我无法触发一些提交数据的JS功能。该插件增加了一些JS到页面的顶部：

<!-- 
// 
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; 
} 
//--> 

如果你想看看有问题的网站，看看这里，然后点击“添加到购物车按钮”： http://hardtopdepot.com/?p=34

您可以在顶部看到购物车： http://hardtopdepot.com/?page_id=50

任何帮助将超级赞赏，谢谢！

Answer 1

该页面有两种形式，您当前正在提交第一个，即搜索表单。更改的onclick到：

document.forms[1].submit() 

此外，还有一个一个元素没有onsubmit事件，让您的链接可以简单地是：

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

编辑：虽然这将解决你目前正在尝试什么做，bobince使得很好好点。

Answer 2

它表现为一个按钮;把它作为一个按钮。将它标记为链接意味着您的表单在没有JavaScript的情况下会不必要地中断，并且会给您带来不需要的链接行为，如中间点击新标签页或尝试为其添加书签。如果您制作具有多个字段但没有提交按钮的表单，您也可以停止Enter以提交工作。

只需使用CSS将按钮设置为链接或任何您想要的样子。更改background并取下border和padding。

这种方法唯一真正的问题是，IE（自然，IE）添加1px的不可移动的填充。通常你可以用一些有针对性的CSS来解决这个问题。另外，如果你只是想要一个简单的图像，使用<input type="image"/>。这就是它的存在，您可以像使用其他图像一样在翻转过程中使用它。