We Keep Coding

Narrow Down BeforeUnload To Only Fire If Field Is Changed or Updated

I am trying to figure out how to limit the beforeunload command on my form. I have been able to figure out how to unbind the beforeunload command and then when I go to navigate away from the form this works. However, the unload happens every time regardless of whether or not the form was changed. I'm trying to figure out how to get the beforeunload to only fire if the form was actually updated or changed. If the user clicks the back button on the browser, the beforeunload does not fire. This is perfect. However, if the user clicks on a link on the "form" it pops up the beforeunload prompt. Is this as designed? Perhaps I should be approaching this differently? I'm a newbie..so I'm open to suggestions.
I have read through the MDN link that explains beforeunload...https://developer.mozilla.org/en-US/docs/Web/Events/beforeunload
and can't seem to figure out how to narrow down the beforeunload to only if a field on the form has been changed.
$('form').submit(function() {
$(window).unbind('beforeunload');
});
$(window).on('beforeunload',function(){
return '';
});
I am trying to figure out how to alter the code above so that the beforeunload only fires if a field on my form changes when the user goes to navigate away from this page. It's confusing for the user if there is a pop up asking if they want to navigate away from the page if nothing has been clicked or changed.

Something like this.
We check out simple form and only prompt user if there is a value.
Added variable set when submitting, this allows us to bypass our onunload tests.
var submitting = false;
window.addEventListener("beforeunload", function (event) {
console.log('checking form');
let inputValue = document.querySelector('#myInput').value;
if(inputValue.length > 0 && submitting === false) {
console.log(inputValue);
event.returnValue = 'Are you sure you wish to leave?';
}
event.preventDefault();
});
document.addEventListener("submit", function(event) {
submitting = true;
});
<form submit="somewhere.htm">
<input id="myInput" type="text" />
<input type="submit" value="Submit">
</form>
Test navigate away

jQuery: Confirmation dialog before leaving a page while in editing mode

I try to appear a message when the user edit some field and try to go to another page or click close to the page
message appear
This page is asking you to confirm that you want to leave - data you have entered may not be saved.
I use this code :
$('#form').data('serialize',$('#form').serialize());
// On load save form current state
$(window).bind('beforeunload', function(e){
if($('#form').serialize()!=$('#form').data('serialize'))return true;
else e=null;
// i.e; if form state change show box not.
});
This code works only when the user try to edit something if not I can close the page and thats what I want.
The problem is that the message appear also when I submit the form
When I try to click the button submit the message appear also
This page is asking you to confirm that you want to leave - data you have entered may not be saved.
How to prevent to show that message when I click the submit button ??!!

Save the listener in a variable and remove it on submit
const onBeforeUnloadListener function(e){
if($('#form').serialize()!=$('#form').data('serialize'))return true;
else e=null;
// i.e; if form state change show box not.
}
$(window).bind('beforeunload', onBeforeUnloadListener);
$('#form').on('submit', function() {
$(window).unbind('beforeunload', onBeforeUnloadListener)
}

How do I add jQuery to a submit button which fires before Paypal objects?

I have a Paypal Digital Express form which works fine. However, I would like to add a bit of jQuery to the submit button which will fire -before- the Paypal popup window opens and can prevent the Paypal code from firing. Unfortunately, the Paypal window always open first.
jQuery('#buyLink').click( function(e) {
e.preventDefault();
// if no boxes are checked; no songs selected
if ( jQuery("#buysongs input:checkbox:checked").length == 0) {
alert('Please select at least one song!');
return false;
}
});
Is there a way to prioritise my code so that it fires -before- the Paypal code?
EDIT: I added e.preventDefault() per the first answer, but what that does is:
a) the popup window still opens but
b) the Paypal site is never reached.
Instead, it displays the calling page in the popup.
So... I want to prevent that Paypal popup window from opening. Perhaps I need to change the 'action' on the form and trigger that action from inside my jQuery? If so, how do I do this?

Look into the preventDefault() function:
jQuery('#buyLink').click( function(event) {
event.preventDefault();
if (jQuery("#buysongs input:checkbox:checked").length == 0) {
alert('Please select at least one song!');
return false;
}
else{
// submit form
}
});

Safari : Alert Message Not Closed when next alert Message Opens Using Jquery?

In Safari Browser having one issue, following are my scenarios (with Example).
When i Click a button for delete an account on that time i opens alert message. in that alert window having two actions "OK" and "Cancel". if i click Yes it will redirect to another URL.(This is No Problem). But When i click "Cancel", i triggering to open another alert window. on that time previous alert not getting closed.
In Other Browsers like I.E, Firefox, Chrome it working fine.
Below is my Coding....
$('#upgradeNo').click(function(){ // Function
$('#accountFrame').hide('fast'); // To close the alert window( First alert)
$.modal.close(); // To close the alert window( First alert)
if( $("#deleteconf").val()=="ok"){ // Click Yes Button Function
deleteAcc();
}else{ // Click Cancel Button Function
$("#accountFrame").css('display','none');
deactivateAccount(); // new Alert gets open in this place
}
$("#deleteconf").val('');
});
Can anybody give me a quick solution. Awaiting for Response.
Thanks

i Got a Solution. i put the code in Modal Window OnClose Event. after that i called alert box. Now its working Fine , what i Expecting.
onClose: function (dialog) {
dialog.container.fadeOut(100, function () {
dialog.overlay.fadeOut(200, function(){
$.modal.close();
if (deactivateFlag)
{
deactivateAccount();
}
});
});
}
Thanks

In a browser extension, how do I click a specific button of an alert?

So...
I need to click [Stay on this page] automatically in such a prompt:
Confirm navigation: [Leave this page] [Stay on this page]
The code that invokes this is
$(window).bind('beforeunload', function() {
return 'Leave page?';
//Click prompt code goes here.
$(window).unbind();
});
If I take away return 'Leave page?';
then the iframed page overrides the top frame and the user is struck with an unknown site, maybe there's another way to do this?

Actually that would hook into the onbeforeunload event:
$(window).bind('beforeunload', function() {
return 'Leave page?';
});

Instead of automatically clicking it, check if you can automatically disable window.onbeforeunload event handlers. That's most likely much easier than trying to send a click to a specific button in a modal window anyway.

I agree with Thiefmaster.
Alternative is to replace the alert, prompt or confirm if that is what is used:
window.confirm=function() {
// here you do what you want
}