0

You can view the page I'm referring to here:

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

Just enter a random domain name and then you'll see 2 buttons at the bottom. The first button (smaller one) works properly, but the second button (bigger one) isn't adding the order to the shopping cart.

Here's the code for the first button:

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

Here's the code for the second button that isn't working:

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

I'm simply trying to replace the first button with the second one so that an image is being used, but can't seem to get the second button to work properly. What have I done wrong? I changed the type to image and the added a src.

Improve this question
5
  • Why are you using an input type='image' instead of an image (<img)? Commented Nov 12, 2013 at 3:45
  • How would I input with <img without using input type='image' - I was under the impression that was required for submitting a form... Commented Nov 12, 2013 at 3:47
  • What exactly you want? You want the second button to be like first button? or you want the first button to be like second button? Commented Nov 12, 2013 at 3:48
  • You could do it with a javascript call, but what you're doing is fine. You might be missing something, does your image input need the class checkout? Commented Nov 12, 2013 at 3:50
  • @user2970202 your jquery function is the one doing the post. I would just use an image (if you notice, the other button is just a type button, not submit). Commented Nov 12, 2013 at 3:52

4 Answers 4

Reset to default
2

instead of changing type and src just add style to it

<input type="button" style=" background: url('someimage.jpg') no-repeat; width:100px;height:30px; border:none;" />
Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

1

the problem here is because simple input type="BUTTON" do not submit form, but input type="IMAGE" does

so, if you check what is actually called you will see:

  1. press the image, addtocart is called
  2. addtocart is trying to perform ajax request
  3. form is submitted by browser, all ajax requests are interrupted

this is why it doesn't work

to make it work change you code to :

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

Comments

0

I think you're misunderstanding what each does

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

This is the same as <input type="submit"/>. It's used to submit a form. type="image" simply uses an image instead of a button.

What you want is for your onclick event to be fired. It's likely conflicting with your form submit. So you need to use an image tag

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

You can bind the onclick event to any object, actually. It just doesn't work well to have your form submit at the same time.

Improve this answer

Comments

0 
<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();" />

keeping some of those settings you had play with the width & height until it looks right and this should work.

I personally would prefer the css attribute instead of the source.

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.