CODEWITHSUNDEEP
javascripthtmlformsinput
Falling Rock
Falling Rock

Reputation: 23

Input Button v. Image

http://jsfiddle.net/Deron/awnqq/9/

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?

Upvotes: 0

Views: 94

Answers (2)

K20GH
K20GH

Reputation: 6281

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>

Upvotes: 0

Explosion Pills
Explosion Pills

Reputation: 191809

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

Upvotes: 2

Related Questions