Develop Reference

Radio button returning undefined value in javascript

http://jsfiddle.net/jngpjbjm/
Have a look at the fiddle link attached. Radio button value is returning a undefined value. I don't why. Please help with this.
<input type="radio" name="arv" value="1">1
<br>
<input type="radio" name="arv" value="2">2
var radio = document.getElementsByName('arv');
radio[0].addEventListener('click', check());
radio[1].addEventListener('click', check());
function check() {
for (var i = 0; i < radio.length; i++) {
var rcheck = radio[i].checked;
if (!rcheck) {
alert(rcheck.value);
}
}
}

Try this: http://jsfiddle.net/jngpjbjm/3/
It should be:
alert(radio[i].value);
Maybe you need something like this?
function check() {
alert( event.target.value );
}
http://jsfiddle.net/jngpjbjm/9/

I have tried to remove all excessive code from your original script as being unnecessary (kind of), whats left are the bare essentials. thanks #mplungjan
Try this:
var radio = document.getElementsByName('arv');
// here is how to add event listeners like the pros over at MDN
radio[0].addEventListener('click', check, false);
radio[1].addEventListener('click', check, false);
function check(e) {
//simply grab the event by passing it as "e" and capturing its target.value
var rcheck = e.target.value;
alert(rcheck);
}

Use this
var radio = document.getElementsByName('arv');
radio[0].addEventListener('click', check);
radio[1].addEventListener('click', check);
function check() {
for (var i = 0; i < radio.length; i++) {
var rcheck = radio[i].checked;
if (!rcheck) {
alert(radio[i].value);
}
}
}

This version will work in all browsers.
window.onload=function() {
var radios = document.getElementsByName('arv');
for (var i=0;i<radios.length;i++) {
radios[i].onclick=function() {
alert(this.value);
}
}
}
onclick
Because it was essentially part of DOM 0, this method is very widely supported and requires no special cross–browser code; hence it is normally used to register event listeners dynamically unless the extra features of addEventListener() are needed.

Multiple ASP.NET validators on the same control - Page_Validator.isValid always remains true

I am using this JavaScript code in order to highlight textboxes and other controls (on which ASP.NET validators are specified) after validation fails.
<script src="_scripts/jquery-1.6.4.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
HighlightControlToValidate();
$('#<%=btnSave.ClientID %>').click(function() {
if (typeof (Page_Validators) != "undefined") {
for (var i = 0; i < Page_Validators.length; i++) {
if (!Page_Validators[i].isvalid) {
$('#' + Page_Validators[i].controltovalidate).css("background", "#f3d74f");
}
else {
$('#' + Page_Validators[i].controltovalidate).css("background", "white");
}
}
}
});
});
function HighlightControlToValidate() {
if (typeof (Page_Validators) != "undefined") {
for (var i = 0; i < Page_Validators.length; i++) {
$('#' + Page_Validators[i].controltovalidate).blur(function() {
var validatorctrl = getValidatorUsingControl($(this).attr("ID"));
if (validatorctrl!= null && !validatorctrl.isvalid) {
$(this).css("background", "#f3d74f");
}
else {
$(this).css("background", "white");
}
});
}
}
}
function getValidatorUsingControl(controltovalidate) {
var length = Page_Validators.length;
for (var j = 0; j < length; j++) {
if (Page_Validators[j].controltovalidate == controltovalidate) {
return Page_Validators[j];
}
}
return null;
}
</script>
This script works fine whenever there is no more than one ASP.NET validator specified on the same control. Unfortunately, if there are multiple ASP.NET validators specified on the same control and validation fails, the control in question is not highlighted.
After debugging using the Chrome developer tools, I found out that the isValid property of the ASP.NET validators in question is always set to "true" whenever there are multiple ASP.NET validators specified on the same control, even if validation fails. If the ASP.NET validators on the same control are reduced to one validator, the isValid property is set to "false" when validation fails, as it should be.
Why is this happening please? How can I solve this? Thanks.

If I've read that dense code correctly, your code is looping through each validator, then getting the first validator for the associated control.
So one control might have 3 validators, and then for each of those three validators, it will get the same control and then the first validator for that control.
Instead of using:
getValidatorUsingControl($(this).attr("ID"))
just use:
$('#' + Page_Validators[i])[0]
Actually, that won't work because i will be out of scope or have a changed value at the time when the field is blurred, but do something along those lines.

