用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

它的行为就像一个按钮；将其保留为按钮。将其标记为链接意味着您的表单将在没有 JavaScript 的情况下不必要地中断，并为您提供不需要的链接行为，例如中键单击新标签或尝试将其添加为书签。如果您制作的表单包含多个字段但没有提交按钮，您也可以停止 Enter-to-submit 的工作。

只需使用 CSS 来设置按钮的样式，使其看起来像一个链接或任何您希望它看起来的样子。把background换掉，把border和padding去掉。

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

Answer 2

该页面上有两个表单，您当前正在提交第一个表单，即搜索表单。将 onclick 更改为：

document.forms[1].submit()

此外，a 元素没有 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 提出了一个非常的好观点。