0

I have a couple of images that I use as buttons to trigger a javascript function.

Previously, I've always done this with e.g.

<a href='javascript:myFunction();'><img src="images/myButton.gif" alt="Click Here"/></a>

However, I recently saw examples of using a form input instead, which has the advantage of not producing link artefacts around the button image. This is what I started with.

<form><input type="image" src='images/myButton.png' id="startButton" onClick="myFunction()"></form>

For some reason, this cause the button to trigger a different function as well as the one designated with onlick.

I was about to go back to my tried and true href method, when I thought of removing the form tags, leaving only the input. All worked perfectly!

So my questions are:

  1. Is this safe? I've never seen examples of input tags used outside of forms.
  2. Why would a blank form tag trigger a javascript function? I realise it is intended to send data off to a server, but I thought if I left it blank, it would just sit there.
Thailandian
  • 577
  • 5
  • 14
  • 1
    Possible duplicate of http://stackoverflow.com/questions/3294572/is-input-well-formed-without-a-formb – Avisari Feb 04 '14 at 07:50

2 Answers2

0

This is safe, and the reason that click on the button triggers another function could be that startButton ID has a selector that executes some stuff in your JS code.

Manuel Bécares
  • 88
  • 10
  • Thanks for the reassurance. I doubt that the id or anything else within the input tag could be the problem, because it works fine once I remove the form tags. – Thailandian Feb 04 '14 at 08:21
0

It's not commonly used I think but it's valid as far as I know.

You can also use <button onClick="myfunction">name</button> .

developers-have-no-vacation
  • 642
  • 1
  • 5
  • 13
  • Thanks for the response - feeling a bit more confident now. I originally had a button tag, but wanted customised image buttons. – Thailandian Feb 04 '14 at 08:18