Solved

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

Posted on 2012-03-26
9
255 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
Resolve Critical IT Incidents Fast

If your data, services or processes become compromised, your organization can suffer damage in just minutes and how fast you communicate during a major IT incident is everything. Learn how to immediately identify incidents & best practices to resolve them quickly and effectively.

 

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

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

The task A number given should be formatted for easy reading by separating digits into triads. Format must be made inline via JavaScript, i.e., frameworks / functions are not welcome. So let’s take a number like this “12345678.91¿ and format i…
This article discusses how to create an extensible mechanism for linked drop downs.
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…

789 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