Solved

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

Posted on 2012-03-26
9
239 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
Comment Utility
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
Comment Utility
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
Comment Utility
(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
 

Author Comment

by:LelloLello
Comment Utility
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
How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

 

Author Comment

by:LelloLello
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
I will have add to add to this question a required field. 1. so please advise
0
 

Author Comment

by:LelloLello
Comment Utility
0

Featured Post

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

Suggested Solutions

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…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
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…

744 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

21 Experts available now in Live!

Get 1:1 Help Now