[Webinar] Learn how to a build a cloud-first strategyRegister Now

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

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

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
LelloLello
Asked:
LelloLello
  • 4
  • 3
  • 2
1 Solution
 
SidFishesCommented:
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
 
SidFishesCommented:
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
 
designatedinitializerCommented:
(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
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!

 
LelloLelloAuthor Commented:
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
 
LelloLelloAuthor Commented:
Designed: I want that field to be mandataroy too, do you have any script?
0
 
designatedinitializerCommented:
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
 
designatedinitializerCommented:
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
 
LelloLelloAuthor Commented:
I will have add to add to this question a required field. 1. so please advise
0
 
LelloLelloAuthor Commented:
0

Featured Post

Keep up with what's happening at Experts Exchange!

Sign up to receive Decoded, a new monthly digest with product updates, feature release info, continuing education opportunities, and more.

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