Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

Validating the text boxes with radio buttons

Posted on 2011-03-01
6
Medium Priority
?
302 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
Linux Academy Android App Now Supports Chromecast

We have some fantastic news for our Android fans. We’re so excited to announce that the Linux Academy Android app is now available with Chromecast support. That’s right – simply download the latest update of the Linux Academy App and start casting your favorite course videos!

 

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 2000 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

CHALLENGE LAB: Troubleshooting Connectivity Issues

Goal: Fix the connectivity issue in the lab's AWS environment so that you can SSH into the provided EC2 instance.  

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Hi, Even though I have created this Tutorial on My personal Blog, Some people might not able to find my website, So here i am posting it again Today, from the topic it is very clear that i will be showing you here the very basic usage of how we …
This article discusses how to implement server side field validation and display customized error messages to the client.
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…

664 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