We Keep Coding

javascript handling confirm if user selects to not allow prompting

on my wordpress site i have a table with buttons in each row that make ajax calls. each button confirms with the user before taking any action. after clicking the button and confirming more than once there's a checkbox in the confirm window that the user can click to prevent the site from prompting them again to confirm.
when i select this check box the next button i click in the table doesn't work because i have some logic in my javascript that is checking if the confirmation was true or not. any ideas or techniques on how i can code around this? i would like for the user to confirm their choice at least once, but i'm ok with them selecting to not be prompted again.
var confirmMessage='Press Ok to mark complete.';
var x = confirm(confirmMessage);
if (x == true) {
$.post(my_ajax_obj.ajax_url, { //POST request
_ajax_nonce: my_ajax_obj.nonce, //nonce
action: "all_table_complete", //action
row_result_id: trid //data
}, function(data) { //callback
var retractTdSearchFor = "retract_button_" + trid;
this2.closest('td').innerHTML = data; //insert server response
document.getElementById(retractTdSearchFor).innerHTML = "Completed"; // should find ignore td with same result id
});
} // if (x == true)
else
{
// the user did not click ok.
}

Userscript for creating a confirmation popup whenever submitting an issue or posting a comment via pressing Ctrl+Enter(the built-in hotkey) in GitHub

