Submit event listener for the form

Question

I wrote an event listener to submit the form, which causes me several problems. When you press 'enter' inside the text field, everything works fine. However, I have a gap (with background image) that submits the form also through the click event. This does not work properly, and I cannot understand why.

Here is the basic HTML:

<form name="myForm"> <input type="text" name="search" /> <span id="search-button"></span> </form> 

Here's the JS for the event listener:

 function evtSubmit(e) { // code e.preventDefault(); }; var myform = document.myForm; if (myform.addEventListener) { myform.addEventListener('submit', evtSubmit, false); } 

And here is the JS for "span" and its click event:

 var searchButton = document.getElementById('search-button'); if (searchButton) { searchButton.onclick = function() { document.myForm.submit(); }; } 

NOTE. The JS for the range click event is in a separate JS file and is not available to atm, so changing this script parameter is less preferable. If the only way to fix this problem is to update this file, I can ... but due to processes beyond my control, it is much more complicated.

Answer 1

When form.submit() called, the form.submit() event onsubmit not be fired. Alternatively, you can set the javascript:evtSubmit(event) action attribute javascript:evtSubmit(event) :

 function evtSubmit(e) { // code e.preventDefault(); }; var myform = document.myForm; myform.setAttribute('action', 'javascript:evtSubmit();');