How to click buttons after creating with jQuery?

I have 10 buttons that are created when click button "Create".
How to also click all those buttons when i click "Create" ?
function a() {
selectAll();
jQuery(selectAllValues());
};
function selectAllValues() {
for(var i = 0; i < array.length; i++) {
document.getElementById("select" + array[i]).click();
}
};
The problem is that the buttons are created but not clicked.

Just use Jquery like this :
$("#select" + array[i]).click();
Or without loop : http://api.jquery.com/attribute-starts-with-selector/
//Will execute the click event on all element where the id begins by "select"
$('[id^="select"]').click();

Why do you want to click them all? Are these actually checkboxes that you are trying to mark as "Checked"?
//If checkboxes then try
$('#select'+array[i]).prop('checked', true);
if these are truly buttons then why wouldn't you manually initialize the "onClick" function that they would initialize?
for(var i = 0; i < array.length; i++) {
//call the onClick function yourself here
}
Please elaborate
EDIT:
function selectAllValues() {
for(var i = 0; i < array.length; i++) {
$('#select'+array[i]).prop('checked', true);
//code to create tables
//loop through tables
$('tableselector').each(function(key,value){
//check the checkboxes within the tables
$(this).find('input[type="checkbox"]').prop('checked', true);
});
}
};

Is there a way to check a form before submitting it to see if ANY of the checkboxes have been checked?

Is there a way to check a form before submitting it to see if ANY of the checkboxes have been checked in Javascript?
Something like...
function checkboxcheck(){
/*something in here to check name="brands[]" checkbox array?*/
}
Basically I just want it to alert me if 0 checkboxes were selected. 1 or more is required.
I would call this function on submit.
Thanks much!!

You could do something like this:
function anyCheckboxesChecked() {
var inputs = document.getElementsByTagName('input');
for (var i = 0; i < inputs.length; ++i) {
if (inputs[i].type === "checkbox" && inputs[i].checked)
return true;
}
return false;
}
Then you could call that function from your "submit" handler"
if (!anyCheckboxesChecked()) {
alert("Please check one of the appealing checkboxes on the page");
return false;
}
If your page is more complicated than what this implies (like, if there are multiple forms), then you'd find the appropriate form first and call .getElementsByTagName() from that point instead of from document.

How about:
function checkboxcheck(name) {
var els = document.getElementsByName(name);
for (var i = 0; i < els.length; i++) {
if (els[i].checked) {
return true;
}
}
return false;
}
using getElementsByName().
Usage:
var valid = checkboxcheck("brands[]");
Here's an example: http://jsfiddle.net/andrewwhitaker/2saJp/1/

IE7 issues with my jQuery [click and change functions]

