How to intercept the form submission fired by JS event (in plain JS)?

Question

There's a great answer here on how to intercept SUBMIT using addEventListener on a form. It works great as long as the form is submitted either via Submit button (or ENTER).

It's totally ignored though when fired like this:

document.getElementById('myform').submit();

How would you intercept such call?

Here's the example:

<script>
function checkRegistration(){
    var form_valid = (document.getElementById('some_input').value == 'google');
    if(!form_valid){
        alert('Given data is incorrect');
        return false;
    }
    return true;
}
</script>

<form onsubmit="return checkRegistration()" method="get" action="http://google.com" id='myform'>
    Write google to go to google..<br/>
    <input type="text" id="some_input" value=""/>
    <input type="submit" value="google it"/>
</form>
<a href="javascript:document.getElementById('myform').submit();">Ignore validation</a>

I might be missing stg obvious, but in [this example](https://pastebin.com/Te9KSh7P) onsubmit gets ignored — Marcin, Feb 15 '18 at 17:02
Ok. I see, you are right it is a bit strange. I'll post one possible solution soon. — Vladimir M, Feb 15 '18 at 18:34

score 2 · Accepted Answer · answered Feb 15 '18 at 18:39

Ok. here is a possible solution, which requires some hammering down but may work:

Here is your sample:

<script>
function checkRegistration(){
    var form_valid = (document.getElementById('some_input').value == 'google');
    if(!form_valid){
        alert('Given data is incorrect');
        return false;
    }
    return true;
}
</script>

html:

<form onsubmit="return checkRegistration()" method="get" action="http://google.com" id='myform'>
    Write google to go to google..<br/>
    <input type="text" id="some_input" value=""/>
    <input type="submit" value="google it"/>
</form>
<a href="javascript:document.getElementById('myform').submit();">Ignore validation</a>

And here is an algorithm to start capturing the events. Instead of overriding the onsubmit event which seems to get ignored if you call the form.submit programmaticaly, you have to override the submit method for the form.

<script>
    //document.getElementById('myform').onsubmit = function() {alert('testing'); return false;}
  var form = document.getElementById('myform');

  // Store the original method
  var tmp = form.submit;

  // create an intercept and override the submit method for the form with it
  form.submit = function(){
    var form_valid = (document.getElementById('some_input').value == 'google');
    if(!form_valid){
        alert('Given data is incorrect');
        return false;
    }
    // when happy with the validation, apply the old method to the form
    tmp.apply(form);
  }

</script>

I tried it on local machine and it seemed to work. Now you have to generalize this algorithm to handle an arbitrary form. and that might solve your problem.

score 0 · Answer 2 · answered Feb 15 '18 at 17:28

Event listener only gets triggered when a user action submits the form

document.getElementById('myform').addEventListener(
  "submit",
  function(e){
    e.preventDefault();
    console.log("not submitting form");
  }
);
//the following never triggers the event listener:
//https://stackoverflow.com/questions/645555/should-jquerys-form-submit-not-trigger-onsubmit-within-the-form-tag
//document.getElementById('myform').submit();

<form id="myform">
  <input type="submit" >
</form>

A solution may be:

if(validation){
  myForm.submit();
}

score 0 · Answer 3 · answered Feb 15 '18 at 17:37

0

I think I just found what you are searching for. You should directly set the action to let JS handle it on submit.

function check(){
    var form_valid = (document.getElementById('some_input').value == 'google');
    if(!form_valid){
        alert('Given data is incorrect');
        return false;
    }
    return true;
}

<form id="myform" action="javascript:check();">
    <input type="text" id="some_input">
    <input type="submit">
</form>

You could also do something like this:
<form ... action="javascript:function(){...}">

answered Feb 15 '18 at 17:37

Yasamato

34
1
4

I want to intercept form submission on a global level (for every form found in the DOM), to ie. log certain data before submission. That's why I'd be difficult to alter every form :) – Marcin Feb 15 '18 at 18:00
Then what about applying them by script? Like this: `for(form in document.querySelectorAll("form")){ form.setAttribute("action", "javascript:check();") }`. – Yasamato Feb 15 '18 at 19:51

How to intercept the form submission fired by JS event (in plain JS)?

3 Answers3