• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 578
  • Last Modified:

Show alert if no radio button selected

My code snippet shows two different forms and sets of JavaScript. I  need to combine both so if no radio button is selected, an alert is shown.

The second option is the one I need to use so I'll need to be shown a full version of my code, JavaScript and form changes to get this to work correctly.
<!--- This method works for the radio button. If no radio button is selected, an alert is shown.  --->
<script>
function theRadioCheck(){
  theForm = document.forms.myForm;
  for(var i=0;i<theForm.LogInType.length;i++){
    if(theForm.LogInType[i].checked) return true;
  }
  alert("No selection made. New or returning user?");
  return false;
}

</script>

<form name="myForm" method="post" onSubmit="return theRadioCheck()" >


New Player: <input type="radio" name="LogInType" value="0" ><br>
Returning player: <input type="radio" name="LogInType" value="1" > 
<br>
<input type="submit" value="Submit" >

</form>
<!--- End of radio button test --_>

<!--- The code below works except for the radio values. I need to combine both JavaScripts so that if a radio button is not selected, a Javascript alert is shown. --->

<SCRIPT language="JavaScript">
function validateForm(form) {

   if (form.LOGIN_TYPE.value == "") {
      alert("No selection checked. Are you a Returning user, or a New user?");
      return false
   }  


   if (form.HANDLE.value == "") {
      alert("Enter a user name.");
      return false
   }
   
      
   if (form.PASSWORD.value == "") {
      alert("Enter a password.");
      return false
   }

   return true
}

</SCRIPT>
</head>
<body>
<form  method="post" action="" onSubmit="return validateForm(this)">
 Current Member: <input type="radio" name="LOGIN_TYPE" value="M"><br />
 New User: <input type="radio" name="LOGIN_TYPE" value="N"><br />
 Your name:  <input type="text" name="HANDLE"><br />
 Password: <input type="password" name="PASSWORD" value="">
 <input type="submit" value="Login" >
</form>
</body>
</html>

Open in new window

0
Qsorb
Asked:
Qsorb
  • 3
  • 2
1 Solution
 
leakim971PluritechnicianCommented:
a fast way :


onSubmit="return validateForm(this) && theRadioCheck()"

Open in new window

0
 
QsorbAuthor Commented:
Had no idea this could be doen. Anyway, I tried it but it didn't work for me. No validation for any inputs now.

It probably has something to do with form names, references, etc. There are so many possibilities, and that's why, in my original question, I very clearly stated:

"I'll need to be shown a full version of my code, JavaScript and form changes to get this to work correctly."

I'll share points if anyone can complete this as asked and give me a working set of Javascripts and one complete form.
0
 
leakim971PluritechnicianCommented:
it should be great to clean the HTML and ask help for updating the javascript
check the following :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script>

	function theRadioCheck(form){
		for(var i=0;i<form.LogInType.length;i++){
			if(form.LogInType[i].checked) return true;
		}
		alert("No selection made. New or returning user?");
		return false;
	}

	function validateForm(form) {
		if (!form.LOGIN_TYPE[0].checked && !form.LOGIN_TYPE[1].checked) {
			alert("No selection checked. Are you a Returning user, or a New user?");
			return false
		}  
		if (form.HANDLE.value == "") {
			alert("Enter a user name.");
			return false
		}
		if (form.PASSWORD.value == "") {
			alert("Enter a password.");
			return false
		}
		return true
	}

</script>
</head>
<body>
<form  method="post" action="" onSubmit="return validateForm(this) && theRadioCheck(this)">
Current Member: <input type="radio" name="LOGIN_TYPE" value="M"><br />
New User: <input type="radio" name="LOGIN_TYPE" value="N"><br />
Your name:  <input type="text" name="HANDLE"><br />
Password: <input type="password" name="PASSWORD" value="">
<input type="submit" value="Login" >
New Player: <input type="radio" name="LogInType" value="0" ><br>
Returning player: <input type="radio" name="LogInType" value="1" > 
<br>
</form>
</body>
</html>

Open in new window

0
 
QsorbAuthor Commented:
Alright. Seems simple and obvious now. But that's what Bush said to Clinton!

Many thanks for clearing this up and saving me tons of work, and teaching me how to combine two functions.
0
 
leakim971PluritechnicianCommented:
You're welcome! Thanks for the points!

As you can see we used two way to check the radio button, the loop is useful if you've a lot of radio buttons

>Seems simple and obvious now. But that's what Bush said to Clinton!
xlol

0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

  • 3
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now