Solved

Validation Text boxes with Radio button options

Posted on 2011-03-07
11
297 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
 
LVL 7

Accepted Solution

by:
Gewgala earned 500 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
Why You Should Analyze Threat Actor TTPs

After years of analyzing threat actor behavior, it’s become clear that at any given time there are specific tactics, techniques, and procedures (TTPs) that are particularly prevalent. By analyzing and understanding these TTPs, you can dramatically enhance your security program.

 
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

How to improve team productivity

Quip adds documents, spreadsheets, and tasklists to your Slack experience
- Elevate ideas to Quip docs
- Share Quip docs in Slack
- Get notified of changes to your docs
- Available on iOS/Android/Desktop/Web
- Online/Offline

Join & Write a Comment

Today, I was working on some optimization and spam-stopping techniques when I encountered Ben Nadel's post to reduce spam feature using Math (http://www.bennadel.com/blog/197-How-I-Stop-Spammers-On-My-ColdFusion-Blog.htm). While this method is not o…
I spent nearly three days trying to figure out how incorporate OAuth in Coldfusion for the Eventful API. Hopefully, this article will allow Coldfusion Programmers to buzz through the API when they need to. Basically, what this script does is authori…
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…

746 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

11 Experts available now in Live!

Get 1:1 Help Now