radio button validation

@TchiboMay 18.2011

I have an mysql array with several radio buttons,

I want to make a button validation:

if (document.getElementById(“bookout”).checked==false) {
alert(‘error’);

For some reason when I have more that one button in the array only the first counts, meaning only when first is clicked is the button validation checked=true.[/QUOTE]

to post a comment

JavaScript

13 Comments(s) _↴

@KorMay 18.2011 — #The radio buttons in a group make a collection (a sort of Array) of elements with the same name, thus [I]you must circle[/I] through them using a loop.

Another thing. They must have the same [B]name[/B], [I]but they can not have the same [B]id[/B][/I]. [B]id[/B] and [B]name[/B] are different tokens. [B]id[/B] [I]must be unique[/I] on document.

<i>
 </i>var bool=true;
 var rads=document.getElementsByName('bookout'), r, i=0;
 while(r=rads[i++]){
 if(r.checked){bool=false;break}
 }
 if(bool){
 alert('error');
 }

@TchiboauthorMay 18.2011 — #Thanks for that, very helpful,

One more thing,

Let say I have 2 groups of radio buttons:

<INPUT name="bookout" id="1" type="radio" class="formslova" value='value1'>

<INPUT name="bookout" id="2" type="radio" class="formslova" value='value2'>

<INPUT name="bookout" id="3" type="radio" class="formslova" value='value3'>

<INPUT name="bookin" id="1" type="radio" class="formslova" value='value1'>

<INPUT name="bookin" id="2" type="radio" class="formslova" value='value2'>

<INPUT name="bookin" id="3" type="radio" class="formslova" value='value3'>

How can I with your script include both of the groups, checking that both of the sets

have been chosen.

Thanks

@KorMay 18.2011 — #use a function, and pass the name as argument

<i>
 </i>function validate(name){
 var bool=true;
 var rads=document.getElementsByName(name), r, i=0;
 while(r=rads[i++]){
 if(r.checked){bool=false;break}
 }
 if(bool){
 alert('error');
 }
 }
 validate('bookout');
 validate('bokin');

Or anything based on that.

@KorMay 18.2011 — #Or, to make it more dynamic, you may call the function once, but passing the names altogether and using the [B]arguments[/B] reference within the function

<i>
 </i>function validate(){
 var bool=true, arguments, name, j=0;
 while(name=arguments[j++]){
 var rads=document.getElementsByName(name), r, i=0;
 while(r=rads[i++]){
 if(r.checked){bool=false;break}
 }
 if(bool){
 alert('error');
 return
 }
 }
 }
 validate('bookout','bokin');

@TchiboauthorMay 18.2011 — #Since this part of the script is in the ajax function I am not sure that I can use this in this manner:

In this way below shown it works but how can I include other other group in this case:

$('ajaxForm').observe('submit', function(event){

var bool=true;

var rads=document.getElementsByName(name), r, i=0;

while(r=rads[i++]){

if(r.checked){bool=false;break}

}

if(bool){

showAjaxFormerror(event)

} else {

submitAjaxForm(event)

}

});

@TchiboauthorMay 18.2011 — #I made mistake earlier:

$('ajaxForm').observe('submit', function(event){

var bool=true;

var rads=document.getElementsByName(name), r, i=0;

while(r=rads[i++]){

if(r.checked){bool=false;break}

}

if(bool){ ////////////////////// bool instead of radiocheck

showAjaxFormerror(event)

} else {

submitAjaxForm(event)

}

});

@KorMay 18.2011 — #Try this:

<i>
 </i>$('ajaxForm').observe('submit', function(event){
 if(validate('bookout','bokin')){
 submitAjaxForm(event)
 } else {
 showAjaxFormerror(event)
 }
 })
 function validate(){
 var bool=false, arguments, name, j=0;
 while(name=arguments[j++]){
 var rads=document.getElementsByName(name), r, i=0;
 while(r=rads[i++]){
 if(r.checked){bool=true;break}
 }
 }
 return bool
 }

I have switched and simplified a little bit the code

@TchiboauthorMay 18.2011 — #I am simply not an expert so here is the entire ajax code since it is giving me an error only when both of the radios are left blank, as soon as one is chosen no error appears, it goes further although the error should be shown.

Thanks for the effort

onComplete: function(){

// once the request is complete we observe the form for a submit

$('ajaxForm').observe('submit', function(event){

if(validate('bookout','bookin')){

submitAjaxFormDemonstration(event)

} else {

showAjaxFormerror(event)

}

})

function validate(){

var bool=false, arguments, name, j=0;

while(name=arguments[j++]){

var rads=document.getElementsByName(name), r, i=0;

while(r=rads[i++]){

if(r.checked){bool=true;break}

}

}

return bool

}

}

}

}

});

}

