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

x
?
Solved

Validation Text boxes with Radio button options

Posted on 2011-03-07
11
Medium Priority
?
306 Views
Last Modified: 2012-05-11
This question is in reference with
http://www.experts-exchange.com/Web_Development/Web_Languages-Standards/Cold_Fusion_Markup_Language/Q_26856442.html

Basically I have three radio buttons and three text boxes associated with them and user can select only one option at a time for the search. With help from AGX (an expert who answered my previuos question), was able to get it done. (please see the code)

1) Now, I need to validate one of the text boxes to see whether it is a right item number or not and the length of the item is correct or not. (Other than the blank value)
2) I have a function which checks for a valid item number,length etc and how can I use that with these text boxes like
if (!isValidItemNumber(iTemNumber.value))
            {
                  alert("You must enter a valid Item Number.");
                  iTemNumber.focus();
                  return;
            }
3) Basically I need to validate only one text box other than balnk values by using the funcion I have and other two text boxes for only blank values.      

Thanks in advance      
<script language="JavaScript">
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 checkButtons()
	{
		var buttons = document.getElementsByName("option");
		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) {
  var		error = 1
      alert("Please select one of the options");
	  return;
  }
  else if (!foundSearchText) {
  	var		error = 1
       alert("Please enter a value for the search");
	    return;
  }

   return foundSelectedButton && foundSearchText; 
		
		if(error == 1) 
		{
			alert(displaymsg);
			return ;
		} 
		if (error != 1)
		{
		submitfuseAction('myFuseaction');		
		}
	}

</script>
<table align="center" >
<form name="name1" onSubmit="return checkButtons()">
<tr>
		<td width="10"><input type="radio" name="option" 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="iTemNumber" size="23" disabled>
		</td>
		<td>&nbsp;
			
		</td>
	</tr>
	<tr>
		<td width="10"><input type="radio" name="option" 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="option" 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
Comment
Question by:Tpaul_10
  • 7
  • 4
11 Comments
 
LVL 7

Expert Comment

by:Gewgala
ID: 35060107
if you indeed have a function named isValidItemNumber that returns a bool value, then the below should work just fine:

if (!isValidItemNumber(iTemNumber.value))
{
      alert("You must enter a valid Item Number.");
      iTemNumber.focus();
      return;
}

does your function declaration look like the following?

function isValidItemNumber(str)
{
      var valid = false;

      if (str.length > 5)
      {
             if (str == "valid value here" || str == "valid value here" || str == "valid value here")
                  valid = true;
      }

      return valid;
}

0
 
LVL 7

Expert Comment

by:Gewgala
ID: 35060118
Forgot to mention of course that the str.length > 5 is just an example, the 5 would of course need to be changed to accomodate your needs, but the example function I provided would work fine, and then yes you can call it the way you mentioned in your question, with a ! in front of it to check to see if the return value is false.
0
 

Author Comment

by:Tpaul_10
ID: 35060840
Thanks for the quick reply Gewgala.
As per your suggestion, I was able to get it worked by calling the funticon the way I have mentioned in my question.

But the problem is, if I select other radio button, I am still getting the item number alert.

Basically I need to get that alert message or validate itemnumber text box only when itemNumber text box is active or the related radio button is selected since the text box will be activeated by selecting the option.

Thanks in advance.
0
Independent Software Vendors: 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!

 
LVL 7

Accepted Solution

by:
Gewgala earned 2000 total points
ID: 35060940
how about something like this, define a new function that returns the special radio button:

function getSpecialRadioButton() {
        return document.getElementById("yourSpecialRadioButton");
}

Then in your method where you need to validate if the same radio button is selected, you can do:

if (getSpecialRadioButton().checked && !isValidItemNumber(iTemNumber.value))
{
      alert("You must enter a valid Item Number.");
      iTemNumber.focus();
      return;
}

Which will only execute that block if the special radio button is checked AND the textbox fails validation.
0
 

