Develop Reference

JQuery toggle doesn't work on change when I try to set css

I have a toggle button that works only once. This is the portion of script:
$('#toggle').change(function(){
var mode= $(this).prop('unchecked');
if(mode = true) {
$('.container').css('display','block');
$('.container').hide().delay(500).fadeIn(1000);
$('#map').css('filter','grayscale(100%)');
} else {
$('.container').css('display','none');
$('.container').delay(500).fadeOut(1000);
$('#map').css('filter','grayscale(0%)');
}
});
The first part of If condition is fired, not the Else part. I don't understand why. Some help?

There are two errors in you code.
1) There is no such property as :unchecked, you should use :checked property
2) You have written if(mode = true) not if(mode == true), so you didn't check equality, you assign new value
There is right code:
$('#toggle').change(function(){
var mode= $(this).prop('checked');
console.log(mode);
if(mode == true) {
$('.container').css('display','block');
$('.container').hide().delay(500).fadeIn(1000);
$('#map').css('filter','grayscale(100%)');
} else {
$('.container').css('display','none');
$('.container').delay(500).fadeOut(1000);
$('#map').css('filter','grayscale(0%)');
}
});

A couple issues here. #AidOnline01 mentioned the first two.
Property unchecked doesn't exist, use checked instead.
if (mode = true) statement assigns mode a value instead of evaluating equality. Use if (mode == true)
Fade out function doesn't wait for animation to complete before assigning. Use a callback to call $('.container').css('display','none');
I've made a JSFiddle to demonstrate:
https://jsfiddle.net/g3y27o5L/4/

js on change event getting looped in js confirm

I have a flip toggle button().I am writing a function on change of toggle button,on change I am declaring js confirm box ,if confirms true the button remains in changed state,else it will revert in its previous state.My issue is the function is getting iterating(looping).Please suggest

To me it looks quite ok. Maybe you just forgot to encapsulate your code in $(document).ready - this is necessary because otherwise your Javascript function will be loaded before the HTML DOM has been loaded - so your function will fail to access the DOM elements.
$(document).ready(function() {
$("#btn").on("change", function() {
var txt;
var btnStatus = $("#btn").val();
console.log("btnstataus>>>>>" + btnStatus);
var r = confirm("Are you sure to change?");
if (r == true) {
if (btnStatus == "on") {
$("#btn").val("on");
} else {
$("#btn").val("off");
}
} else {
if (btnStatus == "on") {
$("#btn").val("off");
} else {
$("#btn").val("on");
}
}
});
});
Here is a working sample of your code:
https://plnkr.co/edit/AdzcN04F1fsLe9xw454j?p=preview

javascript onchange checkboxes still select on cancel

<script>
function no_email_confirm() {
if (document.getElementsByName("no_email")[0].checked == false) {
return true;
} else {
var box= confirm("Sure?");
if (box==true)
return true;
else
document.getElementsByName("no_email")[0].checked == false;
}
}
</script>
And here is my HTML for the checkbox:
<input type="checkbox" id="no_email" name="no_email" onchange="no_email_confirm()"></input>
For some reason, this gives me the confirm pop up the first time I check the box, but not for any click after that. Also, even if I click "Cancel" it still checks the check box. I've searched on here and for some reason, no matter what I try, I can't get it to work properly.
It should confirm if they really want to check the box, if they select "Yes" then it checks it, if not, then it doesn't check it. I can get it to work without the name no_email, but I can't change that..
Anyone have any ideas?

Looks like you've got several errors in there, most notably using == when you probably meant =. Instead, add an event listener and make sure the assignment works:
var box = document.querySelector('#no_email');
box.addEventListener('change', function no_email_confirm() {
if (this.checked == false) {
return true;
} else {
var confirmation= confirm("This means that the VENDOR will NOT RECEIVE ANY communication!!!!");
if (confirmation)
return true;
else
box.checked = false;
}
});
http://jsfiddle.net/A3VGg/1/

Trying to execute a if/else statement in JQuery

I'm trying to execute a simple JQuery code a.k.a an if/else statement. Here's my code:
$('#butt_click, #pary').click(function() {
if ($(this).attr('id').val() == "butt_click") {
alert("You clicked button");
} else {
alert("You clicked pary");
}
});
The code above doesn't work AT ALL. Can't seem to find the problem... Help would be appreciated. Thanks..

This doesn’t look right:
$(this).attr('id').val()
Try using $(this).attr('id') or simply this.id instead (if you are trying to access the id property from the clicked element).

You have wrong code.
code must be as below.
if ($(this).val() == "butt_click")
OR
if ($(this).attr('id') == "butt_click")
not
if ($(this).attr('id').val() == "butt_click")

Remove val(). $(this).attr('id') already returns value
if ($(this).attr('id') == "butt_click") {

Remove .val() from if statement
Change your if statement to
if ($(this).attr('id') == "butt_click") {
alert("You clicked button");
} else {
alert("You clicked pary");
}

java script is not working in mozila

I have added some javascript in html page for input validation.same page is working correct in IE and chrome but in mozila its not working.The problem is when user inputs invalid data its supposed to show alert msg box and when user clicks OK it should return false to form...BUT mozila is not waiting for alert box it just shows alert box for 5-6 sec and then goes to next page defined in form action="nextpage.php"
function validate_form(thisform)
{
with (thisform)
{
if (validate_required(oldpassword, "<b>Error: </b>Please enter the Old Password!") == false)
{ changeColor("oldpassword"); return false; }
else if (valid_length(newpassword, "<b>Error: </b>Please enter the New Password!!") == false)
{newpassword.value=""; changeColor("newpassword"); return false; }
else if (valid_length(cnfpassword, "<b>Error: </b>Please enter the Confirm Password!!") == false)
{cnfpassword.value=""; changeColor("cnfpassword"); return false; }
else if (document.getElementById('newpassword').value != document.getElementById('cnfpassword').value)
{changeColor("newpassword");cool.error("<b>Error: </b>Passwords entered are not same!");
newpassword.value="";cnfpassword.value="";return false;}
}
}function validate_required(field, alerttxt)
{
with (field)
{
if (value == null || value == "")
{
cool.error(alerttxt);return false;
}
else
{
return true;
}
}
}
cool.error is nothing but CSS nd Js for alert box.I thing there is not any problem in my code weather problem is in some browser settings.Is it so??? because it is working fine in IE and Chrome.

You're using a non-standard IE-only behavior that creates global variables for every element with an ID.
To fix it, add a global variable for each element that you use:
var oldpassword = document.getElementById("oldpassword");
Also, you should never use Javascript's with block.
It is very different from VB's with block, and should not be used unless you truly understand its pitfalls and shortcomings. It will also slow down your code.

You could also use some javascript library to get past browser issues. I'm rooting for jQuery.