Flag to Alert User to Save Data

[gillyr7]

Hello,

I was wondering if it was possible to create a flag to alert the user if they enter data, but try to leave before hitting the Update button.

I have multiple Details Datapages deployed on my website, and the user could theoretically navigate between pages, or exit out of the browser without pressing the update button.

Is it possible to alert them to save if they entered data but did not hit the button before moving pages?

[Volomeister]

Hi there!

I had encountered the same problem and here is a code I wrote for this:
 

<script>
if(typeof(dataPageReadyHandler) == 'undefined') {

const alertMessage = 'There are some unsaved changes. Are you sure you want to proceed?'
const HTMLSelectInputNavigation = document.querySelector('.cbFormNavigationDDown')
const HTMLNumberInputNavigation = document.querySelector('.cbFormJumpToTextField')
const onchangeFunction = document.querySelector('[id*=JumpToSelectBottom]').onchange;

const dataPageReadyHandler  = _=> {
   document.querySelector('[class*="cbFormSection"]').addEventListener('change', disableNavigation, true);
   document.removeEventListener('DataPageReady', dataPageReadyHandler)
}

const disableNavigation = _=> {
    if(document.querySelectorAll('a.cbFormNavigationLinks[data-cb-name]').length != 0) {
    document.querySelectorAll('.cbFormNavigationLinks').forEach( a => {
    a.parentElement.addEventListener('click', menuClickHandler, false)
    a.style = 'pointer-events: none;'})}
HTMLNumberInputNavigation.parentElement.addEventListener('click', numberInputNavigationClickHandler, true)
HTMLNumberInputNavigation.setAttribute('disabled', true)
HTMLSelectInputNavigation.addEventListener('click', selectNavigationInputClickHandler)
HTMLSelectInputNavigation.onchange = '';  
}

const selectNavigationInputClickHandler = e => {
let select = e.target;
let ifConfirmed = confirm(alertMessage);
console.log('ifConfirmed is '+ ifConfirmed)
 if(ifConfirmed) {
HTMLSelectInputNavigation.onchange = onchangeFunction
HTMLSelectInputNavigation.removeEventListener('click', selectNavigationInputClickHandler)
}
 else {
console.log('decided not to proceed')
}}

const numberInputNavigationClickHandler = e => {
let ifConfirmed = confirm(alertMessage);
console.log('ifConfirmed is '+ ifConfirmed)
 if(ifConfirmed) {
  let target;
  if(e.target.classList.contains('cbFormJumpToTextField')) {
    target = e.target;
  }
  else {
    target = e.target.querySelector('.cbFormJumpToTextField');
  }
  target.removeAttribute('disabled');
  target.focus()
  HTMLNumberInputNavigation.removeEventListener('click', numberInputNavigationClickHandler)
}
 else {
console.log('decided not to proceed')
}}

const goToDifferentPage = HTMLLiElement => {
  HTMLLiElement.querySelector('a').dispatchEvent(new Event('click')) 
}

const menuClickHandler = event => {
if(!event.target.classList.contains('cbFormNavigationDDown')) {
let ifConfirmed = confirm(alertMessage);
console.log('ifConfirmed is '+ ifConfirmed)
 if(ifConfirmed) {
goToDifferentPage(event.target)
}
 else {
console.log('decided not to proceed')
}
}}

document.addEventListener('DataPageReady', dataPageReadyHandler) 
}
</script>

You can change the alert message by substituting value of alertMessage variable. 

This solution is deployed on this datapage: https://c7eku786.caspio.com/dp/7f80b000b0721a19ecaa4fd0ae2d
 

Hope this helps

 

[Katie]

I'm not sure if you are paying attention to this thread, but if you are -- where did you put this code to make it work?

[cheonsa]

Hi,

This should be added in the Footer of the DataPage. Make sure to disable the HTML editor first before pasting the code.

https://howto.caspio.com/datapages/datapage-components/datapage-header-and-footer/