Hi it's me again.
I'm making a contact form.
The thing where Iam stuck is that, I want to create a dropdown menu (that is not difficult), but the option people can select are for example 1, 2, 3, 4, 5. With each number 2 textfields need to appear. (for name & surname). But here's the tricky part, when they select for example number 2, 2 extra textfields need to appear (for extra person name & surname).
And number 3, 3 extra, and so on......
I hope you understand what I'm trying to do, hope someone can help.
Thanks already guys.
Here is the code I had created with tables (and some help from you guys):
Below this code I will post the new code I want to use (with div layers), hope the same thing is pssible.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
/*<![CDATA[*/
..hide {
display:none;
}
/*]]>*/
</style>
<script language="JavaScript" type="text/javascript">
/*<![CDATA[*/
function ShowTR(sel){
var row,table=sel;
while (table.parentNode&&table.nodeName!='TABLE'){
if (!row&&table.nodeName=='TR') row=table;
table=table.parentNode;
}
var rows=table.rows;
for (var zxc0=row.rowIndex+4;zxc0<row.rowIndex+14;zxc0++){
rows[zxc0].style.display=(zxc0-row.rowIndex-4<sel.selectedIndex*2)?'block':'none';
}
}
/*]]>*/
</script>
</head>
<body>
<form action="process.php" method="post" name="inschrijven" id="inschrijven">
<table width="450" border="0">
<tr>
<td><strong> Ik boek voor de volgende reis: </strong></td>
<td><input name="reis" type="text" id="freis" /></td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td><label>Reisdatum:</label></td>
<td><input name="reisdatum" type="text" id="freisdatum" /></td>
</tr>
<tr>
<td><label>Vertrekdatum:</label></td>
<td><input name="vertrekdatum" type="text" id="freisdatum" /></td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td><strong> Gegevens van de hoofdboeker:</strong></td>
<td> </td>
</tr>
<tr>
<td><label>Naam:</label></td>
<td><input name="naam" type="text" id="fnaam" /></td>
</tr>
<tr>
<td><label>Achternaam:</label></td>
<td><input name="achternaam" type="text" id="fachternaam" /></td>
</tr>
<tr>
<td><label>Adres:</label></td>
<td><input name="adres" type="text" id="fadres" /></td>
</tr>
<tr>
<td><label>Postcode:</label></td>
<td><input name="postcode" type="text" id="fpostcode" /></td>
</tr>
<tr>
<td><label>Woonplaats:</label></td>
<td><input name="woonplaats" type="text" id="fwoonplaats" /></td>
</tr>
<tr>
<td><label>Telefoon:</label></td>
<td><input name="telefoon" type="text" id="ftelefoon" /></td>
</tr>
<tr>
<td><label>Email:</label></td>
<td><input name="email" type="text" id="femail" /></td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td><strong>Hoeveel personen:</strong></td>
<td> </td>
</tr>
<tr>
<td><label>Volwassenen:</label></td>
<td>
<select name="volwassenen" size="1" id="fvolwassenen" onChange="ShowTR(this);">
<option value="nul" selected="selected" >0</option>
<option value="een">1</option>
<option value="twee">2</option>
<option value="drie">3</option>
<option value="vier">4</option>
<option value="vijf">5</option>
</select></td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td><strong>Mede-reizigers per persoon:</strong></td>
<td> </td>
</tr>
<tr class="hide">
<td><label>Naam persoon 1:</label></td>
<td><input name="naam1" type="text" id="fnaam2" /></td>
</tr>
<tr class="hide">
<td><label>Achternaam persoon 1:</label></td>
<td><input name="achternaam1" type="text" id="fachternaam2" /></td>
</tr>
<tr class="hide">
<td><label>Naam persoon 2:</label></td>
<td><input name="naam2" type="text" id="fnaam2" /></td>
</tr>
<tr class="hide">
<td><label>Achternaam persoon 2:</label></td>
<td><input name="achternaam2" type="text" id="fachternaam2" /></td>
</tr>
<tr class="hide">
<td><label>Naam persoon 3:</label></td>
<td><input name="naam3" type="text" id="fnaam2" /></td>
</tr>
<tr class="hide">
<td><label>Achternaam persoon 3:</label></td>
<td><input name="achternaam3" type="text" id="fachternaam2" /></td>
</tr>
<tr class="hide">
<td><label>Naam persoon 4:</label></td>
<td><input name="naam4" type="text" id="fnaam2" /></td>
</tr>
<tr class="hide">
<td><label>Achternaam persoon 4:</label></td>
<td><input name="achternaam4" type="text" id="fachternaam2" /></td>
</tr>
<tr class="hide">
<td><label>Naam persoon 5:</label></td>
<td><input name="naam5" type="text" id="fnaam2" /></td>
</tr>
<tr class="hide">
<td><label>Achternaam persoon 5:</label></td>
<td><input name="achternaam5" type="text" id="fachternaam2" /></td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td><strong>Indien van toepassing:</strong></td>
<td> </td>
</tr>
<tr>
<td><label>Ik boek deze reis</label></td>
<td><input name="wel" type="radio" value="wel" /> wel
<input name="niet" type="radio" value="niet" />
niet, als privé-reis.</td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td><strong>Overige informatie<br /> en/of dieetwensen:</strong></td>
<td> </td>
</tr>
<tr>
<td><textarea name="overige" cols="35" rows="5" id="foverige"></textarea></td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td><div align="right">
<input name="Verzenden" type="submit" value="Verzenden" />
</div></td>
<td><input name="Velden legen" type="reset" value="Legen" /></td>
</tr>
</table>
</form>
</body>
</html>
Here the code with div layers: (bold is the part that need to hide/show, with the dropdown just above it).
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Inschrijving - created by phpFormGenerator</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"><link href="style.css" rel="stylesheet" type="text/css">
<!-- calendar stuff -->
<link rel="stylesheet" type="text/css" href="calendar/calendar-blue2.css" />
<script type="text/javascript" src="calendar/calendar.js"></script>
<script type="text/javascript" src="calendar/calendar-en.js"></script>
<script type="text/javascript" src="calendar/calendar-setup.js"></script>
<!-- END calendar stuff -->
<!-- expand/collapse function -->
<SCRIPT type=text/javascript>
<!--
function collapseElem(obj)
{
var el = document.getElementById(obj);
el.style.display = 'none';
}
function expandElem(obj)
{
var el = document.getElementById(obj);
el.style.display = '';
}
//-->
</SCRIPT>
<!-- expand/collapse function -->
<!-- expand/collapse function -->
<SCRIPT type=text/javascript>
<!--
// collapse all elements, except the first one
function collapseAll()
{
var numFormPages = 1;
for(i=2; i <= numFormPages; i++)
{
currPageId = ('mainForm_' + i);
collapseElem(currPageId);
}
}
//-->
</SCRIPT>
<!-- expand/collapse function -->
<!-- validate -->
<SCRIPT type=text/javascript>
<!--
function validateField(fieldId, fieldBoxId, fieldType, required)
{
fieldBox = document.getElementById(fieldBoxId);
fieldObj = document.getElementById(fieldId);
if(fieldType == 'text' || fieldType == 'textarea' || fieldType == 'password' || fieldType == 'file' || fieldType == 'phone' || fieldType == 'website')
{
if(required == 1 && fieldObj.value == '')
{
fieldObj.setAttribute("class","mainFormError");
fieldObj.setAttribute("className","mainFormError");
fieldObj.focus();
return false;
}
}
else if(fieldType == 'menu' || fieldType == 'country' || fieldType == 'state')
{
if(required == 1 && fieldObj.selectedIndex == 0)
{
fieldObj.setAttribute("class","mainFormError");
fieldObj.setAttribute("className","mainFormError");
fieldObj.focus();
return false;
}
}
else if(fieldType == 'email')
{
if((required == 1 && fieldObj.value=='') || (fieldObj.value!='' && !validate_email(fieldObj.value)))
{
fieldObj.setAttribute("class","mainFormError");
fieldObj.setAttribute("className","mainFormError");
fieldObj.focus();
return false;
}
}
}
function validate_email(emailStr)
{
apos=emailStr.indexOf("@");
dotpos=emailStr.lastIndexOf(".");
if (apos<1||dotpos-apos<2)
{
return false;
}
else
{
return true;
}
}
function validateDate(fieldId, fieldBoxId, fieldType, required, minDateStr, maxDateStr)
{
retValue = true;
fieldBox = document.getElementById(fieldBoxId);
fieldObj = document.getElementById(fieldId);
dateStr = fieldObj.value;
if(required == 0 && dateStr == '')
{
return true;
}
if(dateStr.charAt(2) != '/' || dateStr.charAt(5) != '/' || dateStr.length != 10)
{
retValue = false;
}
else // format's okay; check max, min
{
currDays = parseInt(dateStr.substr(0,2),10) + parseInt(dateStr.substr(3,2),10)*30 + parseInt(dateStr.substr(6,4),10)*365;
//alert(currDays);
if(maxDateStr != '')
{
maxDays = parseInt(maxDateStr.substr(0,2),10) + parseInt(maxDateStr.substr(3,2),10)*30 + parseInt(maxDateStr.substr(6,4),10)*365;
//alert(maxDays);
if(currDays > maxDays)
retValue = false;
}
if(minDateStr != '')
{
minDays = parseInt(minDateStr.substr(0,2),10) + parseInt(minDateStr.substr(3,2),10)*30 + parseInt(minDateStr.substr(6,4),10)*365;
//alert(minDays);
if(currDays < minDays)
retValue = false;
}
}
if(retValue == false)
{
fieldObj.setAttribute("class","mainFormError");
fieldObj.setAttribute("className","mainFormError");
fieldObj.focus();
return false;
}
}
//-->
</SCRIPT>
<!-- end validate -->
</head>
<body onLoad="collapseAll()">
<div id="mainForm">
<div id="formHeader">
<h2 class="formInfo">Inschrijving</h2>
<p class="formInfo"></p>
</div>
<BR/><!-- begin form -->
<form method=post enctype=multipart/form-data action=processor.php onSubmit="return validatePage1();"><ul class=mainForm id="mainForm_1">
<li class="mainForm" id="fieldBox_1">
<label class="formFieldQuestion">Ik boek voor de volgende reis: * <a class=info href=#><img src=imgs/tip_small.png border=0><span class=infobox>Voor welke reis wilt u zich inschrijven.</span></a></label><input class=mainForm type=text name=field_1 id=field_1 size='20' value=''></li>
<li class="mainForm" id="fieldBox_2">
<label class="formFieldQuestion">Reisdatum: * <a class=info href=#><img src=imgs/tip_small.png border=0><span class=infobox>Wat is de reisdatum?</span></a></label><input type=text name=field_2 id=field_2 value=""><button type=reset class=calendarStyle id=fieldDateTrigger_2></button><SCRIPT type='text/javascript'> Calendar.setup({
inputField : "field_2",
ifFormat : "%m/%d/%Y",
showsTime : false,
button : "fieldDateTrigger_2",
singleClick : true,
step : 1
});</SCRIPT></li>
<li class="mainForm" id="fieldBox_3">
<label class="formFieldQuestion">Vertrekdatum: * <a class=info href=#><img src=imgs/tip_small.png border=0><span class=infobox>Wat is de vertrekdatum?</span></a></label><input type=text name=field_3 id=field_3 value=""><button type=reset class=calendarStyle id=fieldDateTrigger_3></button><SCRIPT type='text/javascript'> Calendar.setup({
inputField : "field_3",
ifFormat : "%m/%d/%Y",
showsTime : false,
button : "fieldDateTrigger_3",
singleClick : true,
step : 1
});</SCRIPT></li>
<li class="mainForm" id="fieldBox_4">
<label class="formFieldQuestion">Naam: * <a class=info href=#><img src=imgs/tip_small.png border=0><span class=infobox>Voornaam?</span></a></label><input class=mainForm type=text name=field_4 id=field_4 size='20' value=''></li>
<li class="mainForm" id="fieldBox_5">
<label class="formFieldQuestion">Achternaam: * <a class=info href=#><img src=imgs/tip_small.png border=0><span class=infobox>Achternaam?</span></a></label><input class=mainForm type=text name=field_5 id=field_5 size='20' value=''></li>
<li class="mainForm" id="fieldBox_6">
<label class="formFieldQuestion">Adres: * <a class=info href=#><img src=imgs/tip_small.png border=0><span class=infobox>Adres?</span></a></label><input class=mainForm type=text name=field_6 id=field_6 size='20' value=''></li>
<li class="mainForm" id="fieldBox_7">
<label class="formFieldQuestion">Postcode: <a class=info href=#><img src=imgs/tip_small.png border=0><span class=infobox>Postcode?</span></a></label><input class=mainForm type=text name=field_7 id=field_7 size='20' value=''></li>
<li class="mainForm" id="fieldBox_8">
<label class="formFieldQuestion">Woonplaats: <a class=info href=#><img src=imgs/tip_small.png border=0><span class=infobox>Woonplaats?</span></a></label><input class=mainForm type=text name=field_8 id=field_8 size='20' value=''></li>
<li class="mainForm" id="fieldBox_9">
<label class="formFieldQuestion">Telefoon: <a class=info href=#><img src=imgs/tip_small.png border=0><span class=infobox>Telefoon?</span></a></label><input class=mainForm type=phone name=field_9 id=field_9 size=20 value="" style="background-image:url(imgs/phone.png); background-repeat: no-repeat; padding: 2px 2px 2px 25px;"></li>
<li class="mainForm" id="fieldBox_10">
<label class="formFieldQuestion">Email: *</label><input class=mainForm type=email name=field_10 id=field_10 size=20 value="" style="background-image:url(imgs/email.png); background-repeat: no-repeat; padding: 2px 2px 2px 25px;"></li>
<li class="mainForm" id="fieldBox_11">
<label class="formFieldQuestion">Volwassenen <a class=info href=#><img src=imgs/tip_small.png border=0><span class=infobox>Aantal personen, exclusief uzelf.</span></a></label><select class=mainForm name=field_11 id=field_11><option value=''></option><option value="0">0</option><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option></select></li>
<li class="mainForm" id="fieldBox_12">
<label class="formFieldQuestion">Naam1 <a class=info href=#><img src=imgs/tip_small.png border=0><span class=infobox>Eerste persoon voornaam?</span></a></label><input class=mainForm type=text name=field_12 id=field_12 size='20' value=''></li>
<li class="mainForm" id="fieldBox_13">
<label class="formFieldQuestion">Achternaam1 <a class=info href=#><img src=imgs/tip_small.png border=0><span class=infobox>Eerste persoon achternaam?</span></a></label><input class=mainForm type=text name=field_13 id=field_13 size='20' value=''></li>
<li class="mainForm" id="fieldBox_14">
<label class="formFieldQuestion">Naam2 <a class=info href=#><img src=imgs/tip_small.png border=0><span class=infobox>Tweede persoon voornaam?</span></a></label><input class=mainForm type=text name=field_14 id=field_14 size='20' value=''></li>
<li class="mainForm" id="fieldBox_15">
<label class="formFieldQuestion">Achternaam2 <a class=info href=#><img src=imgs/tip_small.png border=0><span class=infobox>Tweede persoon achternaam?</span></a></label><input class=mainForm type=text name=field_15 id=field_15 size='20' value=''></li>
<li class="mainForm" id="fieldBox_16">
<label class="formFieldQuestion">Naam3 <a class=info href=#><img src=imgs/tip_small.png border=0><span class=infobox>Derde persoon voornaam?</span></a></label><input class=mainForm type=text name=field_16 id=field_16 size='20' value=''></li>
<li class="mainForm" id="fieldBox_17">
<label class="formFieldQuestion">Achternaam3 <a class=info href=#><img src=imgs/tip_small.png border=0><span class=infobox>Derde persoon achternaam?</span></a></label><input class=mainForm type=text name=field_17 id=field_17 size='20' value=''></li>
<li class="mainForm" id="fieldBox_18">
<label class="formFieldQuestion">Naam4 <a class=info href=#><img src=imgs/tip_small.png border=0><span class=infobox>Vierde persoon voornaam?</span></a></label><input class=mainForm type=text name=field_18 id=field_18 size='20' value=''></li>
<li class="mainForm" id="fieldBox_19">
<label class="formFieldQuestion">Achternaam4 <a class=info href=#><img src=imgs/tip_small.png border=0><span class=infobox>Vierde persoon achternaam?</span></a></label><input class=mainForm type=text name=field_19 id=field_19 size='20' value=''></li>
<li class="mainForm" id="fieldBox_20">
<label class="formFieldQuestion">Naam5 <a class=info href=#><img src=imgs/tip_small.png border=0><span class=infobox>Vijfde persoon voornaam?</span></a></label><input class=mainForm type=text name=field_20 id=field_20 size='20' value=''></li>
<li class="mainForm" id="fieldBox_21">
<label class="formFieldQuestion">Achternaam5 <a class=info href=#><img src=imgs/tip_small.png border=0><span class=infobox>Vijfde persoon achternaam?</span></a></label><input class=mainForm type=text name=field_21 id=field_21 size='20' value=''></li>
<li class="mainForm" id="fieldBox_22">
<label class="formFieldQuestion">Ik boek deze reis als privereis: *</label><span><input class=mainForm type=radio name=field_22 id=field_22_option_1 value="Niet" /><label class=formFieldOption for="field_22_option_1">Niet</label><input class=mainForm type=radio name=field_22 id=field_22_option_2 value="Wel" /><label class=formFieldOption for="field_22_option_2">Wel</label></span></li>
<li class="mainForm" id="fieldBox_23">
<label class="formFieldQuestion">Overige informatie en/of dieetwensen:</label><textarea class=mainForm name=field_23 id=field_23 rows=5 cols=35></textarea>
</li>
<!-- end of this page -->
<!-- page validation -->
<SCRIPT type=text/javascript>
<!--
function validatePage1()
{
retVal = true;
if (validateField('field_1','fieldBox_1','text',1) == false)
retVal=false;
if (validateDate('field_2','fieldBox_2','date',1,'04/15/2008','') == false)
retVal=false;
if (validateDate('field_3','fieldBox_3','date',1,'04/15/2008','') == false)
retVal=false;
if (validateField('field_4','fieldBox_4','text',1) == false)
retVal=false;
if (validateField('field_5','fieldBox_5','text',1) == false)
retVal=false;
if (validateField('field_6','fieldBox_6','text',1) == false)
retVal=false;
if (validateField('field_7','fieldBox_7','text',0) == false)
retVal=false;
if (validateField('field_8','fieldBox_8','text',0) == false)
retVal=false;
if (validateField('field_9','fieldBox_9','phone',0) == false)
retVal=false;
if (validateField('field_10','fieldBox_10','email',1) == false)
retVal=false;
if (validateField('field_11','fieldBox_11','menu',0) == false)
retVal=false;
if (validateField('field_12','fieldBox_12','text',0) == false)
retVal=false;
if (validateField('field_13','fieldBox_13','text',0) == false)
retVal=false;
if (validateField('field_14','fieldBox_14','text',0) == false)
retVal=false;
if (validateField('field_15','fieldBox_15','text',0) == false)
retVal=false;
if (validateField('field_16','fieldBox_16','text',0) == false)
retVal=false;
if (validateField('field_17','fieldBox_17','text',0) == false)
retVal=false;
if (validateField('field_18','fieldBox_18','text',0) == false)
retVal=false;
if (validateField('field_19','fieldBox_19','text',0) == false)
retVal=false;
if (validateField('field_20','fieldBox_20','text',0) == false)
retVal=false;
if (validateField('field_21','fieldBox_21','text',0) == false)
retVal=false;
if (validateField('field_22','fieldBox_22','radio',1) == false)
retVal=false;
if (validateField('field_23','fieldBox_23','textarea' ,0) == false)
retVal=false;
if(retVal == false)
{
alert('Please correct the errors. Fields marked with an asterisk (*) are required');
return false;
}
return retVal;
}
//-->
</SCRIPT>
<!-- end page validaton -->
<!-- next page buttons --><li class="mainForm">
<input id="saveForm" class="mainForm" type="submit" value="Submit" />
</li>
</form>
<!-- end of form -->
<!-- close the display stuff for this page -->
</div><div id="footer"><p class="footer"></p></div>
</body>
</html>