Отправить форму с 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 для отправки, если вы создаете форму с несколькими полями, но без кнопки отправки.

Просто используйте CSS для стилизации кнопки, чтобы она выглядела как ссылка или как вы хотите, чтобы она выглядела. Измените background и снимите border и padding.

Единственная реальная проблема с этим подходом состоит в том, что IE (естественно, IE) добавляет 1px несменяемого отступа. Обычно вы можете обойти это с небольшим количеством целевого CSS. В качестве альтернативы, если вы просто хотите простое изображение, используйте <input type="image"/>. Вот для чего он нужен, и вы можете использовать его в режиме ролловера, как и любое другое изображение.

Answer 2

На этой странице есть две формы, в настоящее время вы отправляете первую форму - форму поиска. Измените клик на:

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>

Редактировать: Хотя это исправит то, что вы сейчас пытаетесь сделать, Бобинс дает очень хорошее замечание.