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.

This pop-up occurs when I click to save my form
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.

So what exactly are you looking for? A way to customize the "Changes you made may not be saved" pop-up? Is this on an edit page? A list? — Matt, Dec 31 '18 at 11:37
What I want is to modify the code to not show the pop-up at all if a specific button (Save/Submit) is clicked. The code from the old thread seems to have done exactly that, created an exception for that specific action, but for whatever reason it doesn't work anymore and I can't find more info on their logic. This is on a form in a list, for both the create and edit views. — user10348094, Dec 31 '18 at 19:15

score 0 · Answer 1 · answered Jan 03 '19 at 14:18

0

The way I did it was to add a webpart to the form and included what you had but slightly modified:

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

This will get the value of the last button pushed. If it was the save button it will save the form, otherwise it will trigger as I believe wanted and prompt the alert. If this is not the desired outcome please let me know.

answered Jan 03 '19 at 14:18

Matt

1,062
1
8
11

I did a handful more tests with both your code and my original code. The pop-up still occurs when the Save/Submit button is clicked. Another thing I've found is that, even though the pop-up occurs and I click stay on page, the form still saves. There's also no difference whether the code is added as a web part or inserted in the JS part of DFFS. – user10348094 Jan 14 '19 at 22:29
What I would like to happen is that the form saves and navigates away without any pop-up if the Save/Submit button is clicked – user10348094 Jan 14 '19 at 22:30

score 0 · Accepted Answer · answered Jan 17 '19 at 22:56

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;
};

SHAREPOINT Prevent pop-up when clicking Submit

2 Answers2