Submit Event Listener for a form

Question

I've written an event listener for a form submit that is causing me a few issues. When pressing 'enter' inside the text field everything works fine. However, I have an span (with background-image) that submits the form as well via a click event. This is not working properly and I can't figure out why.

Here's 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's the JS for the 'span' and its click event:

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

NOTE: The JS for the span's click event is in a separate JS file and inaccessible atm, so changing that script is less of an option. If the only way to fix this issue is to update that file, I can...but due to processes beyond my control, it's much more difficult.

Answer 1

When calling form.submit(), the onsubmit event won't be triggered. As an alternative, you can set the action attribute to javascript:evtSubmit(event):

function evtSubmit(e) {
  // code
  e.preventDefault();
};

var myform = document.myForm;
myform.setAttribute('action', 'javascript:evtSubmit();');

Answer 2

There is an excellent example of overriding the submit method of the form element using the prototype property in section 4.22 Overriding a built-in Javascript method of the old Greasemonkey book "Dive Into Greasemonkey".