How to globally overwrite submit on html form in javascript

Question

I struggled all day today with this and I found this http://greasemonkey.win-start.de/patterns/override-method.html but it is only 50% accurate, so I decided to share the solution as it might be useful for csrf implementation for example.

Answer 1

Solution for any type of submit for forms:

// code for form.submit() js call https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/submit

HTMLFormElement.prototype._submit = HTMLFormElement.prototype.submit;
     
function newSubmit() {
    //add code here

    this._submit();
}

HTMLFormElement.prototype.submit = newSubmit;

// code for click on button type submit https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/requestSubmit

function newRequestSubmit(submitter) {       
    if (submitter.srcElement.tagName === "FORM") {
     // add code here
    }
}

document.body.addEventListener("submit", newRequestSubmit);

For csrf implementation the overwriting of XMLHttpRequest.prototype.open is also useful in case of ajax requests by setting the csrf in header: https://stackoverflow.com/a/56499250/7309871