echter ik wil deel van het formulier onzichtbaar maken en laten zien wanneer iemand het juiste selecteert.
de volgende code is mijn formulier tot nu toe echter het werkt gewoon niet :/
kan iemand mij er mee helpen
http://pastebin.com/VaCUuNFe
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>inschrijven Voor bingo - 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 = 2;
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">inschrijven Voor bingo</h2>
<p class="formInfo">Hier kunt u uzelf inschrijven voor de Wijk Bingo.
Deze bingo is voor Personen vanaf 16 jaar
Vanwege ruimte gebrek vragen wij of alleen mensen kunnen komen die ook echt komen spelen.</p>
</div>
<BR/><!-- begin form -->
<form method=post enctype=multipart/form-data action=processor.php onSubmit="return validatePage2();"><ul class=mainForm id="mainForm_1">
<li class="mainForm" id="fieldBox_1">
<label class="formFieldQuestion">Achternaam * <a class=info href=#><img src=imgs/tip_small.png border=0><span class=infobox>Dit is voor het ophalen van de tickets op de Bingo</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">Huisnummer * <a class=info href=#><img src=imgs/tip_small.png border=0><span class=infobox>dit is voor onze administratie</span></a></label><input class=mainForm type=text name=field_2 id=field_2 size='20' value=''></li>
<li class="mainForm" id="fieldBox_3">
<label class="formFieldQuestion">Straat * <a class=info href=#><img src=imgs/tip_small.png border=0><span class=infobox>dit is voor onze administratie</span></a></label><input class=mainForm type=text name=field_3 id=field_3 size='20' value=''></li>
<!-- end of this page -->
<!-- page validation -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" ></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script>
<SCRIPT type=text/javascript>
<!--
function validatePage1()
{
retVal = true;
if (validateField('field_1','fieldBox_1','text',1) == false)
retVal=false;
if (validateField('field_2','fieldBox_2','text',1) == false)
retVal=false;
if (validateField('field_3','fieldBox_3','text',1) == false)
retVal=false;
if(retVal == false)
{
alert('Please correct the errors. Fields marked with an asterisk (*) are required');
return false;
}
return retVal;
}
//-->
</SCRIPT>
<script type="text/javascript">
function display(obj,id1,id2,id3) {
txt = obj.options[obj.selectedIndex].value;
document.getElementById(formfield1).style.display = 'none';
document.getElementById(formfield2).style.display = 'none';
document.getElementById(formfield3).style.display = 'none';
if ( txt.match(id1) ) {
document.getElementById(formfield1).style.display = 'block';
}
if ( txt.match(id2) ) {
document.getElementById(formfield2).style.display = 'block';
document.getElementById(formfield1).style.display = 'block';
}
if ( txt.match(id3) ) {
document.getElementById(formfield2).style.display = 'block';
document.getElementById(formfield1).style.display = 'block';
document.getElementById(formfield3).style.display = 'block';
}
}
</script>
<!-- end page validaton -->
<!-- next page buttons --><li class="mainForm">
<input type=button onclick="if (validatePage1()) { collapseElem('mainForm_1'); expandElem('mainForm_2');}" class="mainForm" value="Go to page 2"/>
</li>
<!-- close the display stuff for this page -->
</ul><ul class=mainForm id="mainForm_2">
<li class="mainForm" id="fieldBox_4">
<label class="formFieldQuestion">Met hoeveel extra personen komt u spelen? (exclusief uzelf) * <a class=info href=#><img src=imgs/tip_small.png border=0><span class=infobox>met hoeveel extra personen komt u spelen exclusief uzelf</span></a></label><select onchange="display(this,0,1,2,3);" class=mainForm name=field_4 id=field_4><option value="0">0</option><option value="1">1</option><option value="2">2</option><option value="3">3</option></select></li>
<li class="mainForm" id="fieldBox_5">
<label class="formFieldQuestion">Met hoeveel kaarten speelt u zelf? * <a class=info href=#><img src=imgs/tip_small.png border=0><span class=infobox>Met hoeveel kaarten wilt u zelf meespelen?
een kaartje kost 2,50 euro</span></a></label><span><input class=mainForm type=radio name=field_5 id=field_5_option_1 value="1" /><label class=formFieldOption for="field_5_option_1" checked=1>1</label><input class=mainForm type=radio name=field_5 id=field_5_option_2 value="2" /><label class=formFieldOption for="field_5_option_2">2</label><input class=mainForm type=radio name=field_5 id=field_5_option_3 value="3" /><label class=formFieldOption for="field_5_option_3">3</label></span></li>
<tbody id="formfield1" style="display: none;">
<li class="mainForm" id="fieldBox_6" >
<label class="formFieldQuestion">Met hoeveel kaarten speelt speler 2 * <a class=info href=#><img src=imgs/tip_small.png border=0><span class=infobox>met hoeveel kaarten speelt speler 2 mee?
een kaartje kost 2,50 euro</span></a></label><span><input class=mainForm type=radio name=field_6 id=field_6_option_1 value="1" /><label class=formFieldOption for="field_6_option_1" >1</label><input class=mainForm type=radio name=field_6 id=field_6_option_2 value="2" /><label class=formFieldOption for="field_6_option_2">2</label><input class=mainForm type=radio name=field_6 id=field_6_option_3 value="3" /><label class=formFieldOption for="field_6_option_3">3</label></span></li>
</tbody>
<tbody id="formfield2" style="display: none;">
<li class="mainForm" id="fieldBox_7" >
<label class="formFieldQuestion">Met hoeveel kaarten speelt speler 3 * <a class=info href=#><img src=imgs/tip_small.png border=0><span class=infobox>met hoeveel kaarten speelt speler 3 mee?
een kaartje kost 2,50 euro</span></a></label><span><input class=mainForm type=radio name=field_7 id=field_7_option_1 value="1" /><label class=formFieldOption for="field_7_option_1" >1</label><input class=mainForm type=radio name=field_7 id=field_7_option_2 value="2" /><label class=formFieldOption for="field_7_option_2">2</label><input class=mainForm type=radio name=field_7 id=field_7_option_3 value="3" /><label class=formFieldOption for="field_7_option_3">3</label></span></li>
</tbody>
<tbody id="formfield3" style="display: none;">
<li class="mainForm" id="fieldBox_8">
<label class="formFieldQuestion">Met hoeveel kaarten speelt speler 4 * <a class=info href=#><img src=imgs/tip_small.png border=0><span class=infobox>met hoeveel kaarten speelt speler 4 mee?
een kaartje kost 2,50 euro</span></a></label><span><input class=mainForm type=radio name=field_8 id=field_8_option_1 value="1" /><label class=formFieldOption for="field_8_option_1" >1</label><input class=mainForm type=radio name=field_8 id=field_8_option_2 value="2" /><label class=formFieldOption for="field_8_option_2">2</label><input class=mainForm type=radio name=field_8 id=field_8_option_3 value="3" /><label class=formFieldOption for="field_8_option_3">3</label></span></li>
</tbody>
<!-- end of this page -->
<!-- page validation -->
<SCRIPT type=text/javascript>
<!--
function validatePage2()
{
retVal = true;
if (validateField('field_4','fieldBox_4','menu',1) == false)
retVal=false;
if (validateField('field_5','fieldBox_5','radio',1) == false)
retVal=false;
if (validateField('field_6','fieldBox_6','radio',1) == false)
retVal=false;
if (validateField('field_7','fieldBox_7','radio',1) == false)
retVal=false;
if (validateField('field_8','fieldBox_8','radio',1) == 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">
<label class="formFieldQuestion">
Type the following: <a class=info href=#><img src=imgs/tip_small.png border=0><span class=infobox>For security purposes, please type the letters in the image.</span></a><BR><img src="CaptchaSecurityImages.php" />
</label>
<input id="captchaForm" name="security_code" class="mainForm" type="text"/>
</li><li class="mainForm">
<input id="saveForm" class="mainForm" type="submit" value="Submit" />
</li>
</form>
<!-- end of form -->
<!-- close the display stuff for this page -->
</ul></div><div id="footer"><p class="footer"><a class=footer href=http://phpformgen.sourceforge.net>Generated by phpFormGenerator</a></p></div>
</body>
</html>in mijn formulier selecteert iemand het aantal spelers die diegene extra meeneemt. als 1 iemand extra meegenomen word dan moet de selectievakjes voor het aantal kaartjes voor die persoon zichtbaar worden.
als iemand 2 extra personen meeneemt dan moet vak 1 en 2 zichtbaar worden
3 extra personen vak 1 2 en 3
ik hoop dat iemand mij ermee kan helpen. alvast bedankt
ps. sorry als dit de verkeerde categorie is
