Submit Event Listener for a form

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:

fun开发者_如何学Cction 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 at the moment, 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.

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();');