Easy steps to prevent window.onbeforeunload from triggering when submitting a form using Vue

Question

Easy steps to prevent window.onbeforeunload from triggering when submitting a form using Vue

Presently, I am utilizing a component named countdowntimer.vue, specifically designed as a countdown timer for an online examination platform. My goal is to implement an onbeforeunload event on the window object while ensuring that the timer automatically submits upon completion without being disrupted by the window event itself. Despite my attempts to integrate this code within the vuejs component, it fails to respond as desired; either hindering the submission process with interruptions or failing to function altogether, allowing any event to navigate away from the page without constraint.

Below is the code snippet depicting the countdown timer:

<template>
    <div>
        <div v-if="finished" v-text="expiredText"></div>

        <div v-else>
            <span>{{ remaining.minutes }} Minutes, </span>
            <span>{{ remaining.seconds }} Seconds</span>
            left...
        </div>
    </div>
</template>

....

Despite various trials of setting the method as a computed property and employing different if statements as watchers, the method does not yield the expected outcomes as previously mentioned.

The blade template in which the code is implemented is presented below:

@extends('layouts.app')

@section('content')
   ...
    </div>
@endsection

.....

Upon observation, there appears to be a script tag located outside of the @endsection block. It has been discerned that this placement fails to establish a connection with elements from the blade template. Attempts were made to access the form object similarly done in the vue component. However, this resulted in a null or undefined response - rendering it impossible to attach an event listener. Interestingly, executing the same logic within the browser console produced the anticipated results. The assigned onsubmit="" event intended for the form failed to reach the underlying script tags, leading to an unaltered value in the submitForm variable. Moreover, manually clicking the submit button succeeded in triggering the function clicked(). Under these circumstances, confusion ensues regarding the feasibility of achieving the desired outcome solely through vue. Additionally, the nonfunctional nature of the onsubmit="" event raises uncertainties. Moving the script tags inside the @section could potentially prompt errors from vue. Hence, any recommendations or insights on resolving these issues would be greatly appreciated.

javascript laravel vue.js vuejs2

Answer 1

Answer №1

To begin with, ensure that you pass a method reference to beforeunload, not the result of calling that method. Remove the ():

created () {
    this.refreshEverySecond();
    document.addEventListener('beforeunload', this.redirect); // not this.redirect()
},

A simple solution to toggle the handler on and off is to use a flag:

data () {
    return {
        limiter: this.until * 10000
        preventSubmit: true
    };
},

In your methods, update or utilize that flag accordingly:

methods: {
    // ...
    timeUp() {
        this.preventSubmit = false; // ALLOW redirect now

        const form = document.querySelector('[data-form-submit]');
        const radios = document.querySelectorAll('input[type=radio]');
        radios.forEach(radio => radio.style.display = 'none');
        form.submit(function(e) {
            console.log(e);
        });
    },
    redirect () {
        if (this.preventSubmit) {
           // implement steps to prevent submit
        }
    }
},

Another Approach

Alternatively, you can remove the listener:

created () {
    this.refreshEverySecond();
    document.addEventListener('beforeunload', this.redirect); // not this.redirect()
},

And in your methods:

methods: {
    // ...
    timeUp() {
        document.removeEventListener('beforeunload', this.redirect);
        // ...

I believe using the flag alternative is more reliable.

Proper Handling of beforeunload

As per feedback, here's a demo showcasing how it could function.

You can view the JSFiddle DEMO here or see the demonstration below.

new Vue({
  el: '#app',
  data: {
    preventSubmit : true
  },
  mounted () {
    window.addEventListener("beforeunload", this.redirect);
},
  methods: {
  redirect(event) {
    if (this.preventSubmit) {
      var confirmationMessage = "\o/";
      event.returnValue = confirmationMessage;  
      return confirmationMessage;
      }
    }
  }
})

<script src="https://unpkg.com/vue"></script>

<div id="app">
  <p>preventSubmit ? {{ preventSubmit  }}</p>
  <button @click="preventSubmit = !preventSubmit ">Toggle preventSubmit </button>
</div>
<br>
<a href="/somewhere-else">click to try to navigate away</a>

Answer 2

To begin with, ensure that you pass a method reference to beforeunload, not the result of calling that method. Remove the ():

created () {
    this.refreshEverySecond();
    document.addEventListener('beforeunload', this.redirect); // not this.redirect()
},

A simple solution to toggle the handler on and off is to use a flag:

data () {
    return {
        limiter: this.until * 10000
        preventSubmit: true
    };
},

In your methods, update or utilize that flag accordingly:

methods: {
    // ...
    timeUp() {
        this.preventSubmit = false; // ALLOW redirect now

        const form = document.querySelector('[data-form-submit]');
        const radios = document.querySelectorAll('input[type=radio]');
        radios.forEach(radio => radio.style.display = 'none');
        form.submit(function(e) {
            console.log(e);
        });
    },
    redirect () {
        if (this.preventSubmit) {
           // implement steps to prevent submit
        }
    }
},

Another Approach

Alternatively, you can remove the listener:

created () {
    this.refreshEverySecond();
    document.addEventListener('beforeunload', this.redirect); // not this.redirect()
},

And in your methods:

methods: {
    // ...
    timeUp() {
        document.removeEventListener('beforeunload', this.redirect);
        // ...

I believe using the flag alternative is more reliable.

Proper Handling of beforeunload

As per feedback, here's a demo showcasing how it could function.

You can view the JSFiddle DEMO here or see the demonstration below.

new Vue({
  el: '#app',
  data: {
    preventSubmit : true
  },
  mounted () {
    window.addEventListener("beforeunload", this.redirect);
},
  methods: {
  redirect(event) {
    if (this.preventSubmit) {
      var confirmationMessage = "\o/";
      event.returnValue = confirmationMessage;  
      return confirmationMessage;
      }
    }
  }
})

<script src="https://unpkg.com/vue"></script>

<div id="app">
  <p>preventSubmit ? {{ preventSubmit  }}</p>
  <button @click="preventSubmit = !preventSubmit ">Toggle preventSubmit </button>
</div>
<br>
<a href="/somewhere-else">click to try to navigate away</a>

Easy steps to prevent window.onbeforeunload from triggering when submitting a form using Vue

Answer №1

Another Approach

Proper Handling of beforeunload

Similar questions

Is there a way to adjust the height pixel value in my code so it can be dynamic?

Unusual scroll bar movements when using jQuery validation

The code encountered an error with message TS2345 stating that the argument type '(a: Test, b: Test) => boolean | 1' cannot be assigned to a parameter type of '(a: Test, b: Test) => number'

What is the best practice for preloading route data before navigating to the route?

When setting up a new nodejs/express project, I encountered an issue where the fresh installation would fail

What is the process for submitting a form on consecutive URLs?

Leveraging Multiple MongoDB Databases in Meteor.js

Is it possible to extract data from a table by adjusting Javascript in the inspector tool? The page is only showing today's data, but I'm interested in retrieving historical data by going back

Changing the way users are linked in a post using HTML tags (VUE-NODE)

The output from the Compute function is not showing up in the TextBox as expected

A guide on incorporating a JavaScript plugin using Vue.use() into a TypeScript project equipped with typings

What is the process for linking read-only methods to Redux object instances?

What could be preventing me from successfully calling the JavaScript AJAX function in this particular situation?

What is the reason objects cannot be compared in JavaScript?

React Router's default component for nested routes

Protractor is able to achieve successful test results without actually executing the tests

Tips for organizing and concealing images within a Div for seamless transitions (no need for floats)

Issue: The specific module is unable to be located, specifically on the Heroku platform

restrict the maximum character count in regex

Error message: Attempting to access the 'load' property of a null value