Author Comment

by:Tpaul_10
ID: 35061633
THANKS again. It worked and I have tried to do the similar thing for another text box and doesn't work.
Here is what I have tried

/*if (getSpecialRadioButton().checked && (document.myForm.itemName.value==''))

            {
                  alert("You must enter an Item Name.");
                  document.myForm.itemName.focus();
                  return;
            }            
*/            

But the alert is going to the else if part of the following code as i am trying to give a custom message instead of common alert for the other text boxes. Please correct me what I am doing wrong.

if (!foundSelectedButton) {
  var            error = 1
      alert("Please select one of the options");
        return;
  }
  else if (!foundSearchText) {
        var            error = 1
       alert("Please enter a value for the search");
          return;
  }

Thanks for your help.
0
 
LVL 7

Expert Comment

by:Gewgala
ID: 35061681
well, in the code you posted, I noticed that you are missing a ; at the end of error = 1 in both the if block and else if block.  This could just have been a bad copy, but can you make sure that the semi-colon ; is present following those lines?

example:

var error = 1;
0
 
LVL 7

Expert Comment

by:Gewgala
ID: 35061715
Also, where are you setting the value to the variable foundSelectedButton?  If the code execution is going to the else if block, that means that the if block is not validating to true.  You have the variable foundSelectedButton preceded by an exclamation mark, !, which means that the block will only execute when foundSelectedButton has a value of false.  If it fails to enter the if block it means foundSelectedButton is true.  Can you show the code where you are declaring/setting that variable?
0
 

Author Comment

by:Tpaul_10
ID: 35061798
I have corrected the ; issue and still the same.
please see the code below for foundSelectedButton and foundSearchText values.

Thanks
function validateForm()
	{
		var buttons = document.getElementsByName("option");
		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;
			   }
			}	
	  }

Open in new window

0
 
LVL 7

Expert Comment

by:Gewgala
ID: 35061870
Are you trying to access the "foundSelectedButton" outside of this function that sets its value?  

Does the following code reside in a different function than the one above?:

if (!foundSelectedButton) {
  var            error = 1;
      alert("Please select one of the options");
        return;
  }
  else if (!foundSearchText) {
        var            error = 1;
       alert("Please enter a value for the search");
          return;
  }
0
 

Author Comment

by:Tpaul_10
ID: 35062116
The above code outside the function that sets its value. Please see the code section to see how I have it.

Thanks for all your help
<script language="JavaScript">
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 checkButtons()
	{
		var buttons = document.getElementsByName("option");
		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) {
  var		error = 1
      alert("Please select one of the options");
	  return;
  }
  else if (!foundSearchText) {
  	var		error = 1
       alert("Please enter a value for the search");
	    return;
  }

   return foundSelectedButton && foundSearchText; 
		
		if(error == 1) 
		{
			alert(displaymsg);
			return ;
		} 
		if (error != 1)
		{
		submitfuseAction('myFuseaction');		
		}
	}

</script>

Open in new window

0
 
LVL 7

Expert Comment

by:Gewgala
ID: 35065299
Do you know for sure that your for loop is iterating, that the buttons.length conditional has a value greater than 0?  It looks to me like the problem is either 1 of 2 things:

1) Your for loop is not iterating and thus your foundSelectedButton variable is never being set to true

or

2) your buttons variable indeed holds radio button objects, but none of them are checked and thus your conditional if (buttons[ i ].checked) is never resulting in a true value.  This would cause your foundSelectedButton variable to also remain with an assigned false value.
0

Featured Post

New feature and membership benefit!

New feature! Upgrade and increase expert visibility of your issues with Priority Questions.

Question has a verified solution.

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

Having worked on larger scale sites, we found out that you are bound to look at more scalable solutions to integrating widgets, code snippets or complete applications and mesh them into functional sites, in any given composition. To share some of…
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 …
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…

824 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