Disable "Changes you made may not be saved" pop-up window

Question

I use the following frontend code to export a .csv document.

HTML

  <form id="tool-export" method="post" action="export/">{% csrf_token %}
    <a id="export-link" class="btn btn-sm btn-primary" href="#">DOWNLOAD</a>
  </form>

JS

  $('#export-link').click(function(e) {
    e.preventDefault();
    var link = $(this);
    var form = link.closest('form');

    var project_id = proj_id.find(":selected").val();
    var input = $('<input>').attr('type', 'hidden').attr('name', 'project_id').val(project_id);
    form.append($(input));

    var project_type = proj_type.val();
    input = $('<input>').attr('type', 'hidden').attr('name', 'project_type').val(project_type);
    form.append($(input));

    form.submit();
  });

Export works well and I get the correct document. But also I receive the Changes you made may not be saved message after clicking on the export link. How to disable this message? I don't want to see it.

change your `` tag to a button or input tag without the href — Kevin Kloet, Nov 04 '16 at 14:56
which framework/plugins you use? The alert you see is created using the `beforeunload` event. To disable it you should unbind that event... — Dekel, Nov 04 '16 at 14:59
Hmm, I'm not sure why this alert appears but maybe if you `return false` after call `form.submit()` it will be works well. — Dominik Krzywiecki, Nov 04 '16 at 15:00
@Dekel, you are right. Post your answer and I will sign it as the solution. — srgbnd, Nov 04 '16 at 15:21
@trex, glad I could help you with this one. Sorry I missed your comment. You are welcome to find some of my other answers and vote a few of them if you like to :) — Dekel, Nov 05 '16 at 00:35

srgbnd · Accepted Answer · 2016-11-05T13:45:27.263

39

@Dekel helped me to get it.

The message is the beforeunload event. And I can disable it with window.onbeforeunload = null;.

JS

  $('#export-link').click(function(e) {
    window.onbeforeunload = null;
    e.preventDefault();
    var link = $(this);
    var form = link.closest('form');

    var project_id = proj_id.find(":selected").val();
    var input = $('<input>').attr('type', 'hidden').attr('name', 'project_id').val(project_id);
    form.append($(input));

    var project_type = proj_type.val();
    input = $('<input>').attr('type', 'hidden').attr('name', 'project_type').val(project_type);
    form.append($(input));

    form.submit();
  });

edited Nov 05 '16 at 13:45

answered Nov 04 '16 at 15:20

srgbnd

5,404
9
44
80

3

**window.onbeforeunload = null;** working in chrome and IE but in Firefox still getting the popup. – Nagarjuna Reddy Mar 16 '18 at 06:49
How to implement this in drupal? – Justme Oct 25 '18 at 10:38
According to MDN specs for `beforeunload`: _The HTML specification states that calls to window.alert(), window.confirm(), and window.prompt() methods may be ignored during this event. See the HTML specification for more details._ @NNR also from MDN: _However note that not all browsers support this method, and some instead require the event handler to implement one of two legacy methods:_ read more [here](https://developer.mozilla.org/en-US/docs/Web/API/Window/beforeunload_event) – davidhartman00 Aug 14 '19 at 22:22
@srgbnd If we have custom requirement on onbeforeunload and if we make it null, it works on button click. But what about if we want to call onbeforeunload logic on browser cross button, then how will that work? – Shivani May 13 '20 at 08:51
Is there an addon for this, which will allow me to block it for all/specific websites? – android developer Jun 12 '20 at 08:31
this solution not working if document contains an iframe – Muhammed Moussa Aug 26 '20 at 14:18
not working for me, I'm trying it on `document.ready()` – mehmood khan Oct 09 '20 at 05:30

Neha Jaggi · Answer 2 · 2020-09-16T13:08:32.857

10

In jQuery simply use :

$(window).off('beforeunload');

edited Sep 16 '20 at 13:08

answered Sep 14 '20 at 12:01

Neha Jaggi

191
2
7

score 3 · Answer 3 · answered Apr 05 '22 at 06:50

3

I had the same problem.

 window.onbeforeunload = function () {
     // Your Code here 
      return null;  // return null to avoid pop up
    }

answered Apr 05 '22 at 06:50

Santosh P

125
1
3

1

Not possible in Chromium since ~2016 https://stackoverflow.com/a/37782307/1454622 . – Andrew E Nov 19 '22 at 00:50

score 1 · Answer 4 · answered Jul 21 '20 at 10:50

I've had the same error with embedding Google-Form in Chrome,

I can verify that none of the found solutions helped me. Here is the screenshot of my pop-up:

The only solution I've managed to implement was hiding the element and then unhiding/creating the new iframe with the current embed. Here's the part of my code:

       if (oldvalue !== value) { // checks the id of the form (value) is not the same
         // set value of the id
         $('#info').text(value); 
         // check the element exists
         let exists = value;
         if($("#" + value).length == 0) {
           //it doesn't exist
           exists = false;
         }
         // hide all child elements of the div for forms
         parent.children().hide();
         // create new node if needed
         if (!exists)
         {
           // create new form element and embed the form
           $("#google-form").clone().attr("id",value).attr('src', record.url).appendTo(parent);
         }
         // unhide error element
         $("#" + value).show();
       }

The full code of my solution is here.

The above solutions stopped working probably because they just simply stopped developers from controlling the browser behaviour dur to safety concerns. — Meow, Jun 09 '23 at 05:54

Disable "Changes you made may not be saved" pop-up window

4 Answers4

Linked