@KorMay 18.2011 — #No. Simply write the validation function [I]outside any other functions or expressions[/I] (in other words, make it Global):

<i>
 </i>function validate(){
 var bool=false, arguments, name, j=0;
 while(name=arguments[j++]){
 var rads=document.getElementsByName(name), r, i=0;
 while(r=rads[i++]){
 if(r.checked){bool=true;break}
 }
 }
 return bool
 }

And only the JQuery expression should be:

<i>
 </i>onComplete: function(){
 $('ajaxForm').observe('submit', function(event){
 if(validate('bookout','bokin')){
 submitAjaxForm(event)
 } else {
 showAjaxFormerror(event)
 }
 })
 }

@TchiboauthorMay 18.2011 — #I am not sure what i am doing wrong but it is still proceeding although one of the radios is not checked. I have replaces bool with radiocheck, when I troy validate only one of two (validateradio('bookout')) or (validateradio('bookin')) it working fine but as soon as I put them all together (validateradio('bookout','bookin')) it is not working properly.

Here is the script places in the <head>

function validateradio(){

var radiocheck=false, arguments, name, j=0;

while(name=arguments[j++]){

var rads=document.getElementsByName(name), r, i=0;

while(r=rads[i++]){

if(r.checked){radiocheck=true;break}

}

}

return radiocheck

}

Here is jquery:

function showAjaxFormDemonstration() {

Lightview.show({

href: 'ajax/process.php?book=' + locationstring,

rel: 'ajax',

options: {

autosize: true,

topclose: true,

ajax: {

method: 'get',

onComplete: function(){

// once the request is complete we observe the form for a submit

$('ajaxForm').observe('submit', function(event){

if(validateradio('bookout','bookin')){

submitAjaxFormDemonstration(event)

} else {

showAjaxFormerror1(event)

}

})

}

}

}

});

}

@TchiboauthorMay 18.2011 — #I figured it out, maybe a little bit out of date but it works,

if(!validateradio('bookout')){

showAjaxFormerror1(event)

} else if (!validateradio('bookin')){

showAjaxFormerror1(event)

} else {

submitAjaxFormDemonstration(event)

}

@TchiboauthorMay 20.2011 — #I have one more issue here, how is it possible to have the radio button that has been clicked the first time (step1) to stay clicked when I go back to that page again from step2.

<INPUT name="bookout" type="radio" value='value1'>

<INPUT name="bookout" type="radio" value='value2'>

<INPUT name="bookout" type="radio" value='value3'>

I have made it with GET_ and SESSION_ with the input fields and checkboxes but have no idea how to do it with radio buttons.

@JMRKERMay 21.2011 — #I have one more issue here, how is it possible to have the radio button that has been clicked the first time (step1) to stay clicked when I go back to that page again from step2.

<INPUT name="bookout" type="radio" value='value1'>

<INPUT name="bookout" type="radio" value='value2'>

<INPUT name="bookout" type="radio" value='value3'>

I have made it with GET_ and SESSION_ with the input fields and checkboxes but have no idea how to do it with radio buttons.[/QUOTE]

Only way I know of in JS is to use a cookie.

Save status of RB to be set when cookie is available.

Note, this will only work if user returns to same computer on reload of page.

Also in #JavaScript _↴

Adding days to a certain Date A cookie that remembers the state of a sliding menu check box controlling a text area

Success!

Help @Tchibo spread the word by sharing this article on Twitter...

Tweet This

radio button validation

13 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

radio button validation

13 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

13 Comments(s) _↴

Also in #JavaScript _↴