Jump to content

Flag to Alert User to Save Data


Recommended Posts

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?

Link to comment
Share on other sites

  • 2 years later...

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

 

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...