Register  |  Login



Advertisement

Start Your Own Q&A Site

Create your own Q&A site easily, allowing you to quickly grow a new community around any subject matter or generate new organic traffic for your existing website.

Question

Status: Open Points: 75 Time: 03:23 - Jun 20, 2007  

albertstephen123

Radio button validation

I hav a form wich has got som radio buttons.The no. of the radio button can change. I need atleast one checked. How can I do this without error as the no of radio btn varies bwn 1- any number...

Categories: 

JavaScript
Answer Discussion
Tutorials

 

jgivoni

Date:: Jun 22, 2007

Time:: 02:05

Hi Albert,
This would be my solution:

You'll give the radiobuttons the same name and distinct non-empty values.
That way you can simply check the input element's value, and if it is empty, no button has been selected.

You don't need to know how many radiobuttons there are and you don't need to loop through them.

Example:
[html]
<input type="radio" name="myradio" value="1" />
<input type="radio" name="myradio" value="2" />
<input type="radio" name="myradio" value="3" />
<input type="radio" name="myradio" [...]
and so on...

[javascript]
if (document.forms.myform.elements.myradio.value == "")
alert("No radiobutton selected...");

Hope you can rewrite it to suit your solution.

Jakob

nidhi

Date:: Jun 22, 2007

Time:: 03:56

try this javascript function called checkRadio
its a generic one, you simply pass in the name of your form and radio button group
This has to be called from another javascript function
The code example below shows a simple web page which simply tells you whether you have selected a button or not by the click of a button




<HTML>
<HEAD>

<SCRIPT LaNGUAGE="JavaScript">

function checkRadio (frmName, rbGroupName) {
 var radios = document[frmName].elements[rbGroupName];
 for (var i=0; i <radios.length; i++) {
  if (radios[i].checked) {
   return true;
  }
 }
 return false;
}

function valFrm() {
 if (!checkRadio("frm1","fruits"))
  alert("You didnt select any fruits");
 else
  alert("You selected a fruit");
}
</SCRIPT>

</HEAD>

<BODY>

<FORM NAME="frm1" ACTION="javascript:valFrm();">
<INPUT TYPE="radio" NAME="fruits" value="apples"/>Apples
<INPUT TYPE="radio" NAME="fruits" value="pears"/> Pears
<INPUT TYPE="radio" NAME="fruits" value="bananas"/>Bananans
<INPUT TYPE="submit">
</FORM>

</BODY>
</HTML>


jgivoni

Date:: Jun 28, 2007

Time:: 15:17

Hmm, I tried my own solution and it didn't work. I guess I was assuming something that I shouldn't...
However, I think nidhi's answer will work and I think the points should be given :-)
jakob

admin

Date:: Aug 22, 2007

Time:: 13:25

albertstephen123, did you get your question solved?

If you did then please close this question and distribute the points. If you found the solution on your own, we would be very happy if you could explain it here for the sake other users having the same problem.

If you didn't get a solution to your problem, please leave a comment here to let the experts know that you're still looking for an answer.

Thanks,
The Quomon Admin Team

vinodnath

Date:: Feb 13, 2009

Time:: 05:25

