I have some simple code to display a confirm dialog box when the user tries to leave my form:
window.onbeforeunload = askConfirm;
function askConfirm(){
return "Your answers will be lost.";
}
But this is a multi-page form and they frequently press back to change some values on a previous page.
But when they do this dialog box still comes up.
Is there a way around this?
The answer I would suggest unfortunately doesn't actually answer your question but is a solution of a kind. The only possible solution here, imv, is to make sure that a user clicking the back button doesn't actually create an issue by storing the form answers from all pages. In the case of PHP I would store them in a session ($_SESSION). You have to recognise that users use the back button more than any other UI element within a browser. If your form truly has to be across a number of pages then you need to make sure the data they have entered is persistent across all these pages. I would actually provide a navigation for this within your own interface. Provide a clear sequential process visually and allow instant navigation through this process where possible.
I don't see a way to specifically detect whether the user pressed "back" or any other browser button. This is outside the site's scope.
Only one solution comes to mind: Show the confirmation dialog only when a global flag has been set to "true".
if (ask_when_exiting == true)
return "Your answers will be lost.";
You would have to set the variable to true? in the onclick event of every link that you want the confirmation to pop up for. You should be able to mass apply this event to every link on your page using JQuery or another JS framework (Seomthing like $$('a').each()....).
However, this will disable the confirmation for reloading the page, or any other event that is not triggered using a control on the page like typing in another URL or closing the browser, as well.
Related
I'm working on a web app that takes the user through multiple forms with simple interface of a 'back' button, form, 'save' button and a 'next' button.
Clicking 'save' only calculates a number from given answers and sends it to localStorage.
When I then click 'next', it opens the next html file I prepared, constructed the same way, just with a different form. The problem is that if I press 'back', the form on the first page is empty, but when I use the browser's 'back' button, it's all there. How do I get this result with my 'back' and 'next' buttons? I'd like the user to be able to browse their answers as well as see a certain form already completed if they encounter it on a different path (there are various paths through 3 to 5 of 11 forms created, depending on what the user wants to calculate).
I understand it's opening the html file every time I click an 'a href', but I don't know how to change it. I tried searching for html form reloading prevention etc. but it doesn't seem to yield any answers. I'm not sure I know how to formulate my problem in a simple enough way.
Best simple solution would pretty much be what "Manolo" suggested.
Put all the forms you need in one HTML doc
Set all the form's style to "display: none" except the first
Create a simple JS function that changes the "display" style accordingly and attach it with the "onclick" attribute to your buttons.
Sorry for the lack of code. Typed this on mobile and hoped it would be straight forward enough. Hope this helped.
Load the forms as you need them using javascript to request them to your server. Use fetch api.
Other solution is to add all the forms to one page and hidde them all from the user. When the user click next you hide firstForm and show secondForm.
You can use History_API of DOM to manipulate the history
let stateObj = { foo: "bar" }
history.pushState(stateObj, "page 2", "bar.html")
And can catch thee event of back and next button of navigator with
WindowEventHandlers
Like the title suggests, I have an overlay modal window on one of my websites. It fires every time a user clicks on a specific button. Am I able to somehow trigger that specfic button automatically once per user/ip so I can display that modal at least once for everyone, even if they don't click it? It's a good way to increase social-media fans and I noticed many websites are using this method. Is there any script that simply does that? I will provide code if necessarly although I don't see how it can help since this is more like a general matter.
Okay, looks like you want two things...
to trigger the modal to show regardless of whether the user clicks or not
window.load(function () {
//execute your modal popup here.
});
Note: You'll need JQuery for this.
to limit the window to only appearing once per user.
If your users are using a login, I'd suggest creating a new table for promos, possibly named, 'UserPromos' and create a bit field for this modal like, 'modalshown' and set it to false '0', for all users. Then, merely send that value to your page in a hidden input field, access that value from JS and if that value is '0' then show the modal with your script above and if it's '1' then don't.
Your server side code would update the value for the UserPromos.modalshown for that user in the db.
If your users are just visitors to the site, then you must use a JS cookie.
I have a few divs on a form that are hidden by default (style="display:none;"). When the user clicks a certain radio button, an onclick event executes and exposes the divs. The user is then taken to a review page upon form submit that shows him any errors. If there are any, he clicks the BACK button on his browser to go back to the form and correct them. Caching is enabled so that all of his form contents are there. The problem is, since the form is looking for an onclick event, all of the previously exposed divs are hidden again. Is there any way to make sure they stay exposed when the user clicks back to the form from the review page? I thought a document.ready function would do it, but no joy.
As Yair mentioned, you can use cookies. It cannot be done with pure JS. However, you can also use PHP.
Before the user is transferred to the second page, have JS scan the divs in question, and find which ones are visible. (I'm assuming they all have individual IDs). Store these IDs in a comma-delimited string, or array, and send it as a _POST or _GET to the new page.
Have PHP store it as a hidden value somewhere. You could use a hidden input, or a data-x on something ... as long as it's there.
Have JS on that page that watches for the back click, stops it, and then redirects the user to the previous page, and sends the string or array back to it. Have PHP on that page print it as a JS value, and have JS on pageload show all divs with matching IDs.
Cookies or localStorage if you aim for only modern browsers:
localStorage
Is there any way to make sure they stay exposed when the user clicks
back to the form from the review page? I thought a document.ready
function would do it, but no joy.
You can use cookies in order to manage state in a web-browser. Cookies will help you save the desired user's state.
All javascript code is reinitialized on browser reload. You cannot identify whether the user comes back through the browser.
You can use cookies or local storage to save a value when initial display happens and show/hide the div later on document.ready.
My app has a use case where there is a page where the user can edit data and press save or interrupt editing and make a search or click links. The framework is kind of odd and uses javascript to submit a form for every link that is clicked so we ended up with a mishmash of javascript and java hacks the facilitate the dialogs and checks for unsaved data which became messy and I had to ask about it:
How to exclude components from javascript onkeydown
https://stackoverflow.com/questions/12525020/why-does-this-code-create-a-loop
I either got dialogs that never ended, pressing "yes" to "You have unsaved data. Do you want to comtinue?" made a loop to another same dialog and when I tried to fix it nothing works.
Now the program works on the screen but the solution is messy and if there is another bug or we notice that my solution affect other component there will be trouble.
So I'm asking if you know a plain Java way to check for unsaved session data? What happens is a form is presented to the user and clicking a link when data has been edited should present a dialog thatwarns that data is unsaved. I think doing it without javascript is a better solution, can you comment and/or help me here?
No.
The user enters data in their browser; there is no way for the server to know this unless you submit it.
I am using a jQuery Notification on my project.
When i close the browser , i am using the onbeforeunload and showing a confirm box to the user.
However the client is not satisfied with the default message box ,
is it technically possible to show my Notification instead of the default one.
jQuery notification comes with a question Do you want to close ? and with two buttons YES and No.
When user clicked YES it will return true ,else False
any way to achieve ? or some comments/opinion ?
Please help me .
Thank you.
Update :
window.onbeforeunload = ShowModel;
function ShowModel()
{
return show_pop_up();
}
show_pop_up()
{
return TRUE or FALSE ;
}
is it technically possible to show my Notification instead of the default one.
No. You can specify the text of the message. You cannot control the buttons, you cannot control the appearance, and you cannot replace the UI with one built from scratch out of HTML/CSS/JS.
There are very strong limitations over what you can do while the user is trying to leave the page. Browsers are designed to protect users from sites that attempt to trap them (You are trying to leave the site? NO! You are not allowed to leave until you have looked at more adverts for porn and you given us your credit card details!).
It is possible to show your notification instead the default. Try this:
$(window).on('beforeunload', function() {
return 'Do you really want to close this window? Some your text...';
});
But it's true, you can't limit user's actions with browser's window.
Technically its not possible to override the default UI.
There are two kind of page leave events can occur.
One is to navigate within the same website by clicking the links. For this kind of page unload, you could be able to write the onclick for all the menu links to show the warning message as you wish with the UI styles. But when you click links, you MUST stop the call for the beforeunload event.
The second one is to navigate outside the website using the browser buttons/address bars. Here you can't override the default UI.
The best example is Facebook. When you type the status and before submit, if you try to navigate within FB, you'll be getting a nice UI warning message. But when you close the window, you'll get the default one.
Hope this helps.