We Keep Coding

Updating Global Counter Variable on Submit Button Click in jQuery

I'm trying to update a global counter variable in JavaScript when a button of type="submit" is clicked.
My submit button is defined like below:
<button
id="submitClicked"
type="submit"
value="Add &amp View Next"
>
I am using the following code in JavaScript to update a global variable I've called orderCounter that increments each time the "Add & View Next" button is clicked:
var orderCounter;
window.onload = function () {
document
.getElementById("submitClicked")
.onclick=incrementCounter;
};
function incrementCounter() {
if (orderCounter == null) {
orderCounter = 0;
} else {
orderCounter = orderCounter + 1;
}
alert(orderCounter);
return orderCounter;
}
The alert with this code always displays 0. Can anyone see where I'm going wrong?
Note: I've also tried using jquery .click on the submitClicked id in addition to using onClick within the HTML form.
I realize this should be simple; not sure where I'm going wrong.
Thank you!

the problem is that every time you click on the submit button your page refreshes, so the orderCounter varriable resets itself. one solution is to persistently wait so that its value is not reinitialized each time the page is loaded. One solution is to use kookies: https://www.w3schools.com/js/js_cookies.asp.
i hope this will welp you

The fix was to run function postValues() "onClick" of button type=submit and use session variables, following the same logic as in this post: Auto Increment in Session using Javascript is not working
I clear the sessionStorage variables in another file.
Working code:
function postValues() {
if(sessionStorage.getItem("count") == null){
counter=sessionStorage.setItem("count", 1);
counters = 1;
} else {
counters= parseInt(sessionStorage.getItem("count"));
counters++;
counter=sessionStorage.setItem("count", counters);
}
alert(counters);
document.getElementById("counter").value = counter;
}

Captcha/JQuery - Click simulation only works once

Hello fellow stack overflowers. I'm using JQuery to simulate a click on an invisible button that's linked with reCaptcha. Multiple buttons need to be attached to reCaptcha and you can only have one reCaptcha in each page. So, I created a callback function that detects which button is pressed. Here is how I did that:
HTML:
<div class="invisible">
<button class="g-recaptcha"
data-sitekey="..."
data-callback="captcha_callback"
data-badge="inline"
data-type="image"
id="btn_captcha"></button>
</div>
Click event + click simulation:
$("#review_send").on("click", function() {
alert("HI");
$("#btn_captcha").data("button-pressed", "review");
$("#btn_captcha").click();
$("#btn_captcha").blur();
});
reCaptcha callback:
var captcha_callback = function(response) {
if($("#btn_captcha").data("button-pressed") === "mail") {
alert($("#btn_captcha").data("button-pressed"));
send_contact_mail(response);
} else if($("#btn_captcha").data("button-pressed") === "review") {
alert($("#btn_captcha").data("button-pressed"));
send_review(response);
}
};
What happens is; when I click #review_send for the first time everything works: It first alerts "HI" and then "review".. But when I press #review_send a second time I only get the alert with "HI".
I have discovered that the click works again after waiting a while.
Is this something JQuery/Javascript related, has it something to do with reCaptcha or does reCaptcha have a timeout?
Thanks in advance!

Soo, I made this workaround because I thought that you can't have multiple recaptcha on the same page. However, I figured out that there is a way to have multiple of them.
You can render reCaptcha's and reset them (both with javascript):
var widget1 = grecaptcha.render("divID", {
siteKey: "...",
type: 'image',
callback: function(response) {
send_review(response);
}
});
Reset:
grecaptcha.reset(widget1);
I only have to check which button I pressed to render in the correct div and/or reset the correct reCaptcha.

Qualtrics: Pressing enter key to emulate continue button

