How to call an onclick function on an input of type "image"?

Question

So, in my code I have this input of type "Image".

<div class="icon" id="button_dictionary">
    <form>
        <input class="buttonDictionary" type="image" src="icone_dicionario.jpg" value="" id="inputDictionary"> 
        <label for="inputDictionary">Dictionary</label>
    </form>
</div>

And I want that, when the user clicks on it, the following form appears:

<form action="http://www.google.pt/search" id="form-dictionary">
     (...)
</form>

I've made a Javascript function to make it happens:

function showsDictionaryForm(){
            if(document.querySelector('#form-dictionary').style.display == "none")
                document.querySelector('#form-dictionary').style.display = "inline-block";
            else
                document.querySelector('#form-dictionary').style.display = "none";
}

The problems is when I try to deal with the onClick event, so that, when it happens, the function above is called. The function is working pretty well, since for "submit" input types, it works.

Solutions that didn't work:

I tried something like this:

document.querySelector('#button_dictionary').onclick = showsDictionaryForm;

and also this, adding return false the the end of the function.

 <input class="buttonDictionary" type="image" src="icone_dicionario.jpg" value="" id="inputDictionary" onClick="showsDictionaryForm()">

None of them worked well. The form appears, but disappears as fast as. It seems to me that the form is calculated, but when the button is submitted, the page is reloaded os something like it, and it disappears again.

In you showsDictionaryForm() you've set #form-dictionnario, but you use #form-dictionnary with a -Y, is it ok ? — Anwar
– Anwar, Commented Feb 17, 2015 at 16:35
Sorry, edited it. Just a mistake when passing everything to english. — Mr Guliarte
– Mr Guliarte, Commented Feb 17, 2015 at 16:41

Alex M · Accepted Answer · 2015-02-17 16:33:26Z

2

Inside of your showsDictionaryForm(event) event handler use event.preventDefault() to stop default behaviour from happening (in your case form is being submitted to the server).

On the showsDictionaryForm I would suggest to use class manipulation instead of inline styles. For example, you can have globally defined:

.hidden {
  display: none !important;
}

And use it to show/hide form-dictionary form.

answered Feb 17, 2015 at 16:33

Alex M

1,3041 gold badge14 silver badges23 bronze badges

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

Collectives™ on Stack Overflow

How to call an onclick function on an input of type "image"?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related