Test URL: https://github.com/darkred/test/issues/new
GitHub allows in the issues area for a public repo:
submitting a new issue with just 1 character as title and no body, and
posting a comment with just 1 character .
The above happens to me quite a lot because the build-in hotkey for 'submiting an issue or comment' is Ctrl + Enter: I accidentally press that keyboard shortcut before my issue/comment text is ready.
So, I'm trying to make a script (using Greasemonkey) that would show a confirmation popup whenever I try to:
submit a new issue, or
post a comment
via pressing Ctrl + Enter:
if user presses Ok in the popup, then the script to allow the submit,
but if the user presses Cancel in the popup, then the script to stop the submit.
I've come across these two approaches:
After the helpful comment by Brock Adams I have the following code:
var targArea_1 = document.querySelector('#issue_body'); // New issue textarea
var targArea_2 = document.querySelector('#new_comment_field'); // New comment textarea
function manageKeyEvents (zEvent) {
if (zEvent.ctrlKey && zEvent.keyCode == 13) { // If Ctrl+Enter is pressed
if (confirm('Are you sure?') == false) { // If the user presses Cancel in the popup
zEvent.stopPropagation(); // then it stops propagation of the event
zEvent.preventDefault(); // and cancels/stops the submit submit action bound to Ctrl+Enter
}
}
}
if (targArea_1 !== null) {targArea_1.addEventListener('keydown', manageKeyEvents);}
if (targArea_2 !== null) {targArea_2.addEventListener('keydown', manageKeyEvents);}
Now the popup appears ok whenever I press Ctrl + Enter.
The problem is that the issue/comment is not submitted when pressing Ok in the popup (even if I haven't pressed Cancel in the popup before, at all). How to fix this?
And, how to re-allow the issue/comment submit after I have pressed Cancel in the popup once?
In other words: how to re-enable default after preventDefault() ?

Based on the help by user trespassersW here (I thank him a lot)
i.e. that my code was missing an else branch:
if (confirm('Are you sure?') == false) {
// ...
} else {
var btn = document.querySelector("#partial-new-comment-form-actions button");
if (btn) btn.click();
}
and that's because the confirm messagebox clears keyboard events queue.
(therefore the click 'Ok' action must be done by the script).
Here is a full working script:
// ==UserScript==
// #nameGitHub Confirm Create and Close issues
// #include https://github.com/*
// #grant none
// ==/UserScript==
(function () { // Self-Invoking function
function init() {
// For submitting issues in issue body textarea via Ctrl+Enter
var targArea1 = document.querySelector('#issue_body'); // New issue textarea
function manageKeyEvents1(zEvent) {
if (zEvent.ctrlKey && zEvent.keyCode === 13) {
if (confirm('Are you sure?') === false) {
zEvent.stopPropagation();
zEvent.preventDefault();
} else {
var btn1 = document.querySelector('.btn-primary');
if (btn1) {btn1.click();}
}
}
}
if (targArea1 !== null) { targArea1.addEventListener('keydown', manageKeyEvents1); }
// ------------------------------------------------------------------------------------------------
// For submitting issues in new comment textarea via Ctrl+Enter
var targArea2 = document.querySelector('#new_comment_field'); // New comment textarea
function manageKeyEvents2(zEvent) {
if (zEvent.ctrlKey && zEvent.keyCode === 13) {
if (confirm('Are you sure?') === false) {
zEvent.stopPropagation();
zEvent.preventDefault();
} else {
var btn2 = document.querySelector('#partial-new-comment-form-actions button');
if (btn2) {btn2.click();}
}
}
}
if (targArea2 !== null) { targArea2.addEventListener('keydown', manageKeyEvents2); }
}
// Page load
init();
// On pjax (because GitHub uses the History API)
document.addEventListener('pjax:end', init);
})();

How to hide keyboard after submitting a form that asks for confirmation

I am trying to get a form which asks for input and then asks the user to confirm it before proceeding. I am having an issue with iPhone 5 where the keyboard doesn't disappear after the user presses return, and the keyboard covers the confirmation window.
I've used the solution posted on another question (the solution is to blur the input) to get the keyboard to disappear on most pages. However, in this case, the "Confirm" dialogue shows up before the input is blurred, regardless of when I call the hideKeyboard function.
This is the code:
<form name="pay" method="POST" onsubmit="hideKeyboard(); return doSubmit('Are you sure you want to transfer', $('#amount'));" action="{{link_to_next_step}}">
var hideKeyboard = function() {
document.activeElement.blur();
$("input").blur();
};
function doSubmit(text1, text2, form) {
hideKeyboard();
$('input:text').each(function() {
var value = $(this).val();
$(this).val(value.replace(/\,/i, '.'));
});
if (isNaN(parseFloat($('input:text').val()))) {
document.getElementById('err_zero').style.display = 'block';
return false;
} else if (confirm(text1 + parseFloat($('input:text').val()).toFixed(2))) {
return true;
} else {
return false;
}
}
Any help is appreciated.
Edit: I've checked similar answers, and making the keyboard disappear is not the problem I'm having. The issue is that the code to deselect the input field only runs after the "Confirm" dialogue is resolved.

Cant Seem To use var twice in function

Okay heres my problem.. i am trying to make a button onclick in the function i have defined a variable but... i want to be able to click the button to a prompt type in a website in the prompt use window.location to go to which ever site... but when the user clicks ESC or cancel in a prompt its equal to (null or false). But when i click the cancel button it goes to null as if it was a href..
function goToSite() {
var done = prompt("Please Enter a Website You'd like to go to - Or click \"Cancel\" to go back to the main page.");
window.location = done;
}
if (done === null) {
window.location = "java_doc.htm";
}
<button onclick="goToSite()"></button>

You gotta make your conditional statement run before you change window.location, otherwise your address bar will point to null. Also, your function's closing brackets are in the wrong place, and you are closing your function before it actually does its thing.
function goToSite(){
var done = prompt("Please Enter a Website You'd like to go to - Or click \"Cancel\" to go back to the main page.");
if(done === null){
window.location = "java_doc.htm";
} else {
window.location = done;
}
}

You can do the following:
function goToSite() {
var done = prompt("Please Enter a Website You'd like to go to - Or click \"Cancel\" to go back to the main page.");
window.location = (done === null) ? "java_doc.htm" : done;
}
To take it one step further you can validate if the user actually entered a valid url.
function validUrl(textval) {
var urlregex = /^(https?|ftp):\/\/([a-zA-Z0-9.-]+(:[a-zA-Z0-9.&%$-]+)*#)*((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9][0-9]?)(\.(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9]?[0-9])){3}|([a-zA-Z0-9-]+\.)*[a-zA-Z0-9-]+\.(com|edu|gov|int|mil|net|org|biz|arpa|info|name|pro|aero|coop|museum|[a-zA-Z]{2}))(:[0-9]+)*(\/($|[a-zA-Z0-9.,?'\\+&%$#=~_-]+))*$/;
return urlregex.test(textval);
}
function goToSite() {
var done = prompt("Please Enter a Website You'd like to go to - Or click \"Cancel\" to go back to the main page.");
window.location = (done === null || !validUrl(done)) ? "java_doc.htm" : done;
}
This makes sure that only if user entered a valid url, they will be taken to that url. Otherwise they will be redirected to your default page.

Alert with multiple options

Just wondering, is it possible to create an alert with multiple options?
Like for example, in Facebook, when you try to close the tab/window when you have not finished typing your message, an alert with the options "Leave this page" and "Stay on this page" will pop up.

Example with form, you'are looking for window.onbeforeunload:
<script type="text/javascript">
var originalFormContent
var checkForChanges = true;
jQuery(document).ready(function () {
originalFormContent = jQuery('#myForm input[type=text]').serialize() + jQuery('#myForm select').serialize();
});
function onClose() {
if (checkForChanges && originalFormContent != "undefined") {
var content = jQuery('#myForm input[type=text]').serialize() + jQuery('#myForm select').serialize();
if (content != originalFormContent) {
return confirm('You have unsaved changes. Click OK if you wish to continue ,click Cancel to return to your form.');
}
}
}
window.onbeforeunload = onClose();

You're referring to window.onbeforeunload:
Best way to detect when a user leaves a web page?
You can also use the window.confirm() function for OK/Cancel options:
http://jsfiddle.net/UFw4k/1
Other than that, you'd have to implement a custom modal alert, such as jQuery Dialog.

Please have a look at http://jqueryui.com/dialog/#default
Copied this from a previous answer: JavaScript alert with 3 buttons