How to create an event that will fire up another event without jquery?

Question

Yes, I have read this question as to how we can write jquery code in plain javascript, But I want to know as to how we can call events using plain javascript

So, How to trigger a submit event, when a click event on a button is initiated without using jquery?

Answer 1

I guess you actually want to query elements with an it so the code makes sense so:

document.addEventListener('DOMContentLoaded' function() {
  document.getElementById('myButton').addEventListener('click', function() {
    document.getElementById('myForm').submit()
  })
})

Answer 2

window.onload = function(){
     document.getElementsByTagName('button')[0].addEventListener('click', function(){
          document.getElementsByTagName('form')[0].submit();
     })
}

<form>
     <button>click</button>
</form>

Answer 3

Get the buttons and forms first, register their click and submit handlers respectively.

window.onload = function() {
  const buttons = Array.from(document.getElementsByTagName('button'));
  const forms = Array.from(document.getElementsByTagName('form'));

  const onButtonClicked = function(event) {
    forms.forEach((form) => {
      form.submit();
    });
  };

  const onFormSubmitted = function(event) {
    console.log('Form submitted!');
  };

  buttons.forEach((button) => button.addEventListener('click', onButtonClicked));
  forms.forEach((form) => form.addEventListener('submit', onFormSubmitted));
};