0

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?

Falling Rock
  • 23
  • 1
  • 3
  • 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 Jun 21 '13 at 02:28

2 Answers2

2

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

Explosion Pills
  • 188,624
  • 52
  • 326
  • 405
0

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>
K20GH
  • 6,032
  • 20
  • 78
  • 118