Dirty form check - beforeunload confirmation not working - javascript

I am attempting to simply capture when my form is dirty and if it has been changed, alert the user before they leave the page without saving.
Here is my current code:
<script>
var form = $('#MyForm'),
originalForm = form.serialize()
$(window).bind('beforeunload', function () {
if (form.serialize() != originalForm) {
return 'You have unsaved changes';
}
});
</script>
Nothing happens above. I can use beforeunload method just fine until I attempt to add the "dirty" field check, then nothing occurs.
Any help?

Related

alerting users before they leave page if they filled some fields

I want to use two javascript events: onbeforeunload and inside it I need to use onhashchange. The point is on leaving the page if user has filled some fields then the confirmation message appear warning user whether they want to stay on page or leave.
My code is following
window.onbeforeunload = function (e) {
window.onhashchange = function (r) { return ''; }
};
But the above code does not seem to be working? what am I doing wrong?
[Updated]
Again, what I am trying to achieve is I want to alert a user if the leave the page and if they have filled some fields on the page
You can try
window.onbeforeunload = function (e) {
if (content on page changed) { confirm("Do you want to leave page?") }
};
window.onhashchange = function (r) { if (content on page changed) { confirm("Do you want to leave page?") } }
I have just given pseudo code, you can replace with actual code.
Basic mistake is you are trying to bind event onhashchange in onbeforeunload.

Confirm alert when leaving page if form is filled

I need help. I want to display confirm alert if user leave page and if form is filled or at least some of the fields on form are filled. I have following code that is functioning in Chrome but not working in Firefox. Also the alert is displayed even when the form fields are empty.
Following is my code,
$(window).bind('beforeunload', function () {
return ''; //Are you sure you want to leave?';
});
So I need help so I can produce alert in Firefox, and all other browsers when form is completely or partially filled but not produce any alert when form is empty. I tried making use of viewstate. Checking if viewstate value is different then produce alert, but it's not working as I expected
another piece of code I tried is
window.onbeforeunload = function (e) {
var message = "Your confirmation message goes here.",
e = e || window.event;
// For IE and Firefox
if (e) {
e.returnValue = message;
}
// For Safari
return message;
};
But the above code does not check if form is filled or not. I want alert when form is partially or completely filled
I didnt test this but here is a quick shot at it:
$(window).bind('beforeunload', function () {
$('input').each(function () {
if(this.value.length > 0){
alert('you entered data');
return false;
}
});
});
This should work, just give a try.It will take care of empty spaces also.
$( window ).unload(function() {
if(!$.trim(this.value).length) {
alert('Fill Data')
}
});

How to capture when a user is leaving ASP.Net page unexpectedly

I need to prompt a user when they are leaving my ASP.Net page unexpectedly with a message to ask if they are sure they want to leave. A post back or when the save button is clicked should not fire the warning. There are a bunch of articles covering this but I am brand new to this and appear to have got my wires crossed.
The recommended way appears to be to use the window.onbeforeunload event but behaves unexpectedly for me. This is fired when the page loads as opposed to when the page unloads.
<script language="JavaScript" type="text/javascript">
window.onbeforeunload = confirmExit;
function confirmExit() {
return "You have attempted to leave this page. If you have made any changes to the fields without clicking the Save button, your changes will be lost. Are you sure you want to exit this page?";
}
</script>
If I use the JQuery implementation it fires when the page unloads but the problem is it fires before the code behind is executed. So I cannot set a variable on the client saying don’t fire the event this time as it is a post back or a Save.
$(window).bind('beforeunload', function () {
return 'Are you sure you want to leave?';
});
Can anyone point me in the correct direction as I know I am making basic mistakes/miss-understanding?
Edit:
So I am nearly there:
var prompt = true;
$('a').live('click', function () {
//if click does not require a prompt set to false
prompt = false;
});
$(window).bind("beforeunload", function () {
if (prompt) {
//reset our prompt variable
prompt = false;
//prompt
return true;
}
})
Except the problem is in the above code I need to be able to differentiate between the clicks but I haven't been able to figure that out yet i.e. I am missing a condition here "//if click does not require a prompt set to false".
Any ideas?
Thanks,
Michael
You can try using this:
$(window).unload(function(){
alert('Message');
});
In case people are interested this is the roundabout solution to my problem. How to tell if a page unload in ASP is a PostBack

How to check for dirty flag

I was wondering what is the best way of checking if a page is dirty if a user chooses to navigate it from it. For example, there is a registration form and the user enters all his information. Then accidentally clicks on a link to navigate from it.
I found this on the web where it checks if a page is dirty if a person makes changes to any of the form input values.
<script type="text/javascript">
var isDirty = false;
var msg = 'You haven\'t saved your changes.';
$(document).ready(function(){
$(':input').change(function(){
if(!isDirty){
isDirty = true;
}
});
window.onbeforeunload = function(){
if(isDirty){
return msg;
}
};
});
</script>
So this works great. But how do I exclude some links that are pop-ups? Is there a better way of doing this?
You should add onclick event listener on these inputs and "return false;"
Something like
$('a.className="popup"').onclick = function(){return false};
or
Text

Firefox submitting form even in the case of alerts

We have a requirement that if a user clicks on any link, he should not be able to click on any other link.to achieve this, we have written a java script with incrementing counter.In case , if a user has already clicked on any link we are showing a alert box with some message.On IE its working fine, In Firefox , I am getting the alert for second click but firefox does not stop the processing of first request and refreshes the page even if alert box is untouched.
We are submitting the forms through explicit java scripts.
Hi All PFB the snippets
<script>
var counter = 0;
function incrementCount(){
if(counter>0){
alert('Your request already in progress. Please wait.');
return false;
}else{
counter=counter+1;
return true;
}
}
</script>
Form submission script:
<script>
function fnTest() {
if(incrementCount()){
document.FormName.method = "POST";
document.FormName.action = "SomeURL";
document.FormName.submit();
}else{
return false;
}
}
</script>
Link through which we are submitting the form
<span>Test</span>
Your question is unclear. If a user clicks on a submit button he should not be able to click a link? You'll need to post your code.
With regards to the form post my guess is you didn't return false onsubmit
"On IE its working fine, In Firefox ,
I am getting the alert for second
click but firefox does not stop the
processing of first request and
refreshes the page even if alert box
is untouched"
Well, what's wrong. Firefox is submitting the first request as you want and it shows an alert on the second click. How is IE different? Is FF doing a double submit?
PS: You dont really need to use a counter. Use this code :
var handlers = {
alert : function(){
alert('Your request is already in progress. Please wait.')
return false
},
submitForm : function(){
this.onclick = handlers.alert //this refers to the a tag
document.FormName.submit()
}
}
document.getElementById('mysubmitlink').onclick = handlers.submitForm
And on your link becomes:
`<span>Test</span>`
You can allways return false on your onsubmit call.

Categories

Resources