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 - 提交工作。

只需使用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提出了非常的优点。

用JS提交表格

2 个答案: