Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations strongm on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

display more info if radio button active 2

Status
Not open for further replies.
derwent

derwent

Programmer
May 5, 2004
428
GB
I have a form with certain fields.

Is it possible for if the user selects a radio button, an extra set of questions pops up, shunting down the rest of the form below it.

eg.

Name
address
Do you want to add more details [yes][no]
postcode

if they select yes to the more details question...

Name
Address
Do you want to add more details [yes][no]
More Details 1
More Details 1
postcode


thanks folks
 
Sort by date Sort by votes
This one's easy.

Put the More Details into it's own DIV and set the initial display style of the div to hidden.

On the onclick event of both radio buttons, call a function that will show / hide the div.

Example below:

Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<script language="javascript">
<!--
function show() {
    document.getElementById('more_details').style.display = '';
}

function hide() {
    document.getElementById('more_details').style.display = 'none;';
}
-->
</script>
</HEAD>

<BODY>
<form name="the_form">
Name: <input type="text" name="tb1"><br>
Address: <input type="text" name="tb2"><br>
More Details? <input type="radio" name="details" value="yes" onclick="show();">Yes
<input type="radio" name="details" value="no" onclick="hide();">No<br>

<div id="more_details" style="display: none;">
Phone: <input type="text" name="tb3"><br>
ZipCode: <input type="text" name="tb3"><br>
</div>

Another Field: <input type="text" name="tb3"><br>
<input type="submit">
</form>
</BODY>
</HTML>

*cLFlaVA
----------------------------
Lois: "Peter, you're drunk!"
Peter: "I'm not drunk, I'm just exhausted from stayin' up all night drinking!
 
Upvote 0 Downvote
If you want to avoid using functions for whatever reason, this can aslo be done inline, directly from the radio buttons, like so:

Code: 
<input type="radio" name="details" value="yes" onclick="document.getElementById('more_details').style.display='';">Yes
<input type="radio" name="details" value="no" onclick="document.getElementById('more_details').style.display='none';">

*cLFlaVA
----------------------------
Lois: "Peter, you're drunk!"
Peter: "I'm not drunk, I'm just exhausted from stayin' up all night drinking!
 
Upvote 0 Downvote
Derwent, that is very possible. You will just have to hide the elements until "yes" is selected. There's 2 ways to do this. The hidden property will hide the items on the page, but it will not adjust the text around it. (More as if it just disappeared) However, the display property will hide the items on the page, and then adjust the text around it accordingly. Here's an example to get you started:
Code: 
<html>
<head>
<script language=javascript>
function showHide(obj, bool) {
   obj.style.display = (bool) ? "" : "none";
}
</script>
</head>
<body>
<form name=blahForm>
<input type=text>name<br>
<input type=text>address<br>
Would you like to add more details?
<input type=radio name=blahRadio onclick='showHide(document.getElementById("blahSpan"), true)'>Yes
<input type=radio name=blahRadio onclick='showHide(document.getElementById("blahSpan"), false)' checked>No
<br>
<span id=blahSpan style='display:none'>
<input type=text>more details1<br>
<input type=text>more details2<br>
</span>
<input type=text>postcode<br>
</form>
</body>
</html>

-kaht

banghead.gif
 
Upvote 0 Downvote
guess I was a bit slow on that one

-kaht

banghead.gif
 
Upvote 0 Downvote
you my friend are a genious!!

I`m building up a good javascript library and learning stuff too.

If you live near Notts I`ll get you a pint, otherwise a star.
 
Upvote 0 Downvote
unfortunately, I don't even know what country Notts is in, as I am an ignorant American. Might make the trip, though, for a pint (or six).

*cLFlaVA
----------------------------
Lois: "Peter, you're drunk!"
Peter: "I'm not drunk, I'm just exhausted from stayin' up all night drinking!
 
Upvote 0 Downvote
kaht, I went for your option because it was slightly less code. I copied and pasted the code exactly and it worked, however when I put this onto my form page, it doesn't. I don`t even get a javascript error.

Here's the page code:

Code: 
<%@ LANGUAGE =VBScript %>
<%

option explicit
%>
<!--#INCLUDE FILE="../../asp/function.asa"-->
<!--#INCLUDE file="../../asp/ums.asa"-->
<!--#INCLUDE file="../../asp/oms.asa"-->

<%
Connect
%>




<html>
<head>
<title>Training Request Form</title>
<meta name="Microsoft Border" content="none">
<LINK REL="STYLESHEET" HREF="../../htm/mainclass.css" MEDIA="screen" TYPE="text/css"> 
<script language="JavaScript">
//resize window to full screen after coming from small request absence screen
window.onload = maxWindow;

