combine checkbox alert function with detect function - javascript

the goal here is to detect if a user is checking out on my site and then prompt them with a special alert if they uncheck a box.
how do i combine to two functions to do this?
the detect function so far is this
var pathArray = window.location.pathname.split('/');
if (pathArray.length >= 3) {
if (pathArray[1].toLowerCase() == "commerce") {
var page = pathArray[2].toLowerCase();
if (page.indexOf("show-cart") == 0) {
console.log("Detected the cart page."); // This works
} else if (page.indexOf("checkout") == 0) {
console.log("Detected the checkout page."); // Does not work (no injection)
} else if (page.indexOf("order-confirmed") == 0) {
console.log("Detected the order confirmation page."); // Does not work (no injection)
}
}
}
and the checkbox alert function is this:
function validate() {
var checkoutHistory = document.getElementById('shipToBilling');
if (checkoutHistory.checked) {
} else {
alert("You have elected to turn off checkout history.");
}
}
window.addEventListener("load", validate, false);

Your onclick function can call both your functions

Related

DOM not being manipulated from inside a function that is being triggered properly

I have written this function to validate that all form fields and check boxes in a form are filled out. The script automatically disables the submit button and then watches for the moment at which it can be re-enabled. My debugger statements are landing me in all of the proper places, but for some reason, the DOM element is not being updated. I'm sure I am just making a stupid mistake, but can't seem to find a solution. Thank you in advance for any help!
Specifically looking at this section:
if (status === 'enable') {
btn.removeAttr('disabled');
btn.removeClass('disabled');
} else {
btn.prop('disabled', true);
btn.addClass('disabled');
}
Here is the whole script below.
$(document).ready(function() {
validateInput();
$('.validate').keyup(function(event){
validateInput();
});
$('[type=checkbox]').click(function(event){
validateInput();
});
function validateInput() {
var valid = 0;
var checkBox = $('[type=checkbox]');
var inputFields = $('input.validate');
var inputLength = inputFields.length + checkBox.length;
inputFields.each(function() {
if($(this).val() !== '') {
valid++ ;
}
});
checkBox.each(function() {
if($(this).prop('checked')) {
valid++ ;
}
});
if(valid === inputLength) {
updateBtnStatus('enable')
} else {
updateBtnStatus('disable')
}
}
function updateBtnStatus(status) {
var btn = $('input[type="submit"]');
if (status === 'enable') {
btn.removeAttr('disabled');
btn.removeClass('disabled');
} else {
btn.prop('disabled', true);
btn.addClass('disabled');
}
}
});

Prevent Javascript confirm() on Checkbox State Change

