Solved

Validating the text boxes with radio buttons

Posted on 2011-03-01
6
289 Views
Last Modified: 2012-05-11
Experts,

Please see the code in the code part.
I have three radio buttons and there text boxes in my form and here is what I need to to

1) Radio buttons should not be pre-selected and the text boxes should be disabled when the user comes to the page.
2) If an user selects the one of the radio button, the corresponding or the related text box should be active or enabled for enterning the value(s)
3) If I switch from one radio button to the other, previuos radio buttion's text box should be disabled and if there was any text entered by the user should make it blank.
4) At any point radio buttons should not be disabled.
5) If a radio button selected and no text is entered in the text box, should get an alert.

Thanks for your help in advance.
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<body>
<table align="center" >
<form name="name1">
<tr>
		<td width="10"><input type="radio" name="option1" value="1"></td>
		<td align="left">
		 	<font face="Arial" size="2" color="#000000">
		 	Search Option 1
			</font>
		</td>
		<td>
			<input type="text" name="Text1" size="23">
		</td>
		<td>&nbsp;
			
		</td>
	</tr>
	<tr>
		<td width="10"><input type="radio" name="Option2" value="2"></td>
		<td align="left">
		 	<font face="Arial" size="2" color="#000000">
		 	Search Option 2
			</font>
		</td>
		<td>
			<input type="text" name="Text2" size="23" disabled=">
		</td>
		<td>&nbsp;			
		</td>
	</tr>
	<tr>
		<td width="10"><input type="radio" name="Option3" value="3"></td>
		<td align="left">
		 	<font face="Arial" size="2" color="#000000">
		 		Search Option 3
			</font>
		</td>
		<td>
			<input type="text" name="Text3" size="23">
		</td>
				<td>&nbsp;			
		</td>
	</tr>

<tr>
		<td colspan="3" align="center"><br><input type="button" name="search" alt="search" value="Search"></td>
	</tr>
</table>
</form>
</body>
</html>

Open in new window

0
Comment
Question by:Tpaul_10
  • 3
  • 3
6 Comments
 
LVL 52

Expert Comment

by:_agx_
ID: 35011833
With plain javascript, see below. But it's simpler w/jquery

<script type="text/javascript">
	function checkButtons() {
		var buttons = document.getElementsByName("opt");
		for (var i = 0; i < buttons.length; i++) {
			var textElem  = document.getElementById("Text"+ buttons[i].value);
			var textValue = textElem.value.replace(/\s+/g, "");
			if (buttons[i].checked && textValue.length == 0) {
				alert("You must enter some text!");
				return false;
			}	
		}	
		return true;
	}
	
	function selButton() {
		var buttons = document.getElementsByName("opt");
		for (var i = 0; i < buttons.length; i++) {
			var textElem      = document.getElementById("Text"+ buttons[i].value);
			textElem.disabled = (buttons[i].checked ? false : true);
			textElem.value    = (buttons[i].checked ? textElem.value : "");
		}
	}	
</script>
<table align="center" >
<form name="name1" onSubmit="return checkButtons()">
<tr>
		<td width="10"><input type="radio" name="opt" value="1" onClick="selButton()"></td>
		<td align="left">
		 	<font face="Arial" size="2" color="#000000">
		 	Search Option 1
			</font>
		</td>
		<td>
			<input type="text" id="Text1" name="Text1" size="23" disabled>
		</td>
		<td>&nbsp;
			
		</td>
	</tr>
	<tr>
		<td width="10"><input type="radio" name="opt" value="2" onClick="selButton()"></td>
		<td align="left">
		 	<font face="Arial" size="2" color="#000000">
		 	Search Option 2
			</font>
		</td>
		<td>
			<input type="text" id="Text2" name="Text2" size="23" disabled>
		</td>
		<td>&nbsp;			
		</td>
	</tr>
	<tr>
		<td width="10"><input type="radio" name="opt" value="3" onClick="selButton()"></td>
		<td align="left">
		 	<font face="Arial" size="2" color="#000000">
		 		Search Option 3
			</font>
		</td>
		<td>
			<input type="text" id="Text3" name="Text3" size="23" disabled>
		</td>
				<td>&nbsp;			
		</td>
	</tr>

