Input Button v. Image

Question

I've put this in a fiddle to demonstrate. It's just simple addition using a form inputs and presenting the result. Here's the thing that confuses me...

Two options to accept user input...

<input type="button" value="Get Price" onclick="javascript:add();"><br /> <input type="image" src="http://us.cdn2.123rf.com/168nwm/sqback/sqback0904/sqback090400053/4618216-black-button-isolated-on-white.jpg" onclick="javascript:add();">

Why is it that if I use type="button" the script runs and displays the result in the target input, but if instead I use type="image" (in the fiddle it's the button) the script runs, displays the answer, and then clears the form?

Why in the one case does it stop at the display, and on the other it continues on to helpfully clear the answer?

You can remove javascript: from the onclick attributes. The javascript: pseudo-protocol is only required when adding JavaScript to the href attribute of anchor tags (which usually don't have JavaScript code). It isn't needed for event-handler attributes (which always have JavaScript code). — Matt Coughlin
– Matt Coughlin, Commented Jun 21, 2013 at 2:28

Explosion Pills · Accepted Answer · 2013-06-20 23:16:52Z

2

type=button does not submit the form. type=image does. This is based on what type of button gets created according to specifications

answered Jun 20, 2013 at 23:16

Explosion Pills

192k56 gold badges341 silver badges417 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

K20GH · Accepted Answer · 2013-06-20 23:28:11Z

Use this instead to overlay a button on top of an image: http://jsfiddle.net/awnqq/15/

Alternatively you could make a div with the image in and use some javascript to make it clickable.

<button type="button" style="border: 0; background: transparent" onclick="javascript:add();"> <img src="http://us.cdn2.123rf.com/168nwm/sqback/sqback0904/sqback090400053/4618216-black-button-isolated-on-white.jpg" alt="submit" /> </button>

Collectives™ on Stack Overflow

Input Button v. Image

2 Answers 2

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Linked

Related