asked on

Validating the text boxes with radio buttons

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

_agx_

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

Tpaul_10

ASKER

Is there any way I can have different names to my text boxes? like prdname,prdnumber and obdNumber and still make this work?

_agx_

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:

Tpaul_10

ASKER

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

ASKER CERTIFIED SOLUTION

_agx_

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Tpaul_10

ASKER

Thanks for your help AGX and I have opened a new question for #2
Here is the link

https://www.experts-exchange.com/questions/26868933/Validation-Text-boxes-with-Radio-button-options.html