I have the following snippets of code. Basically what I'm trying to do is in the 1st click function I loop through my cached JSON data and display any values that exist for that id. In the 2nd change function I capturing whenever one of the elements changes values (i.e. yes to no and vice versa).
These elements are all generated dynamically though the JSON data I'm receiving from a webservice. From my understanding that is why I have to use the .live functionality.
In Firefox everything works as expected (of course). However, in IE7 it does not. In IE7, if I select a radio button that displays an alert from the click function then it also adds to the array for the changed function. However, if the radio button does not do anything from the click function then the array is not added to for the change.
As I look at this code I'm thinking that I might be able to combine these 2 functions together however, right now I just want it to work in IE7.
$(document).ready(function () {
//This function is run whenever a 'radio button' is selected.
//It then goes into the CPItemMetaInfoList in the cached JSON data
//($.myglobals) and checks to see if there are currently any
//scripts to display.
$("input:radio").live("click", function () {
var index = parseInt(this.name.split(':')[0]);
for (i = 0; i <= $.myglobals.result.length - 1; i++) {
if ($.myglobals.result[i].CPItemMetaInfoList.length > 0) {
for (j = 0; j <= $.myglobals.result[i].CPItemMetaInfoList.length - 1; j++) {
if (index == $.myglobals.result[i].QuestionId) {
alert($.myglobals.result[i].CPItemMetaInfoList[j].KeyStringValue);
return;
}
}
}
}
});
});
$(document).ready(function () {
var blnCheck = false;
//Checks to see if values have changed.
//If a value has been changed then the isDirty array gets populated.
//This array is used when the questionSubmit button is clickeds
$('input').live('change', function () {
blnCheck = false;
for (i = 0; i <= isDirty.length - 1; i++) {
if (isDirty[i] == $(this).attr("name")) {
blnCheck = true;
break
}
}
if (blnCheck == false) {
isDirty[arrayCount] = $(this).attr("name");
arrayCount += 1;
alert($(this).attr("name"));
}
});
$('textarea').live('change', function () {
blnCheck = false;
for (i = 0; i <= isDirty.length - 1; i++) {
if (isDirty[i] == $(this).attr("id")) {
blnCheck = true;
break
}
}
if (blnCheck == false) {
isDirty[arrayCount] = $(this).attr("id");
arrayCount += 1;
//alert($(this).attr("name"));
}
});
});
UPDATE:
I had to move this chunk of code into the click function:
blnCheck = false;
for (i = 0; i <= isDirty.length - 1; i++) {
if (isDirty[i] == $(this).attr("name")) {
blnCheck = true;
break
}
}
if (blnCheck == false) {
isDirty[arrayCount] = $(this).attr("name");
arrayCount += 1;
alert($(this).attr("name"));
}
Like this:
$(document).ready(function () {
//This function is run whenever a 'radio button' is selected.
//It then goes into the CPItemMetaInfoList in the cached JSON data
//($.myglobals) and checks to see if there are currently any
//scripts to display.
$("input:radio").live("click", function () {
var index = parseInt(this.name.split(':')[0]);
for (i = 0; i <= $.myglobals.result.length - 1; i++) {
if ($.myglobals.result[i].CPItemMetaInfoList.length > 0) {
for (j = 0; j <= $.myglobals.result[i].CPItemMetaInfoList.length - 1; j++) {
if (index == $.myglobals.result[i].QuestionId) {
alert($.myglobals.result[i].CPItemMetaInfoList[j].KeyStringValue);
return;
}
}
}
}
blnCheck = false;
for (i = 0; i <= isDirty.length - 1; i++) {
if (isDirty[i] == $(this).attr("name")) {
blnCheck = true;
break
}
}
if (blnCheck == false) {
isDirty[arrayCount] = $(this).attr("name");
arrayCount += 1;
}
});
});
But...
I had to leave the change function the same. From my testing I found that the .click function worked for IE7 for the radio buttons and checkbox elements, but the .change functionality worked for the textboxes and textareas in IE7 and FF as well as the original functionality of the radio buttons and checkbox elements.
This one got real messy. Thanks to #Patricia for looking at it. Here suggestions did lead me to this solution. I'm going to leave the question unanswered as I wonder if there isn't a cleaner solution to this.

Fact: change event on radio buttons and checkboxes only get fired when the focus is lost (i.e. when the blur event is about to occur). To achieve the "expected" behaviour, you really want to hook on the click event instead.
You basically want to change
$('input').live('change', function() {
// Code.
});
to
$('input:radio').live('click', functionName);
$('input:not(:radio)').live('change', functionName);
function functionName() {
// Code.
}
(I'd however also take checkboxes into account using :checkbox selector for the case that you have any in your form, you'd like to treat them equally as radiobuttons)

I think this is because IE fires the change when focus is lost on checks and radios. so if the alert is popping up, focus is being lost and therefor the change event is firing.
EDIT:
try changing the $('input') selector to $('input:not(:radio)')
so the click will fire for your radios and the change for all your others.
Edit #2:
How bout putting the stuff that happens on change into a separate function. with the index as a parameter. then you can call that function from the change() and the click(). put the call to that function after your done with the click stuff.

You're declaring your blnCheck variable inside one of your document.ready() functions. You don't need two of these either, it could all be in one.
This means that the variable that you're declaring there won't be the one used when your change function is actually called, instead you're going to get some kind of implicit global. Don't know if this is part of it, but might be worth looking at. You should declare this at the top of your JS file instead.