Add a confirm bootstrap modal/dialog to checkbox - javascript

I have a form checkbox inside map. When unchecked I want the user to get a bootstrap confirm dialog to ask "are you sure you want to turn off switch?" before the handle command.
code:
command.onAdd = function (map) {
var div = L.DomUtil.create('div', 'command');
div.innerHTML = '<form><input id="command" checked="true" type="checkbox"/>switch</form>';
return div;
};
command.addTo(map);
document.getElementById("command").addEventListener("click", handleCommand, false);
function handleCommand() {
if(this.checked == true){
}
else
{
}
}

you can use bootbox.js as a convenient way to do this:
function handleCommand() {
var checkbox = $(this);
if (!checkbox.is(':checked')) {
bootbox.confirm("Are you sure?", function (result) {
if (result) {
// your code
} else {
checkbox.prop('checked', true);
}
});
}
}

Related

The submit button works only once

I developed a function that keeps the submit disabled until filling all the fields. The function works, but when I create two more users the submit button enables before filling the fields; my function works only once.
The button is working and the data is saved, but the submit button is enabled before filling the fields.
$(document).ready(function () {
$('#myForm input').keyup(function () {
var empty = false;
$('#myForm input').each(function () {
if ($(this).val().length == 0) {
empty = true;
}
});
if (empty) {
$('#btnsave').attr('disabled', 'disabled');
} else {
$('#btnsave').attr('disabled', false);
}
return empty;
});
});
i think you create new inputs dynamically, then try this:
$('#myForm').on('keyup', 'input', function () {
var empty = false;
$('#myForm input').each(function () {
if ($(this).val().length == 0) {
empty = true;
}
});
if (empty) {
$('#btnsave').attr('disabled', 'disabled');
} else {
$('#btnsave').attr('disabled', false);
}
return empty;
});
});

Changing required field dynamicly via JS in Contact Form 7

I need to write custom validated form in Wordpress. After the click on For-Author radio button some checkboxes group should be marked as not required. I tried to change "aria-required" attributes to "false" or remove and add class "wpcf7-validates-as-required" but it doesn't work. I also tried to reinit wpcf7 by
$('div.wpcf7 > form').wpcf7InitForm();
but it's also doesn't work.
This is a code sample:
$radio.button.click(function (event) {
isAuthor(event)
});
var isAuthor = function (event) {
if ($(event.target).attr('data-author') == 'true') {
authorClicked = true;
} else {
authorClicked = false;
}
fieldUpdate();
};
var fieldUpdate = function () {
var $text = $('[name=pres-title]');
if (authorClicked) {
$text.prop('disabled', false).attr('aria-required', true).addClass('wpcf7-validates-as-required').attr('aria-invalid', false)
$fieldRequired.each(function () {
$(this).prop('disabled', false).attr('aria-required', true).addClass('wpcf7-validates-as-required').attr('aria-invalid', false);
});
} else {
$text.prop('disabled', true).attr('aria-required', false).removeClass('wpcf7-validates-as-required').attr('aria-invalid', false);
$fieldRequired.each(function () {
$(this).prop('disabled', true).attr('aria-required', false).removeClass('wpcf7-validates-as-required').attr('aria-invalid', false);
});
}
}

My website refreshes everytime I run my code

