Develop Reference

beforeunload is navigating to previously visited page instead of POST action url on form submit in Javascript

I have a page where I want to configure dates by selecting dates with date picker and add to dynamic table using javascript in same page.
I have multiple dates in the table but not saved or not clicked submit button yet but clicked on sub tab in same page to navigate to another page and a popup opened saying you have unsaved changes
Clicked on stay on same page and the added dates are present on the table and clicked on submit button.
Why instead of submitting the form, it redirects to previously visited tab(sub tab mentioned in step 2)?
Below code is to warn, if there is unsaved data:
var submitted = false;
$(document).ready(function() {
$('#addDates').click( function() {
submitted=true;
});
window.onbeforeunload = function () {
if (!submitted) {
return 'Do you really want to leave the page?';
} else {
window.onbeforeunload = null;
}
}
});

maybe try to overwrite the event with an empty function:
var submitted = false;
$(document).ready(function() {
$('#addDates').click( function() {
submitted=true;
});
window.onbeforeunload = function () {
if (!submitted) {
return 'Do you really want to leave the page?';
} else{
window.onbeforeunload = function() {};
}
}
});

How to detect button value change in JQuery?

I've a sign up form which has submit button with value "GET INSTANT ACCESS!" :
<input type="submit" class="wf-button" name="submit" value="GET INSTANT ACCESS!">
After submit, the value gets change to 'Thank You!':
<input type="button" class="wf-button" value="Thank You!">
I need to detect the button value. If it becomes "Thanks You!" then I have to show a popup. And this value gets change by some Ajax (GetResponse form). There is no page refresh.
I've tried below code but it is only working in FireFox & not working in Chrome.
<script>
$(function() {
$(".modalbox").fancybox();
});
$(function() {
$('.wf-button').bind("DOMSubtreeModified",function(){
//if btn valu is 'Thank You! trigger popup'
$(".modalbox").trigger('click');
});
});
</script>
Live URL: http://www.idynbiz.com/web/html/gold_ira_vf/? (just to show how the button changes its value)
Can some one help how can I detect the button value and show my popup? The button change its value in real time (Ajax). There is not page refresh.
Is there any JQuery approach with bind() Or on() function to detect the value?

$(function() {
$('.btn1').on('change', function() {
alert('Do stuff...');
});
$('.lnk1').on('click', function() {
$('.btn1').val('Thank you!');
$('.btn1').trigger('change');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="submit" class="btn1" value="SUBSCRIBE" />
Change button value

OK ,
when button is clicked and form is submitted for saving. just write these code
$(document).ready(function ()
{
$('.wf-button').click(function ()
{
var valueofbutton = $(this).attr('value');
if(valueofbutton == 'Thank You!')
{
window.open(); //// whatever you want to open in popup
}
});
});
i m sure that this will work

You can use the following function in javascript which gets called after any > kind of postback, i.e. synchronous or asynchronous.
function pageLoad()
{
if($(".wf-button").val()=="Thank You!")
{
// show your popup
}
}
Hope it works....

Javascript confirm box, if cancel is clicked, it will not reload the page

Is there away that the confirm box appeared, if i clicked "ok" it will go to another page and if i clicked "cancel" it will just stay and the current page will not reload again? THANK YOU.

function reload()
{
var r=confirm("Do you want to leave page!");
if (r)
{
//write redirection code
window.location = "http://www.yoururl.com";
}
else
{
//do nothing
}
}
call this function when you want to confirmation from user.........

You can use confirm() for this, which returns true on ok or false on cancel.
function myFunction(){
if(confirm("Would you like go to other page?")){
window.location = "http://yahoo.com";
}else{
alert('fine, if not want');
}
}
myFunction();
Updated
DEMO
UPDATED2
<button onclick="return logout()" >logout</button>
<script>
function logout(){
if(confirm("Would you like go to other page?")){
window.location = "failed.php";
}else{
//do your stuff on if press cancel
}
}
</script>

You may try doing
<script>
function myfunction(){
if(confirm("The confirm message")){
youDoTheThingsHere();
return false;
}else{
console.log("I cancelled the dialog!");
return false;
}
}
</script>
I'm not sure about your certain situation and the code that is involved when you call the confirm, but this has worked for me. The other option you may look at as a last resort is using something like a bootstrap modal to trigger a "confirm" modal. With the bootstrap modal you can then style it how you want... hope I could help!

Use "return None"
function myFunction(){
if (confirm("Confirm to reset your content!")){
location.reload();
}else{
return None;
}
}

If I don't press write button, I want to show an alert

I assign the element id "btn_submit" to write_ok button.
I wanted the following:
if I press write_ok button,
do write,
else (if I do not press write_ok button)
do alert message before page exit.
I don't know how can i find out which button was pressed.
I found this, but I cannot get it to work: jQuery: how to get which button was clicked upon form submission?
<script type="text/javascript">
$(window).bind('beforeunload', function(){
if ( #btn_submit was not pressed )
return 'If you exit the page, you may lose your changes';
});
</script>

You can do something like,
<script type="text/javascript">
var btn_submit_pressed = false;
$(window).bind('beforeunload', function(){
if ( btn_submit_pressed )
return 'If you want to exit page, you may lost your writing';
});
$('#btn_submit').click(function(){ btn_submit_pressed=true; });
</script>

You could introduce a variable:
var isSaved = true; // at the beginning there's nothing unsaved
Whenever the user updates something, set:
isSaved = false;
When the user clicks submit, set:
isSaved = true;
Then in beforeunload, just check:
if(!isSaved) {

Pawar's code is a big idea.
to compress and generize the code, #btn_submit changed to "input submit".
message in return is appear only IE not firefox, chrome.
<script type="text/javascript">
var btn_submit_pressed = true;
$(window).bind('beforeunload', function(){
if ( btn_submit_pressed )
return 'if you leave this page, chages will be lost.';
});
$('#btn_submit').click(function(){ btn_submit_pressed=false; });
</script>

Is there a way to check if a postback is in progress?

In the case that a button is clicked multiple times on a page - Is there a way to figure out using javascript/jquery that a postback is already in progress and cancels the new attempt to submit the page?
Thanks

You can avoid users from double clicking by disabling whatever form elements can cause a form submit.
Checkout http://greatwebguy.com/programming/dom/prevent-double-submit-with-jquery/ for an example.

You can disable the button on first click, so that you could not click it when the post is in progress, and re enable it when the post-back has finished.
<script type="text/javascript" language="JavaScript">
var submitted = false;
function SubmitTheForm() {
if(submitted == true) { return; }
document.myform.submit();
document.myform.mybutton.value = 'Thank You!';
document.myform.mybutton.disabled = true;
submitted = true;
}
</script>
<form method="post" action="#">
<input type="submit" onclick=return SubmitTheForm()>
</form>

you could always just disable the button in the onclick handler.
$('input[type="submit"]').click(function(e) {
e.preventDefault();
var self = this;
$(self).attr('disabled', 'disabled');
$.post('url',$(self).closest('form').serialize(), function() {
$(self).removeAttr('disabled'); // re-enable after request complete.
});
});

You could have your click event set a variable in your click handler to true and only allow the handler to proceed when the value is false. Of course you will have to set it to false again when your callback finishes.
if (!processInProgress) {
processInProgress = 1
// start the process
}