SHAREPOINT Prevent pop-up when clicking Submit

Question

SharePoint 4
SharePoint Designer 2013
Using DFFS under Custom JS to add code

What I'm currently using is

window.addEventListener('beforeunload', function (e) {
  e.preventDefault();
  e.returnValue = '';
});

This gives me a "Changes you made may not be saved." pop-up whenever I try to navigate away from the page, which I need. I have 2 problems, though, and all the resources I've found don't quite fix them.

1. This pop-up occurs when I click to save my form
2. If I click cancel to this ↑ specific pop-up the submit button stays grayed out and un-clickable

Fixing the first problem should get rid of the second, but I can't find a solution that works. The closest I've found is To stop the alert on form submission, I used $("#submit_button").click(function() { window.onbeforeunload = null; });, but it's from an older thread and doesn't work.

*edit
It occurred to me that this chunk for code I used to change the text for the same button that I don't want the pop-up for could be useful to someone with more coding-savvy than I

<script type="text/javascript">
_spBodyOnLoadFunctionNames.push("ChangeSPSavetoSubmit()");
function ChangeSPSavetoSubmit()
{
var inputs = document.getElementsByTagName("input");
for(i = 0; i<inputs.length; i++)
 {
    if(inputs[i].type == "button" && inputs[i].value == "Save")
     {
      inputs[i].value = "Submit";
     }
  }
 }
</script>

*edit2
Based off of the other code I tried

if(document.activeElement.value !== "Save" || document.activeElement.value !== "Submit"){
    window.addEventListener('beforeunload', function (e) {
        e.preventDefault();
        e.returnValue = "";
    })
}

but it still shows the pop-up and saves the form even when I click 'stay on this page'. From the code to change the button text I know that the value = "Save" initially before being changed to "Submit", so that should be registering the correct element, but the code runs regardless. I've tried flipping the if inside and outside the eventlistener != vs !==, var inputs = document.getElementsByTagName("input"); and inputs.value !== "Submit", and everything works the same.
I also tried

var clickedo = false
if(document.activeElement.value == "Save" || document.activeElement.value == "Submit"){
    clickedo = true
}
if(clickedo === false){
    window.addEventListener('beforeunload', function (e) {
        e.preventDefault();
        e.returnValue = "";
    })
}

with the same outcome. Do I need something other than element? Can I detect when an element has been clicked already?

*edit3
Talked with a friend about the on action idea and tried this

var inputs = document.getElementsByTagName("input");
for(i = 0; i<inputs.length; i++)
 {
    if(inputs[i].type == "button" && inputs[i].value == "Submit")
     {
      inputs[i].addEventListener('click', function (e) {window.onbeforeunload = null});
     }
  }
window.addEventListener('beforeunload', function (e) {
        e.preventDefault();
        e.returnValue = "";
    })

which of course still doesn't work.

Answer 1

Finally figured it out and it was simpler than expected, the line I needed was

document.getElementById(subb).addEventListener("click", function() { window.onbeforeunload = null});

using an event listener to get the specific button click that I don't want the pop-up for.

Full code;

var inputs = document.getElementsByTagName("input");
var subb;
for(i = 0; i<inputs.length; i++)
 {
    if(inputs[i].type == "button" && inputs[i].value == "Submit")
     {
      subb = inputs[i].id;
     }
  }
document.getElementById(subb).addEventListener("click", function() { window.onbeforeunload = null});
window.onbeforeunload = function() {
    return true;
};