Изменение кнопки ввода изображения?

Question

Вы можете просмотреть страницу, я имею в виду здесь:

http://portal.escalatehosting.com/cart.php?a=add&pid=9

Просто введите случайное доменное имя, а затем вы увидите 2 кнопки в нижней части. Первая кнопка (меньшая) работает правильно, но вторая кнопка (больше) не добавляет заказ в корзину покупок.

Вот код для первой кнопки:

<input type="button" value="{$LANG.checkout} &raquo;" class="checkout" onclick="addtocart();" /> 

Вот код для второй кнопки, которая не работает:

<input type="image" src="http://www.escalatehosting.com/images/continueorder.jpg" style="border:0px;" onclick="addtocart();" /> 

Я просто пытаюсь заменить первую кнопку с второй - так, что изображение используется, но, похоже, не может заставить вторую кнопку работать правильно. Что я сделал не так? Я изменил type на image и добавил src.

Answer 1

вместо изменения типа и ЦСИ просто добавить стиль к нему

<input type="button" style=" background: url('someimage.jpg') no-repeat; width:100px;height:30px; border:none;" /> 

Answer 2

Я думаю, вы непонимание того, что каждый делает

<input type="image" src="my/path" /> 

Это то же самое, как <input type="submit"/>. Он используется для отправки формы. type="image" просто использует изображение вместо кнопки.

Что вы хотите для своего onclick событий, которые нужно уволить. Скорее всего, это противоречит вашей форме. Таким образом, вы должны использовать тег изображения

<img src="http://www.escalatehosting.com/images/continueorder.jpg" style="border:0px;" onclick="addtocart();" /> 

Вы можете связать onclick событие любого объекта, на самом деле. Это просто не работает, чтобы ваша форма была представлена ​​одновременно.

Answer 3

здесь проблема в том, что просто input type="BUTTON" не отправить форму, но input type="IMAGE" делает

так, если вы проверить, что на самом деле называется вы увидите:

1. нажмите изображение, AddToCart называется
2. AddToCart пытается выполнить запрос Ajax
3. форма передается браузером, все Ajax запросы прерываются

, поэтому он не работает

, чтобы сделать его работу изменить вам код:

<input type="image" src="http://www.escalatehosting.com/images/continueorder.jpg" style="border:0px;" onclick="addtocart();return false;" /> 

Answer 4

<input type="button" style="background:url(http://www.escalatehosting.com/images/continueorder.jpg) no-repeat; width:600px; height:100px; border: 0px;" class="checkout" onclick="addtocart();" /> 

держа некоторые из этих настроек вы были играть с шириной & высоту до него выглядит правильно, и это должно сработать.

Я лично предпочел бы атрибут css вместо источника.