I'm very new to JavaScript, and I'm currently trying to add a custom code to my Qualtrics survey that makes it so pressing the enter key continues the survey. I have a code that should be working; however, I'm getting an "Unexpected token )" error.
Here is the code:
Qualtrics.SurveyEngine.addOnload(function()
{
document.addEventListener("keydown", function(e) {
if (e.keyCode === 13) {
function(){
that.clickNextButton();
}
}
}
});
the "clickNextButton" function was found in the Qualtrics API document and is supposed to emulate the next button click. The function is clickNextButton(), but the example provided has the code as that.clickNextButton().
The example they use is below:
//Hides the next button and displays the question
//for 5 seconds before moving to the next page
this.hideNextButton();
var that = this;
(function(){that.clickNextButton();}).delay(5);
I don't need the hiding button function or the delay, but just wanted to include an example of how it is used.
Any help is much appreciated, thanks in advance!

Here is a simplified version that works (updated to hide NextButton):
Qualtrics.SurveyEngine.addOnload(function() {
$('NextButton').hide();
document.on("keydown", function(e) {
if (e.keyCode === 13) $('NextButton').click();
});
});

It depends on the scope, or specifically where the function clickNextButton resides.
If you don't bother with the timeout you should be able to just remove the word 'that' from your Qualtrics.SurveyEngine function and it should work fine.
It's possible the function is not available in your current scope. So if removing 'that' doesn't work. Put it back in and put var that = this; in the line before your function call. It's far from a tidy way to do things at all but it may fix things for you.
Worth reading this.
http://www.w3schools.com/js/js_scope.asp
Didn't Meatloaf say something like... I'd do anything for scope.... but I don't do THAT?

As said in my comment...See if it solves your error
Qualtrics.SurveyEngine.addOnload(function()
{
document.addEventListener("keydown", function(e) {
if (e.keyCode === 13) {
function(){
that.clickNextButton();
}
}
} ); // here was a missing bracket here
});

So I have a video embedded in a question and I needed to disable to Next button for 15 seconds in that way I would know that autoplay video was watched.
And this worked for me so well:
Qualtrics.SurveyEngine.addOnload(function()
{
//Hides the next button and displays the question
//for 15 seconds before moving to the next page
this.disableNextButton();
var that = this;
(function(){that.enableNextButton();}).delay(15);
});
You can change the (15) seconds to any number, the Next Button will be activated and ready to be clicked next, but not automatically send you to next page.

How to show the "Are you sure you want to navigate away from this page?" when changes committed?

Here in stackoverflow, if you started to make changes then you attempt to navigate away from the page, a javascript confirm button shows up and asks: "Are you sure you want to navigate away from this page?" blee blah bloo...
Has anyone implemented this before, how do I track that changes were committed?
I believe I could do this myself, I am trying to learn the good practices from you the experts.
I tried the following but still doesn't work:
<html>
<body>
<p>Close the page to trigger the onunload event.</p>
<script type="text/javascript">
var changes = false;
window.onbeforeunload = function() {
if (changes)
{
var message = "Are you sure you want to navigate away from this page?\n\nYou have started writing or editing a post.\n\nPress OK to continue or Cancel to stay on the current page.";
if (confirm(message)) return true;
else return false;
}
}
</script>
<input type='text' onchange='changes=true;'> </input>
</body>
</html>
Can anyone post an example?

Update (2017)
Modern browsers now consider displaying a custom message to be a security hazard and it has therefore been removed from all of them. Browsers now only display generic messages. Since we no longer have to worry about setting the message, it is as simple as:
// Enable navigation prompt
window.onbeforeunload = function() {
return true;
};
// Remove navigation prompt
window.onbeforeunload = null;
Read below for legacy browser support.
Update (2013)
The orginal answer is suitable for IE6-8 and FX1-3.5 (which is what we were targeting back in 2009 when it was written), but is rather out of date now and won't work in most current browsers - I've left it below for reference.
The window.onbeforeunload is not treated consistently by all browsers. It should be a function reference and not a string (as the original answer stated) but that will work in older browsers because the check for most of them appears to be whether anything is assigned to onbeforeunload (including a function that returns null).
You set window.onbeforeunload to a function reference, but in older browsers you have to set the returnValue of the event instead of just returning a string:
var confirmOnPageExit = function (e)
{
// If we haven't been passed the event get the window.event
e = e || window.event;
var message = 'Any text will block the navigation and display a prompt';
// For IE6-8 and Firefox prior to version 4
if (e)
{
e.returnValue = message;
}
// For Chrome, Safari, IE8+ and Opera 12+
return message;
};
You can't have that confirmOnPageExit do the check and return null if you want the user to continue without the message. You still need to remove the event to reliably turn it on and off:
// Turn it on - assign the function that returns the string
window.onbeforeunload = confirmOnPageExit;
// Turn it off - remove the function entirely
window.onbeforeunload = null;
Original answer (worked in 2009)
To turn it on:
window.onbeforeunload = "Are you sure you want to leave?";
To turn it off:
window.onbeforeunload = null;
Bear in mind that this isn't a normal event - you can't bind to it in the standard way.
To check for values? That depends on your validation framework.
In jQuery this could be something like (very basic example):
$('input').change(function() {
if( $(this).val() != "" )
window.onbeforeunload = "Are you sure you want to leave?";
});

The onbeforeunload Microsoft-ism is the closest thing we have to a standard solution, but be aware that browser support is uneven; e.g. for Opera it only works in version 12 and later (still in beta as of this writing).
Also, for maximum compatibility, you need to do more than simply return a string, as explained on the Mozilla Developer Network.
Example: Define the following two functions for enabling/disabling the navigation prompt (cf. the MDN example):
function enableBeforeUnload() {
window.onbeforeunload = function (e) {
return "Discard changes?";
};
}
function disableBeforeUnload() {
window.onbeforeunload = null;
}
Then define a form like this:
<form method="POST" action="" onsubmit="disableBeforeUnload();">
<textarea name="text"
onchange="enableBeforeUnload();"
onkeyup="enableBeforeUnload();">
</textarea>
<button type="submit">Save</button>
</form>
This way, the user will only be warned about navigating away if he has changed the text area, and will not be prompted when he's actually submitting the form.

To make this work in Chrome and Safari, you would have to do it like this
window.onbeforeunload = function(e) {
return "Sure you want to leave?";
};
Reference: https://developer.mozilla.org/en/DOM/window.onbeforeunload

With JQuery this stuff is pretty easy to do. Since you can bind to sets.
Its NOT enough to do the onbeforeunload, you want to only trigger the navigate away if someone started editing stuff.

jquerys 'beforeunload' worked great for me
$(window).bind('beforeunload', function(){
if( $('input').val() !== '' ){
return "It looks like you have input you haven't submitted."
}
});

This is an easy way to present the message if any data is input into the form, and not to show the message if the form is submitted:
$(function () {
$("input, textarea, select").on("input change", function() {
window.onbeforeunload = window.onbeforeunload || function (e) {
return "You have unsaved changes. Do you want to leave this page and lose your changes?";
};
});
$("form").on("submit", function() {
window.onbeforeunload = null;
});
})

To expand on Keith's already amazing answer:
Custom warning messages
To allow custom warning messages, you can wrap it in a function like this:
function preventNavigation(message) {
var confirmOnPageExit = function (e) {
// If we haven't been passed the event get the window.event
e = e || window.event;
// For IE6-8 and Firefox prior to version 4
if (e)
{
e.returnValue = message;
}
// For Chrome, Safari, IE8+ and Opera 12+
return message;
};
window.onbeforeunload = confirmOnPageExit;
}
Then just call that function with your custom message:
preventNavigation("Baby, please don't go!!!");
Enabling navigation again
To re-enable navigation, all you need to do is set window.onbeforeunload to null. Here it is, wrapped in a neat little function that can be called anywhere:
function enableNavigation() {
window.onbeforeunload = null;
}
Using jQuery to bind this to form elements
If using jQuery, this can easily be bound to all of the elements of a form like this:
$("#yourForm :input").change(function() {
preventNavigation("You have not saved the form. Any \
changes will be lost if you leave this page.");
});
Then to allow the form to be submitted:
$("#yourForm").on("submit", function(event) {
enableNavigation();
});
Dynamically-modified forms:
preventNavigation() and enableNavigation() can be bound to any other functions as needed, such as dynamically modifying a form, or clicking on a button that sends an AJAX request. I did this by adding a hidden input element to the form:
<input id="dummy_input" type="hidden" />
Then any time I want to prevent the user from navigating away, I trigger the change on that input to make sure that preventNavigation() gets executed:
function somethingThatModifiesAFormDynamically() {
// Do something that modifies a form
// ...
$("#dummy_input").trigger("change");
// ...
}

The standard states that prompting can be controlled by canceling the beforeunload event or setting the return value to a non-null value. It also states that authors should use Event.preventDefault() instead of returnValue, and the message shown to the user is not customizable.
As of 69.0.3497.92, Chrome has not met the standard. However, there is a bug report filed, and a review is in progress. Chrome requires returnValue to be set by reference to the event object, not the value returned by the handler.
It is the author's responsibility to track whether changes have been made; it can be done with a variable or by ensuring the event is only handled when necessary.
window.addEventListener('beforeunload', function (e) {
// Cancel the event as stated by the standard.
e.preventDefault();
// Chrome requires returnValue to be set.
e.returnValue = '';
});
window.location = 'about:blank';

When the user starts making changes to the form, a boolean flag will be set. If the user then tries to navigate away from the page, you check that flag in the window.onunload event. If the flag is set, you show the message by returning it as a string. Returning the message as a string will popup a confirmation dialog containing your message.
If you are using ajax to commit the changes, you can set the flag to false after the changes have been committed (i.e. in the ajax success event).

Here try this it works 100%
<html>
<body>
<script>
var warning = true;
window.onbeforeunload = function() {
if (warning) {
return "You have made changes on this page that you have not yet confirmed. If you navigate away from this page you will lose your unsaved changes";
}
}
$('form').submit(function() {
window.onbeforeunload = null;
});
</script>
</body>
</html>

You can add an onchange event on the textarea (or any other fields) that set a variable in JS. When the user attempts to close the page (window.onunload) you check the value of that variable and show the alert accordingly.

Based on all the answers on this thread, I wrote the following code and it worked for me.
If you have only some input/textarea tags which requires an onunload event to be checked, you can assign HTML5 data-attributes as data-onunload="true"
for eg.
<input type="text" data-onunload="true" />
<textarea data-onunload="true"></textarea>
and the Javascript (jQuery) can look like this :
$(document).ready(function(){
window.onbeforeunload = function(e) {
var returnFlag = false;
$('textarea, input').each(function(){
if($(this).attr('data-onunload') == 'true' && $(this).val() != '')
returnFlag = true;
});
if(returnFlag)
return "Sure you want to leave?";
};
});

here is my html
<!DOCTYPE HMTL>
<meta charset="UTF-8">
<html>
<head>
<title>Home</title>
<script type="text/javascript" src="script.js"></script>
</head>
<body onload="myFunction()">
<h1 id="belong">
Welcome To My Home
</h1>
<p>
<a id="replaceME" onclick="myFunction2(event)" href="https://www.ccis.edu">I am a student at Columbia College of Missouri.</a>
</p>
</body>
And so this is how I did something similar in javaScript
var myGlobalNameHolder ="";
function myFunction(){
var myString = prompt("Enter a name", "Name Goes Here");
myGlobalNameHolder = myString;
if (myString != null) {
document.getElementById("replaceME").innerHTML =
"Hello " + myString + ". Welcome to my site";
document.getElementById("belong").innerHTML =
"A place you belong";
}
}
// create a function to pass our event too
function myFunction2(event) {
// variable to make our event short and sweet
var x=window.onbeforeunload;
// logic to make the confirm and alert boxes
if (confirm("Are you sure you want to leave my page?") == true) {
x = alert("Thank you " + myGlobalNameHolder + " for visiting!");
}
}

From the WebAPIs->WindowEventHandler->onbeforeunload, it recommends use window.addEventListener() and the beforeunload event, instead of onbeforeunload.
Syntax example
window.addEventListener("beforeunload", function(event) { ... });
window.onbeforeunload = function(event) { ... };
Note: The HTML specification states that authors should use the Event.preventDefault() method instead of using Event.returnValue to prompt the user.
So, in terms of your case, the code should look like this:
//javascript
window..addEventListener("beforeunload", function(event) {
//your code
// If you prevent default behaviour in Mozilla Firefox prompt will always be shown
e.preventDefault();
// Chrome requires returnValue to be set
e.returnValue = '';
})

It can be easily done by setting a ChangeFlag to true, on onChange event of TextArea. Use javascript to show confirm dialog box based on the ChangeFlag value. Discard the form and navigate to requested page if confirm returns true, else do-nothing.

What you want to use is the onunload event in JavaScript.
Here is an example: http://www.w3schools.com/jsref/event_onunload.asp

There is an "onunload" parameter for the body tag you can call javascript functions from there. If it returns false it prevents navigating away.

Javascript: How to temporarily disable all actions on the page?

On a page with Ajax event, I want to disable all actions until the Ajax call returns (to prevent issues with double-submit etc.)
I tried this by prepending return false; to the current onclick events when "locking" the page, and removing this later on when "unlocking" the page. However, the actions are not active any more after they are "unlocked" -- you just can't trigger them.
Why is this not working? See example page below. Any other idea to achieve my goal?
Example code:
both the link and the button are showing a JS alert; when pressing lock, then unlock the event handler is the same as it was before, but doesn't work...?!?
The code is meant to work with Trinidad in the end, but should work outside as well.
<html><head><title>Test</title>
<script type="text/javascript">
function lockPage()
{
document.body.style.cursor = 'wait';
lockElements(document.getElementsByTagName("a"));
lockElements(document.getElementsByTagName("input"));
if (typeof TrPage != "undefined")
{
TrPage.getInstance().getRequestQueue().addStateChangeListener(unlockPage);
}
}
function lockElements(el)
{
for (var i=0; i<el.length; i++)
{
el[i].style.cursor = 'wait';
if (el[i].onclick)
{
var newEvent = 'return false;' + el[i].onclick;
alert(el[i].onclick + "\n\nlock -->\n\n" + newEvent);
el[i].onclick = newEvent;
}
}
}
function unlockPage(state)
{
if (typeof TrRequestQueue == "undefined" || state == TrRequestQueue.STATE_READY)
{
//alert("unlocking for state: " + state);
document.body.style.cursor = 'auto';
unlockElements(document.getElementsByTagName("a"));
unlockElements(document.getElementsByTagName("input"));
}
}
function unlockElements(el)
{
for (var i=0; i<el.length; i++)
{
el[i].style.cursor = 'auto';
if (el[i].onclick && el[i].onclick.search(/^return false;/)==0)
{
var newEvent = el[i].onclick.substring(13);
alert(el[i].onclick + "\n\nunlock -->\n\n" + newEvent);
el[i].onclick = newEvent;
}
}
}
</script>
<style type="text/css">
</style>
</head>
<body>
<h1>Page lock/unlock test</h1>
<p>Use these actions to lock or unlock active elements on the page:
lock,
unlock.</p>
<p>And now some elements:</p>
<a onclick="alert('This is the action!');return false;" href="#">link action</a>
<input type="button" value="button action" onclick="alert('This is another action!')"/>
</body>
</html>
Thanks guys for your ideas and answers.
Now I see that I have mixed up Strings and functions, which obviously can't work ;(
I should have made clear that we use some Web FW and tag libraries (Trinidad) which create the event handling (and Ajax) code, hence I can't edit that directly or use synchronous Ajax etc.
Moreover, Ajax is only one scenario where this code should be executed. It's purpose is to prevent the user to double-submit a page/action, which is also relevant for non-Ajax pages where you could kind of doulbe-click on a button. I know that this is not really safe, and it's only meant to be a "convenience" thingy to avoid getting the navigation error page too often (we have server-side protection, of course).
So, will try the div overlay, probably.
Thanks again,
Christoph.

How about setting up a global var
actions_disabled = 0
increment when the AJAX call starts then decrement when it finishes. All your "action" handlers can then start with
if (actions_disabled) return false;
Much simpler than debugging self-modifying code!
Alternatively, to lock your controls you could set:
control.disabled="disabled"
which will have the bonus of greying them out, making it obvious to the user that they can't submit. To unlock, simply set:
control.disabled=""
NEW IDEA BASED ON COMMENTS (can't quote code in comments, it appears ...):
You can always just hang extra attributes off Javascript objects:
To lock, you could:
control.onclick_old = control.onclick
control.onclick = "return false;"
To unlock, you could:
control.onclick = control.onclick_old

I once achieved this goal by creating a DIV that covered the area I wanted disabled, setting its z-index higher than any of the other elements on the page, and then setting its opacity to 0. By default, this DIV was hidden by display: none, so that it wouldn't interfere with anything. However, when I wanted the area disabled, I just set its display to block.
Steve

AJAX. Asynchronous. Just make the HTTP request synchronous. Problem solved.

The problem with your code is a result of not coming to grips with types in javascript.
When you say:
var newEvent = 'return false;' + el[i].onclick
what this does is coerce el[i].onclick (which is a function) to a string, then concatenates it to the string 'return false;'. Then when you reassign it as so:
el[i].onclick = newEvent;
onclick which was previously a function is now a string.
Then you attempt to resurrect your old function from the string by taking a substring:
var newEvent = el[i].onclick.substring(13);
which is fine, except newEvent is still a string! So when you assign it back to onclick again, you are assigning the string representation of the original function, not the function itself.
You could use eval to evaluate the string and return the function, but please don't do that. There are a number of better ways to do this, as has been suggested by other commenters.
I would also question why you wish to use AJAX at all if you don't want to allow asynchronous requests.

Put lockPage() at top of activete() function, and unlockPage() at bottom of deactivate().
activate: function() {
function lockPage()
{
lockElements(document.getElementsByTagName("a"));
lockElements(document.getElementsByTagName("input"));
lockElements(document.getElementsByTagName("button"));
};
function lockElements(el)
{
for (var i=0; i<el.length; i++)
{
el[i].style.pointerEvents="none";
}
};
lockPage();
// ...
},
deactivate: function() {
// ...
function unlockPage() {
unlockElements(document.getElementsByTagName("a"));
unlockElements(document.getElementsByTagName("input"));
unlockElements(document.getElementsByTagName("button"));
};
function unlockElements(el)
{
for (var i=0; i<el.length; i++)
{
el[i].style.pointerEvents="auto";
}
};
unlockPage();
},

Using a div overlay does not prevent a user from tab-ing into your page. Usually that is OK, since most users do not tab through a page anyhow.
If you use any keyboard shortcuts on your page, they will still be available, so separate handling will be needed for those.
Alse, I assume that clicking an element that can have focus (eg. an <a> tag), then pressing enter, would still cause a double submit.