<script type="text/javascript">
function gend()
{
//alert('gender test');
if((form1.gender[0].checked=="")&&(form1.gender[1].checked==&
quot;"))
{
alert ('Select Your Gender');
return false;
}
else if(form1.gender[0].checked=true)
{
alert(form1.gender[0].value);
return false;
}
else if(form1.gender[1].checked=true)
{
alert(form1.gender[1].value);
return false;
}
}
</script>

/////////////////////////////Body content//////////////
<form id="form1">
<label>
<input type="radio" name="gender" id="female" value="Female" />
Female
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<input type="radio" name="gender" id="male" value="Male" />
Male&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</
label>
</form>
<input type="button" onclick="return gen()"/>

cheranit

Date:: May 26, 2009

Time:: 08:32

//html form
**************
<form name="myform">
<input type="radio" value="1st value" name="myradiobutton" />1st<br />
<input type="radio" value="2nd value" name="myradiobutton" />2nd<br />
<input type="radio" value="3rd value" name="myradiobutton" />3rd<br />&nbsp;<br />
<input type="submit" name="submitit" onclick="valbutton(myform);return false;" value="Validate" />
<input type="reset" name="reset" value="Clear" />
</form>
****************************
//javascript
******************
function valbutton(thisform) {
// place any other field validations that you require here
// validate myradiobuttons
myOption = -1;
for (i=thisform.myradiobutton.length-1; i > -1; i--) {
if (thisform.myradiobutton[i].checked) {
myOption = i; i = -1;
}
}
if (myOption == -1) {
alert("You must select a radio button");
return false;
}

alert("You selected button number " + myOption
+ " which has a value of "
+ thisform.myradiobutton[myOption].value);

// place any other field validations that you require here
thisform.submit(); // this line submits the form after validation
}

cheranit1

Date:: May 26, 2009

Time:: 08:33

//html form
**************
<form name="myform">
<input type="radio" value="1st value" name="myradiobutton" />1st<br />
<input type="radio" value="2nd value" name="myradiobutton" />2nd<br />
<input type="radio" value="3rd value" name="myradiobutton" />3rd<br />&nbsp;<br />
<input type="submit" name="submitit" onclick="valbutton(myform);return false;" value="Validate" />
<input type="reset" name="reset" value="Clear" />
</form>
****************************
//javascript
******************
function valbutton(thisform) {
// place any other field validations that you require here
// validate myradiobuttons
myOption = -1;
for (i=thisform.myradiobutton.length-1; i > -1; i--) {
if (thisform.myradiobutton[i].checked) {
myOption = i; i = -1;
}
}
if (myOption == -1) {
alert("You must select a radio button");
return false;
}

alert("You selected button number " + myOption
+ " which has a value of "
+ thisform.myradiobutton[myOption].value);

// place any other field validations that you require here
thisform.submit(); // this line submits the form after validation
}

max57air

Date:: Aug 01, 2009

Time:: 09:07

validation radio button
the gender radio buttons are validated

if((document.form.gender[0].checked==false)&&(document.form.gender[1].c
hecked==false))
{
alert('please choose your gender: male or female');
return false
}

mailsenthil77

Date:: Mar 17, 2010

Time:: 02:35

Good solution. Worked well for my problem. Thanks a lot.

aaa1

Date:: Aug 20, 2010

Time:: 10:14

http://quomohttp://quomon.com/images/Ava...

abcd

Date:: Nov 10, 2010

Time:: 13:43

@nidhi Thanks a lot.. worked for me

gary

Date:: Mar 10, 2011

Time:: 05:09

Wow really helped.

gary2

Date:: Mar 10, 2011

Time:: 05:11

I am called gary glitter

twarden

Date:: Apr 12, 2011

Time:: 16:05

Please help me. I frankly suck at JavaScript and have had no formal training in it whatsoever. I think I need a loop or an array or God knows what for what I'm trying to do, but I do not understand those concepts. So if you intend to reply with those concepts, please include my form terms so I know EXACTLY where they go.

Problem: I have two sets of radio buttons in a form named "terms". One radio btn out of the two sets of btns are required. If you are an employee you only see one set of btns named "Emp". If you aren't an employee, you see the other set of buttons named "Role". Again, it's a required field, but only ONE button out of both btns groups should be selected.

Using my code below, validation for "Role" works perfectly, gives me an alert to make a selection and returns false. BUT validation for "Emp" button selections does not, the form submits, even though I've made no "Emp" selection.

Here's what I have and this is the closest I've gotten to make it work:

JavaScript at top of page:
<script type="text/javascript">

  function Validate(){
   if ((document.terms.Role[0].checked == false) &&
    (document.terms.Role[1].checked == false) &&
    (document.terms.Role[2].checked == false) &&
    (document.terms.Role[3].checked == false) &&
    (document.terms.Role[4].checked == false) &&
    (document.terms.Role[5].checked == false) ||
    (document.terms.Emp[0].checked == false) ||
    (document.terms.Emp[1].checked == false)){
     alert("No selection made");
     return false;
    }
   else return true;
}
</script>

Here's my form that hides "Role" button options if the user is an employee via session variable set in the global.asa set as Session("memid") = -1 (that's an employee) and hides the "Emp" button options if the user is not an employee:

<form action="terms_accept.asp" method="post" name="terms" id="terms" onsubmit="return Validate()">
<p>Please select the user profile that most closely represents your role within your organization:</p>

<!-- if user is an employee, select from these radio buttons -->
<% If Session("memid") = -1 Then %>

<p><input name="Emp" type="radio" value="Field Staff" /> Field Staff<br />
<input name="Emp" type="radio" value="Internal Operations" /> Internal Operations</p>

<%Else%>
<!-- else if user is not an employee, select from these radio buttons -->

<p><input name="Role" type="radio" value="Director of Materials Mgmt" /> Director of Materials Mgmt<br />
<input name="Role" type="radio" value="Contract Management" /> Contract Mgmt<br />
<input name="Role" type="radio" value="Value Analysis" /> Value Analysis<br />
<input name="Role" type="radio" value="Buyer" /> Buyer<br />
<input name="Role" type="radio" value="Clinician" /> Clinician<br />
<input name="Role" type="radio" value="Contractor" /> Contractor</p>

<%End If%>

<p><input type="Submit" name="Submit" value="Submit" onClick="Submit" ></p>
</form>

(of course I've scaled this down to omit unnecessary form data)

The terms_accept.asp page posts this selection (and some others that I left off here) to a database and redirects the user to our home page.

PLEASE tell me how I can make sure one button has been chosen from either of the "Emp" or "Role" section of radio buttons in my javascript validation.

Sorry if this seems novice - I am a novice.

jpsus

Date:: Apr 21, 2011

Time:: 03:05

thanks @max57air......short and worked awesome

muhammadusman200887

Date:: Apr 22, 2011

Time:: 08:29

use this
function()
{if (form.type.value == "") { alert("Please Select Type.");
form.type.focus( );
return false; }

toniwarden

Date:: Apr 22, 2011

Time:: 09:48

If you're referring to my question, that won't work. A) because we're talking radio buttons here, not a text box or other form field. And because I had 2 sets of radio buttons. One set is visible to one audience, one set to another via If/Then statement. I needed to address both sets, but separately somehow.

It's a long story, but I figured out a solution. It may not be the most efficient, but it works. I created two sets of error checking and using the same If/Then requirements, I set the HTML FORM tag to either use the first or second JS validation onsubmit.

deepuv06

Date:: May 10, 2011

Time:: 10:44

hi, I have a form with two checkboxes,one for cash and another for DD. when I tick the checkbox DD I should get the fields like bank, branch, ddno and so on. If i tick cash it shouldnt display those fields. How can I write the HTML code for this? plz can anyone tell me the answer?

krishravanan

Date:: Jun 26, 2011

Time:: 15:18

Thanks nidhi, It worked for me.. :)

thivaorgware

Date:: Aug 05, 2011

Time:: 04:49

hi nidhi .. this is very good work... but i want display the selected button name in alert box..pls help me...

eteich

Date:: Aug 05, 2011

Time:: 19:23

The simplest solution:
<script language="JavaScript">
function valid() {
if ( ( document.formname.buttonname[0].checked == false )
&& ( document.formname.buttonname[1].checked == false )
&& ( document.formname.buttonname[2].checked == false ) )
{
alert ( "Please choose your buttonname." ); return false;
valid = false;
}
return true; 
}
</script>

If you want to reference the button name in the alert, then type it in.

eteich

Date:: Aug 05, 2011

Time:: 19:36

With text validation in it too.
This will do your entire form

<script language="JavaScript">
function valid() {
// Text box validation
if(document.getElementById("elementid").value=="") {
alert("Please enter your elementid."); return false; 
}

//radio button validation [0], [1], [2], etc. represents the number of options starting at 0
if ( ( document.formname.buttonname[0].checked == false )
&& ( document.formname.buttonname[1].checked == false )
&& ( document.formname.buttonname[2].checked == false ) )
{
alert ( "Please choose your buttonname." ); return false;
valid = false;
}
return true; 
}
</script>

prabhurosy

Date:: Oct 06, 2011

Time:: 03:02

i need one or more radio button validation in js

priyarizvi

Date:: Nov 15, 2011

Time:: 14:43

if we don't know the no of radio buttons then how do we dynamically validate them?

Narender1990

Date:: Jan 10, 2012

Time:: 08:28

Dear All,
Sorry for intrupt,
The below code may help.
By the below code you could make validation in asp based on the control id. Some times may happen your radio button control name is same or you control name taking values from DB. You would be confused. How can do validation.The below code will help.
This code is test.

<script LANGUAGE="JavaScript" defer="defer">

function ValidateForm(form)
{
if(document.getElementById("Approve").checked == true||document.getElementById("Reject").checked == true)
{
alert ( "" )
}
else
{
alert ("Please select any one")
}
}
</script>

<br>

Your Gender:
<input type="radio" id = "Approve" name=" & verification_status & "-" & sessionId & "-" & primary_pic_code & " value="Approve"> Approve
<input type="radio" id = "Reject" name=" & verification_status & "-" & sessionId & "-" & primary_pic_code & " value="Reject"> Reject
<input type="button" name="SubmitButton" value="Submit" onClick="ValidateForm(this.form)">
<input type="reset" value="Reset">

mmramya901

Date:: Jan 25, 2012

Time:: 06:39

JavaScript
function validation()
{
if(window.document.form.sex.value == "")
{
alert("Enter gender");
window.document.form.sex.focus();
return false;
}

}
HTML
<form action="insert.php " method="post" name="form">
<tr>
<td>GENDER</td>
<td><input type="radio" name="sex" value="1" /> Male
<input type="radio" name="sex" value="2"/> Female</td>
</tr>
</form>
<td><input name="submit" type="submit" onClick="return validation();" value="Submit"/>


It can not work help me

sarthakguptait

Date:: Feb 06, 2012

Time:: 05:30

Thanks Nidhi, you are great.

mvsnaiduadari

Date:: Feb 17, 2012

Time:: 04:36

i want to see the error message in the same form page in front of components not in the alert box format

Al

Date:: Feb 23, 2012

Time:: 21:36

Help Please!I got two groups of radio buttons,3 radio buttons in each group...I need a validation JavaScript that makes shure one button in each group is checked. Any help is really appreciated.

rizwanicit

Date:: Feb 24, 2012

Time:: 02:04

Thanks :max57air

Good solution

Answer this Question

New User

Email:

Upon submission of this form, you will automatically be registered as a Quomon user and we will send your login information to this address

Registered User

Username:

Password:
Forgot Your Password?

Tutorials cannot be submitted until the Answer Discussion is complete.

Submit answers in the Answer Discussion area

Ask a Question

Have a new question? Ask!

You have 100 characters to use



Top Experts

View More

Rank

Expert

Points

1.
nidhi

10354

2.

 oracleofDelphi

6493

3.

 rcastagna

5596

4.

 LAGM

4848

5.

 PeterNZ

3487

6.

 gonzalo

2840

7.

 Mason

2770

8.

 jgivoni

2303

9.

 xarcus

1820

10.

 Anpanman

917

Become an Expert

Register today to share your knowledge with the community and be recognized and rewarded for your contributions.


Register Here




"Psst, Quomon is a great site. Pass it on."     Tell a Friend  |   Link To Us  |   Save to Delicious  |   Digg! Digg it

© 2005-2012   Quomon Small Logo Help  |  Revenue Sharing  |  Advertising  |  Corporate Solutions  |  Link To Us  |  About Us  |  Contact Us  |  Terms of Use  |  Privacy  |  All Questions


Language Options

English:

 www.quomon.com

Español:

 www.quomon.es

Sponsors

Questions and Answers Software