Solved

radio button, if he choose no a text box will show how?

Posted on 2012-03-26
9
261 Views
Last Modified: 2012-03-27
Would you teach a course?

( ) Yes  () No
please specify: [                           ]


<input type="radio" name="contactMe" id="ContactMeYes" value="Yes">&nbsp;<label for="ContactMeYes">Yes</label>

<input type="radio" name="ContactMe" id="ContactMeNo" value="No">&nbsp;<label for="ContactMeNo">No <br>

(please specify)</label>
<input type="text" name="ContactMeSpecify" id="ContactMeSpecify" value="" maxlength="255" size="30" style="width: 200px;">
0
Comment
Question by:LelloLello
  • 4
  • 3
  • 2
9 Comments
 
LVL 36

Expert Comment

by:SidFishes
ID: 37767830
There are all sorts of other things you can do but the easiest is just the following

<input type="radio" name="contactMe" id="ContactMeYes" value="Yes">&nbsp;<label for="ContactMeYes">Yes</label>

<input type="radio" name="ContactMe" onClick="getElementById('hiddenDiv').style.display='block';" id="ContactMeNo" value="No">&nbsp;

<div id="hiddenDiv" style="display:none;">
<label for="ContactMeNo">No <br>
(please specify)</label>
<input type="text"  name="ContactMeSpecify" id="ContactMeSpecify" value="" maxlength="255" size="30" style="width: 200px;">
</div>
0
 
LVL 36

Expert Comment

by:SidFishes
ID: 37767849
oops not quite right. the NO label was hidden

try this
<input type="radio" name="contactMe" id="ContactMeYes" value="Yes">&nbsp;<label for="ContactMeYes">Yes</label>

<input type="radio" name="ContactMe" onClick="getElementById('hiddenDiv').style.display='block';" id="ContactMeNo" value="No">&nbsp;
<label for="ContactMeNo">No <br></label>
<div id="hiddenDiv" style="display:none;">

(please specify)
<input type="text"  name="ContactMeSpecify" id="ContactMeSpecify" value="" maxlength="255" size="30" style="width: 200px;">
</div>
0
 
LVL 7

Expert Comment

by:designatedinitializer
ID: 37767861
(Notice you've got several syntax errors and typos in your listing!)

This is how we do it:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Radio buttons</title>

<script type="text/javascript">
function checkme(ele){
	var inputbox = document.getElementById("ContactMeSpecify");
	if(ele.value=="Yes"){
		inputbox.style.display="block";
	}else{
		inputbox.style.display="none";
	}
}
</script>
</head>
<body>
<label><input type="radio" name="contactMe" id="contactMeYes" value="Yes" onClick="checkme(this);"/>Yes</label>
<label><input type="radio" name="contactMe" id="contactMeNo" value="No" onClick="checkme(this);"/>No</label><br>

<input type="text" name="ContactMeSpecify" id="ContactMeSpecify" value="" maxlength="255" size="30" style="width: 200px;display:none;">

</body>
</html>

Open in new window

0
Space-Age Communications Transitions to DevOps

ViaSat, a global provider of satellite and wireless communications, securely connects businesses, governments, and organizations to the Internet. Learn how ViaSat’s Network Solutions Engineer, drove the transition from a traditional network support to a DevOps-centric model.

 

Author Comment

by:LelloLello
ID: 37767949
designatedinistailiser:

the label "please specify" is showing without.  I want it to show only if the click yes.   Pls adjust the code below.


<input type="radio" name="contactMe" id="contactMeYes" value="Yes" onClick="checkme(this);"/>&nbsp;<label for="ContactMeYes">Yes</label>
                                          <input type="radio" name="contactMe" id="contactMeNo" value="No" onClick="checkme(this);"/>No</label>
                                          &nbsp;&nbsp;<br>
                            Please specify
                                          <input type="text" name="ContactMeSpecify" id="ContactMeSpecify" value="" maxlength="255" size="30" style="width: 200px;display:none;">
0
 

Author Comment

by:LelloLello
ID: 37767962
Designed: I want that field to be mandataroy too, do you have any script?
0
 
LVL 7

Accepted Solution

by:
designatedinitializer earned 500 total points
ID: 37768345
there you go.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Radio buttons</title>

<script type="text/javascript">
function checkme(ele){
	var inputbox = document.getElementById("specify");
	if(ele.value=="Yes"){
		inputbox.style.display="block";
		var er = document.getElementById("error");
		er.style.display="none";
	}else{
		inputbox.style.display="none";
	}
}
function checksubmit(f){
	var radio = f.contactMeYes.value;
	var inputbox = f.ContactMeSpecify.value;
	if(radio=="Yes" && inputbox==""){
		var er = document.getElementById("error");
		er.style.display="inline";
		return false;
	}else{
		var er = document.getElementById("error");
		er.style.display="none";
		return true;
	}
}
</script>
</head>
<body>
<form id="form1" name="form1" onSubmit="return checksubmit(this);" action="" method="post">
<label><input type="radio" name="contactMe" id="contactMeYes" value="Yes" onClick="checkme(this);"/>Yes</label>
<label><input type="radio" name="contactMe" id="contactMeNo" value="No" onClick="checkme(this);"/>No</label><br>
<div id="specify" style="display:none;">
<label>Please specify:
<input type="text" name="ContactMeSpecify" id="ContactMeSpecify" value="" maxlength="255" size="30" style="width: 200px;">
</label>
<p id="error" style="color:red;display:none;">Required input! Or else... click "No" above...</p>
</div>
<input type="submit"/>
</form>
</body>
</html>

Open in new window

0
 
LVL 7

Expert Comment

by:designatedinitializer
ID: 37768358
when the event "onSubmit" returns false (which is delegated in that second function), the form is NOT sent to the server. That's how you go about form validation in JS. (without jQuery... with jQuery you've got a lot more options and functionality).
0
 

Author Comment

by:LelloLello
ID: 37773068
I will have add to add to this question a required field. 1. so please advise
0
 

Author Comment

by:LelloLello
ID: 37773124
0

Featured Post

How our DevOps Teams Maximize Uptime

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us. Read the use case whitepaper.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
CSS: Forcing Tables Where the Width is Greater than 1000px to Behave Like Width: 100% 8 46
Debugging Html 8 31
JQuery conflicts/syntax issue 4 23
Hide and Unhide Table 6 24
Hi. There are several upload tutorials using jquery and coldfusion. I found a very interesting one here Upload Your Files using Jquery & ColdFusion and Preview them (http://www.randhawaworld.com/) . I did keep the main js functions but made sever…
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…

685 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