function maxWindow()
{
window.moveTo(0,0);


if (document.all)
{
  top.window.resizeTo(screen.availWidth,screen.availHeight);
}

else if (document.layers||document.getElementById)
{
  if (top.window.outerHeight<screen.availHeight||top.window.outerWidth<screen.availWidth)
  {
    top.window.outerHeight = screen.availHeight;
    top.window.outerWidth = screen.availWidth;
  }
}
}

</script>

<script language="JavaScript" type="text/JavaScript">
function fnValidateForm(objForm){
	switch(objForm.name){

			//validation
		case "trainingForm":
			var aryMandatory=[["fullname","Please enter your name","text"],["dept","Please enter your department","text"],["job","Please enter your job","text"],["organ","Please enter your organisation","text"],["venue","Please enter your venue","text"],["duration","Please enter your duration","text"],["costs","Please enter your costs","text"]];
			break;
		
		//can have another form on same validation code page
		case "emailToAFriend":
			var aryMandatory=[["emailTo","Please enter your friends email address.","text"],["emailFrom","Please enter your email address.","text"]];
			break;
			
		default:
			// Just submit the form and don't worry.
			return true;
	}
	
	
	// did you know FORM
	var aryFormat=new Array();

	var strErr="";
	for(x=0;x<aryMandatory.length;x++){
		switch(aryMandatory[x][2]){
			case "text":
				if(objForm[aryMandatory[x][0]].value == ""){
					if(aryMandatory[x][0] == "cc_software_level" || aryMandatory[x][0] == "number_agents") {
						if(objForm['call_center_installed'].selectedIndex == 1){
							// If YES selected then error
							strErr+="\n: "+aryMandatory[x][1];
						}
					}
					else{
						strErr+="\n: "+aryMandatory[x][1];
					}
				}
				break;
			case "select":
				if(objForm[aryMandatory[x][0]].selectedIndex == 0){
					strErr+="\n: "+aryMandatory[x][1];
				}
				break;
			case "email":
				strEmail=objForm[aryMandatory[x][0]].value;
				if(strEmail == "" || strEmail.indexOf("@") == -1){
					strErr+="\n: "+aryMandatory[x][1];
				}
				break;
		}
	};
	// Validate fields that when not blank need checking
	if(aryFormat.length > 0){
		var regexpDate=new RegExp(/\d{1,2}\/\d{1,2}\/\d{2}/);
		
		for(x=0;x<aryFormat.length;x++){
			switch(aryFormat[x][2]){
				case "date":
					if(objForm[aryFormat[x][0]].value != ""){
						if(regexpDate.test(objForm[aryFormat[x][0]].value)){
							txtDate=objForm[aryFormat[x][0]].value;
							aryDate=txtDate.split("/");
							if(aryDate[0] > 31 || aryDate[0] < 1 || aryDate[1] >12 || aryDate[1] < 1 || aryDate[2] < 03){ 
								strErr+="\n: "+aryFormat[x][1]+ " [e.g. 20/01/03]";
							}
						}
						else{
							strErr+="\n: "+aryFormat[x][1];
						};
					}
					break;
			}
		}
	}

	if(strErr != ""){
		alert("You have missed some fields...\n--------------------"+strErr);
		return false;
	};
	return true;
}

</script>
<script language=javascript>
function showHide(obj, bool) {
   obj.style.display = (bool) ? "" : "none";
}
</script>
</HEAD>
<BODY style='font-family: arial; font-size: 10px'>
<%
'Grab user name
Dim user
Dim SQL
Dim RS
Dim usersname
Dim sUserUID

		user=GetSession("gUserUID")
	' response.write user
	
SQL = "SELECT * FROM tUserDirectory WHERE useruid = '" & user & "'"
set RS = server.CreateObject("ADODB.RECORDSET")
RS.open SQL,objconn,3,3

usersname = RS("firstname") + " " + RS("surname")

'for manager contact
sUserUID=RS("useruid")

%>
<form action='process.asp' method='post' onSubmit="return fnValidateForm(this);" name="trainingForm">
<table width="100%" border="1" cellspacing="0" cellpadding="3">
<tr>
<td align="center" bordercolor="#000000"><b style='font-size: 18px'>Training / Development Request Form</b></td>
</tr>
</table>
<br clear=all>
<table width="100%" border="0" cellspacing="3" cellpadding="3" style='border: 1px solid #000000'>
<tr>
<td><b>Name:</b> <input name="fullname" type="text" value="<%=usersname%>"><br>
<b>Department:</b> <input name="dept" type="text"></td>
<td><b>Date:</b> <input name="date" type="text" value="from (yyyymmdd)"> <input name="dateto" type="text" value="to (yyyymmdd)"><br>
<b>Job Title:</b> <input name="job" type="text"></td>
</tr>
</table>
<br clear=all>
<table width="100%" border="0" cellspacing="3" cellpadding="3" style='border: 1px solid #000000'>
<tr>
<td colspan="2"><b>Planned Training / Development Activity</b><br>
<br></td>
</tr>
<tr>
<td width="25%" valign="top">Who with / name of organisation</td>
<td width="75%"><textarea name="organ" rows="2"></textarea></td>
</tr>
<tr>
<td valign="top">Where / venue</td>
<td><textarea name="venue" rows="4" id="venue"></textarea></td>
</tr>
<tr>
<td valign="top">Duration (in days, i.e. 1)</td>
<td><input name="duration" type="text" id="duration"></td>
</tr>
<tr>
<td valign="top">Costs</td>
<td><input name="costs" type="text" id="costs" value="£"></td>
</tr>
<tr>
<td valign="top">Do you require train tickets?</td>
<td>
<input type="radio" name="train" value="yes" onclick='showHide(document.getElementById("trainSection"), true)'> yes
<input type="radio" name="train" value="no" onclick='showHide(document.getElementById("trainSection"), false)' checked>no</td>
</tr>








<span id=trainSection style='display:none'>
<tr>
<td colspan=2>
sdfsdf


</td>
</tr>
</span>












<tr>
<td colspan="2" valign="top"><p>Objectives (what do you intend to learn from this training event?)<br>
1. 
<textarea name="obj1" cols="60" rows="4" id="obj1"></textarea>
<br>
2. 
<textarea name="obj2" cols="60" rows="4" id="obj2"></textarea>
<br>
3. 
<textarea name="obj3" cols="60" rows="4" id="obj3"></textarea>
</p></td>
</tr>
<tr>
<td colspan="2" valign="top">I agree that the information above is correct to the best of my knowledge 
<input type="radio" name="agree" value="yes"></td>
</tr>
</table>


<%

dim objUser
dim objManager
	
Set objUser=new CUser
Set objManager=new CUser
	
objUser.LoadUser(sUserUID)
	
if objUser.m_sManagerUID<>"" then
objManager.LoadUser(objUser.m_sManagerUID)
end if
%>
<input type="hidden" name="manager" value="<%=objManager.m_sEmail%>">
<input type="hidden" name="managerID" value="<%=objUser.m_sManagerUID%>">
<input type="hidden" name="user" value="<%=objUser.m_sEmail%>">
<input type="submit" value="Submit">
</form>


</BODY>
</HTML>

<%    
    Disconnect
%>

any ideas why it isn`t working [sad]
Thanks
 
Upvote 0 Downvote
Things work a little different when you're dealing with tables, however the solution is fairly simple.

Change this:
Code: 
<span id=trainSection style='display:none'>
<tr>
<td colspan=2>
sdfsdf
</td>
</tr>
</span>
to this:
Code: 
<tr id=trainSection style='display:none'>
<td colspan=2>
sdfsdf
</td>
</tr>

-kaht

banghead.gif
 
Upvote 0 Downvote
thank you thank you thank you thank you thank you thank you thank you thank you thank you thank you thank you thank you thank you thank you thank you thank you thank you thank you thank you thank you thank you

sorry for the spam, but THANK YOU
 
Upvote 0 Downvote
For the sake of everyone else I'll just say it once.
You're welcome. [lol]

-kaht

banghead.gif
 
Upvote 0 Downvote
kaht,
I needed to hide some inputs (answers) from some calculations until the answers were calculated.
I used your code for hiding / showing the information (in a table).

I used the calculate button to turn on the answers (show) and the reset button to turn off (hide).
This is worth a star.
Thanks Oak


Oak
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

berkshirea
  • Locked
  • Question
Radio Button Clicked, Another Radio Becomes Mandatory 1
Replies
2
Views
307
berkshirea
berkshirea
Rayj0000
  • Locked
  • Question
How to disable an html button for subsequent website visitors?
Replies
0
Views
275
Rayj0000
Rayj0000
TheLazyPig
  • Locked
  • Question
Disable radio button after edit button click
Replies
1
Views
108
xwb
xwb
mayamanako
  • Locked
  • Question
Only Visible Radio Buttons Are Required 1
Replies
4
Views
117
mayamanako
mayamanako
chikwendu
  • Locked
  • Question
How do I display an extra input box for editing an existing data?
Replies
1
Views
104
chikwendu
chikwendu

Part and Inventory Search

Sponsor

Back
Top