$(document).ready(function() {
$("#btn").click(function() {
$("#form").toggle();
});
$("#submit").click(function() {
if ($(".product").checked = true) {
alert("Thank You!")
} else {
alert('Please Choose A Product');
}
var name = $("input:text").val();
var nLi = $("<li>").appendTo("ul");
nLi.text(name);
});
});
Everytime I put text in the text input, the <li> will display for only a moment, but the page will refresh and it will disappear. Sorry if this is obvious, I'm still learning.
Don't allow the page to refresh. Return false at the end.
$(document).ready(function() {
$("#btn").click(function() {
$("#form").toggle();
});
$("#submit").click(function() {
if ($(".product").checked) {
alert("Thank You!")
} else {
alert('Please Choose A Product');
}
var name = $("input:text").val();
var nLi = $("<li>").appendTo("ul");
nLi.text(name);
return false;
});
});
And please change
if ($(".product").checked = true) {
to
if ($(".product").checked == true) {
Try to use event.preventDefault() in your click event, for example:
$("#submit").click(function(e) {
e.preventDefault();
}
for more info about this jquery method event.preventDefault()

javascript functions do not work

Hi I have an abject called calc. And inside this I have several functions including init. I have three buttons which I am appending to the div using jquery. So when user clicks any button it will trigger inputs function and after some if else statement based on these conditions it will call one of the rest of the three functions which are calculate, reset and emailtofriend. The problem is the it does not invoke other functions except the input function. Why it behaves like this and how to make it work?
Here is my code
js
var jQuery, container, output,
calc = {
init: function () {
container = $('.calculate');
$(document).on('click','.userButtons',calc.input);
calc.widgetDesign(container);
},
widgetDesign: function (container) {
var widgetContainer = $('<div />').addClass('calculateContainer'),
form = $('<div />'),
buttons = $('<div />');
buttons.append('<button rel="reset" class="userButtons">Reset</button><button rel="emailtofriend" class="userButtons">Email to a friend</button>');
form.append('<div class="label">Weight (kg):</div>');
form.append('<input type="text" name="weight" class="weight inputs" />');
form.append('<div class="label">Height (cm):</div>');
form.append('<input type="text" name="height" class="height inputs" />');
form.append('<div><button rel="calculate" class="userButtons calcButton">Calculate</button></div>');
widgetContainer.append(form);
widgetContainer.append(buttons);
widgetContainer.appendTo(container);
},
input: function () {
var button = $(this).attr('rel');
if ( button == 'calculate' ) {
console.log(button);
calc.calculate;
} else if (button == 'reset') {
console.log(button);
calc.reset;
} else if (button == 'emailtofriend') {
console.log(button);
calc.emailtofriend;
}
},
calculate: function () {
console.log('hello');
},
reset: function () {
alert('reset');
},
emailtofriend: function () {
alert('emailtofriend');
}
};
calc.init();​
here is jsfiddle
You will need to invoke the functions, not just select them :-)
if ( button == 'calculate' ) {
console.log(button);
calc.calculate();
// ^^
} else if (button == 'reset') {
console.log(button);
calc.reset();
// ^^
} else if (button == 'emailtofriend') {
console.log(button);
calc.emailtofriend();
// ^^
}
Btw: This can be written much shorter by using the bracket notation as a member operator:
if (button in calc) {
console.log(button);
calc[button]();
}
You should put parens at the end of function names () , like so:
if ( button == 'calculate' ) {
console.log(button);
calc.calculate();
} else if (button == 'reset') {
console.log(button);
calc.reset();
} else if (button == 'emailtofriend') {
console.log(button);
calc.emailtofriend();
}

Checkbox confirm message - Remain checked if false

I am currently trying to add a JavaScript confirm message when a user attempts to deselect an option.
If a user selects cancel on the confirm screen the check box should remain ticked. The problem I am having is that the check box becomes unchecked even if I return false.
Code example can be found here http://jsfiddle.net/Amjzv/
HTML
<div class="ServiceDesc Alternate">
<span class="expandable">
<input id="ctl01_chk" type="checkbox" name="ctl01$chk" checked="checked">
</span>
</div>​
JQuery
$(document).ready(function () {
//each load to persist state
$('.expandable').each(function () {
ToggleCheckboxes($(this),false);
});
$('.expandable').click(function () {
ToggleCheckboxes($(this),true);
});
});
//toggle child checkbox show/hide
function ToggleCheckboxes(checkboxSpan, showConfirm) {
if (checkboxSpan.find(':checked').length > 0) {
checkboxSpan.parent().find('.indent').show();
}
else {
if (showConfirm) {
var answer = confirm("Are you sure?");
if (answer) {
checkboxSpan.parent().find('.indent').hide();
}
else {
return false;
}
}
else {checkboxSpan.parent().find('.indent').hide();}
}
}​
Simplest Way
$("#ctl01_chk").click(function() {
if(confirm("Are you sure?")) {
// continue;
} else {
return false;
}
});
Demo
You need to use preventDefault() rather than returning false ... you can do this by passing the event to the function that shows the confirm
$(document).ready(function () {
//each load to persist state
$('.expandable').each(function () {
ToggleCheckboxes($(this),false);
});
$('.expandable').click(function (event) {
ToggleCheckboxes($(this),true,event);
});
});
//toggle child checkbox show/hide
function ToggleCheckboxes(checkboxSpan, showConfirm,event) {
if (checkboxSpan.find(':checked').length > 0) {
checkboxSpan.parent().find('.indent').show();
}
else {
if (showConfirm) {
var answer = confirm("Are you sure?");
if (answer) {
checkboxSpan.parent().find('.indent').hide();
}
else {
event.preventDefault();
}
}
else {checkboxSpan.parent().find('.indent').hide();}
}
}​
Working example here
you should pass the click eventObject to your function so you can do
e.preventDefault();
Here's an update
You are returning false inside your custom function, but not inside the function assigned to the click event. just fix the following line:
$('.expandable').click(function () {
return ToggleCheckboxes($(this),true);
});

Categories

Resources