Develop Reference

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

document.body on change/select on change not firing, no errors -- jquery 1.3.1

I am limited to using jquery 1.3.1 for this project, so can't update jquery. I am trying to get one select field to disable another select field on change.
I have tried this:
$(document.body).on('change','#idoffirstselect',function(){
var selected = $("#idoffirstselect").val();
if (selected == "foo") {
$("#selecttwo").attr('disabled','disabled');
} else {
$("#selecttwo").removeAttr('disabled');
}
});
And this:
$( "#idoffirstselect" ).change(function(){
var selected = $("#idoffirstselect").val();
if (selected == "foo") {
$("#selecttwo").attr('disabled','disabled');
} else {
$("#selecttwo").removeAttr('disabled');
}
});
Any suggestions? Is there anything else I could try? Firebug is not showing any errors.

Since on is not available in version before 1.7, try to use live() here:
$(function() {
$('select').live('change', function(){
var selected = $("#idoffirstselect").val();
if (selected == "foo") {
$("#selecttwo").attr('disabled','disabled');
} else {
$("#selecttwo").removeAttr('disabled');
}
});
});

How to make web form appear after previous web form has data entered into it?

I'm looking to make a second web form appear after the first web form has something entered into it. I'm currently using a sinatra set up with slim as the templating engine, and pure javascript.
input#topic value="Enter topic" onfocus="this.value = this.value=='Enter topic'?'':this.value;" onblur="this.value = this.value==''?'Enter topic':this.value;"
input#subtopic value="Enter subtopic" onfocus="this.value = this.value=='Enter subtopic?'':this.value;" onblur="this.value = this.value==''?'Enter subtopic':this.value;"
The above are my two forms, the onfocus and onblur are to make the form value disappear and reappear if clicked on.
My javascript is as follows.
function checkField(field) {
if(field.value != null) {
document.getElementById('subtopic_form').style.display = 'true';
} else {
document.getElementById('subtopic_form').style.display = 'false';
}
}
This doesn't work, and part of the problem is that when I add to the input tags
onchange="checkField(this)"
then I get a function unused message inside my javascript file, even though I have specified in my home.slim file
script src="/js/application.js"
Any help to get this to work as I need is much appreciated.
I'm open to using jquery for this, and if there was any way to make the second form have an effect upon appearance that'd be awesome.
-Adam

The display property accepts several values, but true and false are not among them. To get a full list, go to MDN or w3schools or MSDN. But I can tell you right now, that the values you most likely want are "none" and "block", as in:
function checkField(field) {
if(field.value != null && field.value != '') {
document.getElementById('subtopic_form').style.display = 'block';
} else {
document.getElementById('subtopic_form').style.display = 'none';
}
}
with jQuery, though, this code could be quite a bit cleaner!
function checkField(field) {
if (field.value != null && field.value != '') {
$("#subtopic_form").show();
} else {
$("#subtopic_form").hide();
}
}
or even
$("#topic").change(function(){
if ($(this).val()) {
$("#subtopic_form").show();
} else {
$("#subtopic_form").hide();
}
});
and if you want effects, consider jQuery's .fadeOut() or .slideUp() in place of .hide()
Note that I added field.value != '' to your code. Also, it would be best to use !== instead of !=.
:)

Disable Select based on another element on the Same Row

In a table, I have a row with two inputs - one select and one text. What I want to achieve is that if one has a value, then the other (on the same row) should disable. This works correctly onload when there is a value in the textbox, but doesn't seem to work when there is a value in only the select box.
As you can see in the example here: http://jsfiddle.net/anAgent/UBUhn/1/ the "change" event works correctly, but it doesn't work onload.
Any help would greatly be appreciated!
I'm working with jQuery 1.5.2 and with both Google Chrome and IE9
Update With Final Code
Thanks #scoopseven and #eicto for your input. Based on these two answers, here's the final code. I hope it helps someone else.
$(document).ready(function() {
$(".validation-compare").change(runRowValidation);
$(".validation-compare").each(runRowValidation);
});
function runRowValidation() {
var $me = $(this),
$other = $('.validation-compare',$me.closest("tr")).not($me),
mVal = $me.val(),
oVal =$other.val();
if(mVal != "" && oVal == "") {
$me.removeAttr('disabled');
$other.attr('disabled',1);
} else if(mVal == "" && oVal != "") {
$other.removeAttr('disabled');
$me.attr('disabled',1);
} else {
$other.removeAttr('disabled');
$me.removeAttr('disabled');
}
}​
You can see it in action at: http://jsfiddle.net/anAgent/UBUhn/24/