<tr>
		<td colspan="3" align="center"><br><input type="submit" name="search" alt="search" value="Search"></td>
	</tr>
</table>
</form>

Open in new window

0
 

Author Comment

by:Tpaul_10
ID: 35030615
Is there any way I can have different names to my text boxes? like prdname,prdnumber and obdNumber and still make this work?
0
 
LVL 52

Expert Comment

by:_agx_
ID: 35031905
Yeah, the text box names can be anything you want.  The javascript doesn't use the name. It uses the field ID:

   <input type="text" id="Text1"

 So it'll work fine as long as you don't change the ID's:
0
What Security Threats Are You Missing?

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

 

Author Comment

by:Tpaul_10
ID: 35039787
Thanks Agx and I have totally forgot that concept and will be helpful in the future. Also I need to do the following

1) When the user comes onto the page, none of the radio buttons are not seleceted and I need to
add a validation if none of the options are selected and htting the search button.
(Tried little bit and it's in the loop, so getting the message thrice.)

2) Also, how can I validate the individual text boxes other than blank values?
(ex: If I want to validate one of my text boxes to see the length and whether it is starting with numbers
79 or not)
function selButton() {
		var buttons = document.getElementsByName("option");
		for (var i = 0; i < buttons.length; i++) {
			var textElem      = document.getElementById("Text"+ buttons[i].value);
			textElem.disabled = (buttons[i].checked ? false : true);
			textElem.value    = (buttons[i].checked ? textElem.value : "");
		}
	}	
	

function validateForm()
	{
		var error = 0;
		var displaymsg = '';		
		var buttons = document.getElementsByName("option");
		
		for (var i = 0; i < buttons.length; i++) {
			var textElem  = document.getElementById("Text"+ buttons[i].value);
			var textValue = textElem.value.replace(/\s+/g, "");
			
			if (!buttons[i].checked) {
				error = 1;
				alert(error);
				displaymsg += 'Please selet one of the search options.';
			}
				
			if (buttons[i].checked && textValue.length == 0) {
				error = 1;
				alert(error);
				displaymsg += 'Please emter a value for your search.';
			}	
		}	
		
		if(error == 1) 
		{
			alert(displaymsg);
			return false;
		} 
		if (error != 1)
		{
		submitfuseAction('search');		
		}
	}

Open in new window

0
 
LVL 52

Accepted Solution

by:
_agx_ earned 500 total points
ID: 35040476
If you're trying to add this to a larger validation routine, I'd use variables instead.  ie Set a flag if at least 1 button was checked and if the "text" was supplied.  Then check the status. If the flags are false, display an error message.

#2 is doable, but it all depends on your criteria.  If it's more involved than just starts with "79" it's probably better off asked as a new question.

var buttons = document.getElementsByName("opt");
var foundSelectedButton = false;
var foundSearchText = true;
for (var i = 0; i < buttons.length; i++) {
	var textElem  = document.getElementById("Text"+ buttons[i].value);
	var textValue = textElem.value.replace(/\s+/g, "");
        if (buttons[i].checked) {
           foundSelectedButton = true;
	   if (textValue.length == 0) {
              foundSearchText = false;
	      break;
	   }
	}	
  }	

  if (!foundSelectedButton) {
      // show custom error message here
  }
  else if (!foundSearchText) {
       // show custom error message
  }

   return foundSelectedButton && foundSearchText;

Open in new window


0
 

Author Comment

by:Tpaul_10
ID: 35059746
Thanks for your help AGX and I have opened a new question for #2
Here is the link

http://www.experts-exchange.com/Web_Development/Web_Languages-Standards/Cold_Fusion_Markup_Language/Q_26868933.html
0

Featured Post

Maximize Your Threat Intelligence Reporting

Reporting is one of the most important and least talked about aspects of a world-class threat intelligence program. Here’s how to do it right.

Join & Write a Comment

This is an updated version of a post made on my blog over 3 years ago. It is unfortunately, still very relevant as we continue to see both SQLi (SQL injection) and XSS (cross site scripting) attacks hitting some of the most recognizable website and …
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

760 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

19 Experts available now in Live!

Get 1:1 Help Now