I have a checkbox (which uses the Bootstrap Switch library to act as an on/off toggle) to activate and deactivate users with the help of AJAX.
When a user unchecks the box this function is fired:
$('.user-status-ckbx').on('switchChange.bootstrapSwitch'...
The confirm() dialog pops up asking the user if he's sure he wants to de/activate the user. If the user clicks 'NO', the button is sent back to its original state using:
$("#" + e.currentTarget.id).bootstrapSwitch('toggleState');
The problem I am having is that each time the toggleState() runs, the switchChange.bootstrapSwitch also runs again. This sents up a non-ending confirm() message which only goes away if the user confirms the message.
Is there an efficient way to prevent the switchChange.bootstrapSwitch method from running based on a real user click vs. a programmatically-generated toggle?
I've already tried:
e.originalEvent !== undefined
and
e.which
as suggested in other similar questions, but none of those work, nor do they even appear in the 'e' object...
<script>
$(".user-status-ckbx").bootstrapSwitch('size', 'mini');
$(".user-status-ckbx").bootstrapSwitch('onText', 'I');
$(".user-status-ckbx").bootstrapSwitch('offText', 'O');
//ajax to activate/deactivate user
$('.user-status-ckbx').on('switchChange.bootstrapSwitch', function(e){
var currentDiv = $("#" + e.currentTarget.id).bootstrapSwitch('state');
if( currentDiv == false){
var confirmed = confirm("Are you sure you wish to deactivate this user? They will no longer be able to access any forms.");
if(confirmed == true){
changeActivationStatus($(this).val());
} else {
$("#" + e.currentTarget.id).bootstrapSwitch('toggleState');
}
} else {
var confirmed = confirm("Are you sure you wish to activate this user? Deactivated users which were previously active will have the same permissions prior to their de-activation unless changed manually.");
if(confirmed == true){
changeActivationStatus($(this).val());
} else {
$("#" + e.currentTarget.id).bootstrapSwitch('toggleState');
}
}
});
function changeActivationStatus(userId){
$.post("{{ path('isactive') }}", {userId: userId})
.done(function(data){
console.log("Finished updating " + userId);
})
.fail(function(){
console.log("User could not be updated");
});
};
</script>
There's a way to prevent the event when switching programmatically.
You have to add options to the Bootstrap switches:
var options = {
onSwitchChange: function (event, state) {
// Return false to prevent the toggle from switching.
return false;
}
};
$(".user-status-ckbx").bootstrapSwitch(options);
And when programmatically switching the button, you'll have to add a second argument:
$("#" + e.currentTarget.id).bootstrapSwitch('toggleState', true);
JSFiddle: https://jsfiddle.net/Ravvy/npz8j3pb/
$(".uid-toggle").change(function (event) {
var option = confirm('Are you sure, you want to change status?');
console.log(`$(this).prop('checked')`);
if (option) {
} else {
if ($(this).prop('checked')) {
$(this).prop('checked', !$(this).prop('checked'));
$(this).parent().removeClass('btn-primary off');
$(this).parent().addClass('btn-danger off');
} else {
$(this).prop('checked', !$(this).prop('checked'));
$(this).parent().addClass('btn-primary off');
$(this).parent().removeClass('btn-danger off');
}
}
});

Alert Box with specific functionality

I am getting a JS Alert-box When I am leaving my tabs 1st time.
But would like to get it as windows alert - any idea on basis of my code.
Also that should have a OK and Cancel Button - Ok > Next Tab
Cancel> Same tab
$(document).ready(function () {
B.initB();
var 3firstTimeMsg = true;
var 4FirstTimeMsg = true;
$(".3a-tab").click(function(){
if(3firstTimeMsg == true)
{
alert("If you leave this page, any information you've entered will be lost.");
3firstTimeMsg = false;
}
});
$(".3b-tab").click(function(){
if(4FirstTimeMsg == true)
{
alert("If you leave this page, any information you've entered will be lost.");
4FirstTimeMsg = false;
}
});
});
That would probably be a confirm box:
if(3firstTimeMsg == true) {
3firstTimeMsg = confirm("If you leave this page, any information you've entered will be lost.");
}
FIDDLE

Javascript seems not working to load image when page loads

I'm using Javascript to make my checkboxes larger. Doing this I use image one for black checkbox and another one with the checked checkbox. It works like the real checkbox. However, when the page loads, the black checkboxes are not successfully loaded unless I click somewhere in the page to invoke them. Please check here to the page.
Belowing is my js code which I think it will impact this:
var Custom = {
init: function() {
var inputs = document.getElementsByTagName("input"), span = Array(), textnode, option, active;
for(a = 0; a < inputs.length; a++) {
if((inputs[a].type == "checkbox" || inputs[a].type == "radio") && inputs[a].className == "styled") {
span[a] = document.createElement("span");
span[a].className = inputs[a].type;
if(inputs[a].checked == true) {
if(inputs[a].type == "checkbox") {
span[a].style.background = unchecked;
} else {
span[a].style.background = unchecked;
}
}
inputs[a].parentNode.insertBefore(span[a], inputs[a]);
inputs[a].onchange = Custom.clear;
if(!inputs[a].getAttribute("disabled")) {
span[a].onmousedown = Custom.pushed;
span[a].onmouseup = Custom.check;
} else {
span[a].className = span[a].className += " disabled";
}
}
}
}
Below is my image on form load:
And this is my page when clicking on anywhere:
Which other functions and variables are already defined. Thus could anyone help me to enable them to display whenever the form loads?
I don't known why you use that
if(inputs[a].checked == true) {
if(inputs[a].type == "checkbox") {
span[a].style.background = unchecked;
} else {
span[a].style.background = unchecked;
}
}
But when I open your script in http://checkintonight.freeiz.com/js/custom-form-elements.js
Try to call function clear() in end of Custom.init(), it works
init: function() {
//
...
//
this.clear();
}
Sorry for my bad English
Eventually, I found a bug in my Javascript code. I add the else statement in the init() function to test if the checkbox is also not checked. So the code becomes like below:
if(inputs[a].checked == true) {
if(inputs[a].type == "checkbox") {
span[a].style.background = unchecked;
}
} else {
span[a].style.background = unchecked;
}
Then it works! Thanks everyone that reviewed and answered to my question.

Javascript onbeforeunload close browser window

I have this tiny script for now that checks if any change is made on the form. If there is a change
then I set a flag to 'Y'. I call this function on onBeforeunload="changeConfirm()" places in the body tag. I know
I can't stop the user from closing down the window, but how do I make this scenario work where he made a change
-> decide to close the window -> Script alerted him -> User clicks cancel (Now I need to bring him back to the screen
instead of closing browser.
<script type="text/javascript">
var Flag= "";
function changeConfirm(){
if(Flag == 'Y')
{
var confirmStatus = confirm('Changes made. Dont want to save?');
}
else {
alert("No changes were made " + Flag);
}
}
</script>
Try this :
function confirmChanges() {
if(Flag == 'Y')
{
if(confirm('Changes made. Dont want to save?')){
return false;
}else{
return true;
}
}
else {
alert("No changes were made " + Flag);
}
}
It should be like this:
window.onbeforeunload = function() {
if ( Flag == 'Y' ) {
return "Changes made. Don't want to save?";
}
}

Categories