How to set `onSubmit` dynamically with JavaScript

Question

Right now I am in a bit of a dilemma because I cannot edit the onSubmit of my form, so I will have to set it dynamically. My problem is, I have no idea how to do this without overwriting the value that is already in the onSubmit
For example, lets say I have this code:

<form name="bob" onSubmit="something-i-cannot-change">

</form> 

How would I set another function to happen onSubmit along with the other function that is already in there? I looked this up and had no luck... Thanks, I really appreciate any help!!!

Note: If this question is a duplicate of anything, then please let me know!

Answer 1

document.querySelector('[name="bob"]')
        .addEventListener('submit',
                          functionThatDoesSomethingAfter);

Note the form has to already be in the DOM so put the code at the end of the body tag.

https://developer.mozilla.org/en-US/docs/Web/API/document.querySelector

https://developer.mozilla.org/en-US/docs/Web/API/EventTarget.addEventListener

Answer 2

document.getElementById("<element-id>").setAttribute("onSubmit", "<action>");

Answer 3

Save a reference to the existing onSubmit function and then create a new onSubmit function that does what you'd like and then call the original.

// jQuery syntax for DOM work
var originalSubmit = $('#bob').onSubmit
$('#bob').onSubmit = function() { do stuff here then call original };