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

The isAuthenticated status of the consumer remains unchanged even after being modified by a function within the AuthContext

How to send a JavaScript variable to Flask and trigger an AJAX reload action

Add a fresh item into an array in Json between existing elements

Is there a way to eliminate unnecessary chunks from MUI in NextJS?

Tips for making an appended element match the height of an image

Able to retrieve individual elements from an array, but not able to loop through them

The "useState" React Hook is restricted from being used in a class component. To utilize React Hooks, they can only be invoked within a React function component or a custom React Hook function

Automatically closing the AppDateTimePicker modal in Vuexy theme after selecting a date

What is the best way to manage asynchronous data within AngularJS directives?

Pass the most recent properties to the mousemove event handler

Issue with specific route causing server to throw 500 error

Do Material-UI pickers only validate on blur, not on change events?

Once logged out in Vue Router, the main app template will briefly display along with the login component

Any number of elements in a single JSX code snippet

Can the client side version of expressjs routes be utilized?

Having trouble accurately obtaining the height of a DIV element using jQuery

What is the process for uploading an image with express-fileupload?

What could be the reason for the malfunctioning dropdown menu in my navigation bar upon clicking it?

Creating an alarm clock with customizable time and date formats using ReactJS with Material-UI integration

What is the best way to extract a single item from an array in Javascript and assign it to a different variable