In the code I'm working on, there's an 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>
My goal is to have a form appear when the user clicks on this input:
<form action="http://www.google.pt/search" id="form-dictionary">
(...)
</form>
I've written a Javascript function to achieve this:
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 problem arises when attempting to handle the onClick event for the input. The function works fine for "submit" input types.
Attempts to solve:
I tried this:
document.querySelector('#button_dictionary').onclick = showsDictionaryForm;
as well as this with return false added at the end of the function.
<input class="buttonDictionary" type="image" src="icone_dicionario.jpg" value="" id="inputDictionary" onClick="showsDictionaryForm()">
However, none of these approaches worked effectively. The form appears briefly but disappears quickly afterwards. It seems like the form gets rendered, but upon the button submission, the page reloads causing it to vanish again.