i don't think that you you need to set the class valid, all you have to do is replacing
var $otherInput = $('.validation-compare', $parent).not('.valid');
by
var $otherInput = $('.validation-compare', $parent).not($me);
And this will resolve your problem on onload. Here is an example

var validme=function() {
var me=$(this);
me.removeClass('validation-compare');
if (me.val()) {
console.log(me);
me.addClass('valid');
me.parent().parent().find('.validation-compare').attr('disabled',1);
me.addClass('validation-compare');
return;
}
me.removeClass('valid');
if (me.parent().parent().find('.validation-compare.valid').length<1) {
me.parent().parent().find('.validation-compare').removeAttr('disabled'); }
me.addClass('validation-compare');
}
$('.validation-compare').each(validme);
$('.validation-compare').change(validme)
http://jsfiddle.net/UBUhn/22/

You need to separate out the function and call it on the click event and on page load. Something like this:
jQuery(function($){
function myFunction() {
// do somestuff
}
// myFunction needs to be called when select is clicked and when page is loaded
$('#someelement').click(myFunction);
$(document).ready(myFunction);
});

jQuery if (x == y) not working

So, I have some faux checkboxes (so I could style them) that work with jQuery to act as checked or not checked. There are a number of faux checkboxes in my document, and for each one I have a click function:
var productInterest = [];
productInterest[0] = false;
productInterest[1] = false;
productInterest[2] = false;
// here is one function of the three:
$('#productOne').click(function() {
if (productInterest[0] == false) {
$(this).addClass("checkboxChecked");
productInterest[0] = true;
} else {
$(this).removeClass("checkboxChecked");
productInterest[0] = false;
}
});
The problem seems to be that there is an error in the if statement, because it will check, but not uncheck. In other words it will add the class, but the variable won't change so it still thinks its checked. Anybody have any ideas? Thanks for your help.
UPDATE: So, I need to show you all my code because it works in the way I supplied it (thanks commenters for helping me realize that)... just not in the way its actually being used on my site. so below please find the code in its entirety.
Everything needs to happen in one function, because the UI and data for each checkbox need to be updated at once. So here is the complete function:
$('input[name=silkInterest]').click(function() { // they all have the same name
var silkInterest = [];
silkInterest[0] = false;
silkInterest[1] = false;
silkInterest[2] = false;
if ($(this).is('#silkSilk')) { // function stops working because the .is()
if (silkInterest[0] == false) {
$(this).addClass("checkboxChecked");
silkInterest[0] = true;
} else {
$(this).removeClass("checkboxChecked");
silkInterest[0] = false;
}
alert(silkInterest[0]);
}
if ($(this).is('#silkAlmond')) {
if (silkInterest[1] == false) {
$(this).addClass("checkboxChecked");
silkInterest[1] = true;
} else {
$(this).removeClass("checkboxChecked");
silkInterest[1] = false;
}
}
if ($(this).is('#silkCoconut')) {
if (silkInterest[2] == false) {
$(this).addClass("checkboxChecked");
silkInterest[2] = true;
} else {
$(this).removeClass("checkboxChecked");
silkInterest[2] = false;
}
}
var silkInterestString = silkInterest.toString();
$('input[name=silkInterestAnswer]').val(silkInterestString);
// This last bit puts the code into a hidden field so I can capture it with php.
});

I can't spot the problem in your code, but you can simply use the class you're adding in place of the productInterest array. This lets you condense the code down to a single:
// Condense productOne, productTwo, etc...
$('[id^="product"]').click(function() {
// Condense addClass, removeClass
$(this).toggleClass('checkboxChecked');
});
And to check if one of them is checked:
if ($('#productOne').hasClass('checkboxChecked')) {...}
This'll make sure the UI is always synced to the "data", so if there's other code that's interfering you'll be able to spot it.

Okay, just had a palm to forehead moment. In regards to my revised code- the variables get reset everytime I click. That was the problem. Duh.