Go Premium for a chance to win a PS4. Enter to Win

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 304
  • Last Modified:

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

0
Tpaul_10
Asked:
Tpaul_10
  • 3
  • 3
1 Solution
 
_agx_Commented:
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
 
Tpaul_10Author Commented:
Is there any way I can have different names to my text boxes? like prdname,prdnumber and obdNumber and still make this work?
0
 
_agx_Commented:
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
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
Tpaul_10Author Commented:
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
 
_agx_Commented:
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
 
Tpaul_10Author Commented:
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

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

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