...
PDA

Form dropdown to show a number of <div> tags.

synaptyx
07-05-2007, 12:27 PM
Hi folks, first question here. I'm developing a registration form for a site and have no problem getting a form working, the bit I have no clue about is this dropdown part.

What I want is a dropdown with the numbers 1-10 in the list. When 1 is selected it shows 1 section of the reg form, when 5 is selected it shows 5 reg form sections, etc.

The other annoying part is that there are fields requiring validation throughout the form (they'll be more complex than the basic one below), but obviously, if a section is hidden I don't want a validation error for a field you cannot see.

What I've done so far is to build the form with the dropdown at the top and the 10 sections with the validation fields inside <div> tags with ids, but I have no clue how to implement the code needed to do show a number of sections by the choice in the dropdown.

I'm sure something like this has been done before, but having searched around here and the web, I haven't found something that matches exactly. I did find something similar, but I'm not a JS programmer, I have very little experience of looking at JS, so major handholding is needed.

Thanks for reading! :)

This is the HTML form with validation js autogenerated by FrontPage (yes I know, but it's handy for form building):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>

<meta http-equiv="Content-Language" content="en-gb">

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Conference registrations Registration</title>

</head>

<body>

<!--webbot BOT="GeneratedScript" PREVIEW=" " startspan --><script Language="JavaScript" Type="text/javascript"><!--
function Validator(theForm)
{

if (theForm.firstname1.value == "")
{
alert("Please enter a value for the \"firstname1\" field.");
theForm.firstname1.focus();
return (false);
}

if (theForm.surname1.value == "")
{
alert("Please enter a value for the \"surname1\" field.");
theForm.surname1.focus();
return (false);
}

if (theForm.firstname2.value == "")
{
alert("Please enter a value for the \"firstname2\" field.");
theForm.firstname2.focus();
return (false);
}

if (theForm.surname2.value == "")
{
alert("Please enter a value for the \"surname2\" field.");
theForm.surname2.focus();
return (false);
}

if (theForm.firstname3.value == "")
{
alert("Please enter a value for the \"firstname3\" field.");
theForm.firstname3.focus();
return (false);
}

if (theForm.surname3.value == "")
{
alert("Please enter a value for the \"surname3\" field.");
theForm.surname3.focus();
return (false);
}

if (theForm.firstname4.value == "")
{
alert("Please enter a value for the \"firstname4\" field.");
theForm.firstname4.focus();
return (false);
}

if (theForm.surname4.value == "")
{
alert("Please enter a value for the \"surname4\" field.");
theForm.surname4.focus();
return (false);
}

if (theForm.firstname5.value == "")
{
alert("Please enter a value for the \"firstname5\" field.");
theForm.firstname5.focus();
return (false);
}

if (theForm.surname5.value == "")
{
alert("Please enter a value for the \"surname5\" field.");
theForm.surname5.focus();
return (false);
}

if (theForm.firstname6.value == "")
{
alert("Please enter a value for the \"firstname6\" field.");
theForm.firstname6.focus();
return (false);
}

if (theForm.surname6.value == "")
{
alert("Please enter a value for the \"surname6\" field.");
theForm.surname6.focus();
return (false);
}

if (theForm.firstname7.value == "")
{
alert("Please enter a value for the \"firstname7\" field.");
theForm.firstname7.focus();
return (false);
}

if (theForm.surname7.value == "")
{
alert("Please enter a value for the \"surname7\" field.");
theForm.surname7.focus();
return (false);
}

if (theForm.firstname8.value == "")
{
alert("Please enter a value for the \"firstname8\" field.");
theForm.firstname8.focus();
return (false);
}

if (theForm.surname8.value == "")
{
alert("Please enter a value for the \"surname8\" field.");
theForm.surname8.focus();
return (false);
}

if (theForm.firstname9.value == "")
{
alert("Please enter a value for the \"firstname9\" field.");
theForm.firstname9.focus();
return (false);
}

if (theForm.surname9.value == "")
{
alert("Please enter a value for the \"surname9\" field.");
theForm.surname9.focus();
return (false);
}

if (theForm.firstname10.value == "")
{
alert("Please enter a value for the \"firstname10\" field.");
theForm.firstname10.focus();
return (false);
}

if (theForm.surname10.value == "")
{
alert("Please enter a value for the \"surname10\" field.");
theForm.surname10.focus();
return (false);
}
return (true);
}
//--></script><!--webbot BOT="GeneratedScript" endspan --><form method="post" action="regformhandler.php" onsubmit="return Validator(this)" language="JavaScript" name="regform">
<table id="topTable" border="0" width="100%">

<tr>
<td>No. of Registrations: <select size="1" name="numberofreg">
<option>--</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
</select></td>
</tr>

</table>

<div id="registration01">
<table id="1st" border="0" width="100%">

<tr>
<td colspan="2">
<hr></td>
</tr>
<tr>
<td colspan="2">Registration 1</td>
</tr>
<tr>
<td>Title:</td>
<td><input name="title1" size="10" type="text"></td>
</tr>
<tr>
<td>First Name:</td>
<td><!--webbot bot="Validation" b-value-required="TRUE" --><input name="firstname1" size="20" type="text">*</td>
</tr>
<tr>
<td>Surname:</td>
<td><!--webbot bot="Validation" b-value-required="TRUE" --><input name="surname1" size="20" type="text">*</td>
</tr>

</table>
</div>

<div id="registration02">
<table id="2nd" border="0" width="100%">

<tr>
<td colspan="2">
<hr></td>
</tr>
<tr>
<td colspan="2">Registration 2</td>
</tr>
<tr>
<td>Title:</td>
<td><input name="title2" size="10" type="text"></td>
</tr>
<tr>
<td>First Name:</td>
<td><!--webbot bot="Validation" b-value-required="TRUE" --><input name="firstname2" size="20" type="text">*</td>
</tr>
<tr>
<td>Surname:</td>
<td><!--webbot bot="Validation" b-value-required="TRUE" --><input name="surname2" size="20" type="text">*</td>
</tr>

</table>
</div>

<div id="registration03">
<table id="3rd" border="0" width="100%">

<tr>
<td colspan="2">
<hr></td>
</tr>
<tr>
<td colspan="2">Registration 3</td>
</tr>
<tr>
<td>Title:</td>
<td><input name="title3" size="10" type="text"></td>
</tr>
<tr>
<td>First Name:</td>
<td><!--webbot bot="Validation" b-value-required="TRUE" --><input name="firstname3" size="20" type="text">*</td>
</tr>
<tr>
<td>Surname:</td>
<td><!--webbot bot="Validation" b-value-required="TRUE" --><input name="surname3" size="20" type="text">*</td>
</tr>

</table>
</div>

<div id="registration04">
<table id="4th" border="0" width="100%">

<tr>
<td colspan="2">
<hr></td>
</tr>
<tr>
<td colspan="2">Registration 4</td>
</tr>
<tr>
<td>Title:</td>
<td><input name="title4" size="10" type="text"></td>
</tr>
<tr>
<td>First Name:</td>
<td><!--webbot bot="Validation" b-value-required="TRUE" --><input name="firstname4" size="20" type="text">*</td>
</tr>
<tr>
<td>Surname:</td>
<td><!--webbot bot="Validation" b-value-required="TRUE" --><input name="surname4" size="20" type="text">*</td>
</tr>

</table>
</div>

<div id="registration05">
<table id="5th" border="0" width="100%">

<tr>
<td colspan="2">
<hr></td>
</tr>
<tr>
<td colspan="2">Registration 5</td>
</tr>
<tr>
<td>Title:</td>
<td><input name="title5" size="10" type="text"></td>
</tr>
<tr>
<td>First Name:</td>
<td><!--webbot bot="Validation" b-value-required="TRUE" --><input name="firstname5" size="20" type="text">*</td>
</tr>
<tr>
<td>Surname:</td>
<td><!--webbot bot="Validation" b-value-required="TRUE" --><input name="surname5" size="20" type="text">*</td>
</tr>

</table>
</div>

<div id="attndee06">
<table id="6th" border="0" width="100%">

<tr>
<td colspan="2">
<hr></td>
</tr>
<tr>
<td colspan="2">Registration 6</td>
</tr>
<tr>
<td>Title:</td>
<td><input name="title6" size="10" type="text"></td>
</tr>
<tr>
<td>First Name:</td>
<td><!--webbot bot="Validation" b-value-required="TRUE" --><input name="firstname6" size="20" type="text">*</td>
</tr>
<tr>
<td>Surname:</td>
<td><!--webbot bot="Validation" b-value-required="TRUE" --><input name="surname6" size="20" type="text">*</td>
</tr>

</table>
</div>

<div id="registration07">
<table id="7th" border="0" width="100%">

<tr>
<td colspan="2">
<hr></td>
</tr>
<tr>
<td colspan="2">Registration 7</td>
</tr>
<tr>
<td>Title:</td>
<td><input name="title7" size="10" type="text"></td>
</tr>
<tr>
<td>First Name:</td>
<td><!--webbot bot="Validation" b-value-required="TRUE" --><input name="firstname7" size="20" type="text">*</td>
</tr>
<tr>
<td>Surname:</td>
<td><!--webbot bot="Validation" b-value-required="TRUE" --><input name="surname7" size="20" type="text">*</td>
</tr>

</table>
</div>

<div id="registration08">
<table id="8th" border="0" width="100%">

<tr>
<td colspan="2">
<hr></td>
</tr>
<tr>
<td colspan="2">Registration 8</td>
</tr>
<tr>
<td>Title:</td>
<td><input name="title8" size="10" type="text"></td>
</tr>
<tr>
<td>First Name:</td>
<td><!--webbot bot="Validation" b-value-required="TRUE" --><input name="firstname8" size="20" type="text">*</td>
</tr>
<tr>
<td>Surname:</td>
<td><!--webbot bot="Validation" b-value-required="TRUE" --><input name="surname8" size="20" type="text">*</td>
</tr>

</table>
</div>

<div id="registration09">
<table id="9th" border="0" width="100%">

<tr>
<td colspan="2">
<hr></td>
</tr>
<tr>
<td colspan="2">Registration 9</td>
</tr>
<tr>
<td>Title:</td>
<td><input name="title9" size="10" type="text"></td>
</tr>
<tr>
<td>First Name:</td>
<td><!--webbot bot="Validation" b-value-required="TRUE" --><input name="firstname9" size="20" type="text">*</td>
</tr>
<tr>
<td>Surname:</td>
<td><!--webbot bot="Validation" b-value-required="TRUE" --><input name="surname9" size="20" type="text">*</td>
</tr>

</table>
</div>

<div id="registration10">
<table id="10th" border="0" width="100%">

<tr>
<td colspan="2">
<hr></td>
</tr>
<tr>
<td colspan="2">Registration 10</td>
</tr>
<tr>
<td>Title:</td>
<td><input name="title10" size="10" type="text"></td>
</tr>
<tr>
<td>First Name:</td>
<td><!--webbot bot="Validation" b-value-required="TRUE" --><input name="firstname10" size="20" type="text">*</td>
</tr>
<tr>
<td>Surname:</td>
<td><!--webbot bot="Validation" b-value-required="TRUE" --><input name="surname10" size="20" type="text">*</td>
</tr>

</table>
</div>

<table id="buttons" border="0" cellpadding="0" width="100%">

<tr>
<td><input value="Send" name="send" type="submit"><input value="Reset" name="reset" type="reset"></td>
</tr>

</table>
</form>
</body>
</html>
mcjwb
07-06-2007, 12:25 AM
This will produce the functionality you want. I've modified the validation function quite a bit so let me know if you need help extending it.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>

<meta http-equiv="Content-Language" content="en-gb">

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Conference registrations Registration</title>

</head>

<body>

<!--webbot BOT="GeneratedScript" PREVIEW=" " startspan --><script type="text/javascript"><!--
function Validator(theForm)
{
var numberRegExp= /\d+/; //matches any string containing one or more digits (NB only gets first number it sees).
var matches, inputNameNumber, message="";
for(i=0; i<theForm.elements.length; i++){//loop round all elements in the form.
if ( (theForm.elements[i].name.indexOf("firstname")>=0) || (theForm.elements[i].name.indexOf("surname")>=0) )//check name contains either the string "firstname" or "surname".
{
matches = numberRegExp.exec(theForm.elements[i].name);//extract number from name using regular expression.
if (matches != null) {
inputNameNumber = "";
for (j = 0; j < matches.length; j++) {
inputNameNumber = inputNameNumber + matches[j];//get the number we've found.
}
inputNameNumber = parseInt(inputNameNumber);

if(inputNameNumber!="NaN"){//check it's not an empty string
if(theForm.elements[i].value=="" && inputNameNumber<=divNum){//check value is empty and input number is less than number of divs on display.
message+="Please enter a value for the \""+ theForm.elements[i].name +"\" field." + "\n";
}
}
}// if no matches, ignore.
}//if input name doesn't contain "firstname" or "surname" ignore
}

if(message!=""){
alert(message);
return false;
}
else{
return true;
}
}

var divNum=0;
function showDivs(obj){
var i, num;
divNum = parseInt(obj.options[obj.selectedIndex].value);

for(i=1; i<=10; i++){
num = (i<10) ? "0"+i : i;

if(document.getElementById('registration'+num)){ // if the div exists.
if(i<=divNum){// display.
document.getElementById('registration'+num).style.display="block";
}
else{ // hide.
document.getElementById('registration'+num).style.display="none";
}
}
}
}

function hideAllDivsOnLoad(){
showDivs(document.getElementById("numberofreg"));
}

addLoadEvent(hideAllDivsOnLoad);

// add an onload event without destroying any previously set onload functions.
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
if (oldonload) {
oldonload();
}
func();
}
}
}
//--></script><!--webbot BOT="GeneratedScript" endspan --><form method="post" action="regformhandler.php" onsubmit="return Validator(this)" name="regform">
<table id="topTable" border="0" width="100%">

<tr>
<td>No. of Registrations: <select size="1" name="numberofreg" id="numberofreg" onchange="showDivs(this)">
<option value="0" selected>-Select-</option>
<option value="01">1</option>
<option value="02">2</option>
<option value="03">3</option>
<option value="04">4</option>
<option value="05">5</option>
<option value="06">6</option>
<option value="07">7</option>
<option value="08">8</option>
<option value="09">9</option>
<option value="10">10</option>
</select></td>
</tr>

</table>

<div id="registration01">
<table id="1st" border="0" width="100%">

<tr>
<td colspan="2">
<hr></td>
</tr>
<tr>
<td colspan="2">Registration 1</td>
</tr>
<tr>
<td>Title:</td>
<td><input name="title1" size="10" type="text"></td>
</tr>
<tr>
<td>First Name:</td>
<td><!--webbot bot="Validation" b-value-required="TRUE" --><input name="firstname1" size="20" type="text">*</td>
</tr>
<tr>
<td>Surname:</td>
<td><!--webbot bot="Validation" b-value-required="TRUE" --><input name="surname1" size="20" type="text">*</td>
</tr>

</table>
</div>

<div id="registration02">
<table id="2nd" border="0" width="100%">

<tr>
<td colspan="2">
<hr></td>
</tr>
<tr>
<td colspan="2">Registration 2</td>
</tr>
<tr>
<td>Title:</td>
<td><input name="title2" size="10" type="text"></td>
</tr>
<tr>
<td>First Name:</td>
<td><!--webbot bot="Validation" b-value-required="TRUE" --><input name="firstname2" size="20" type="text">*</td>
</tr>
<tr>
<td>Surname:</td>
<td><!--webbot bot="Validation" b-value-required="TRUE" --><input name="surname2" size="20" type="text">*</td>
</tr>

</table>
</div>

<div id="registration03">
<table id="3rd" border="0" width="100%">

<tr>
<td colspan="2">
<hr></td>
</tr>
<tr>
<td colspan="2">Registration 3</td>
</tr>
<tr>
<td>Title:</td>
<td><input name="title3" size="10" type="text"></td>
</tr>
<tr>
<td>First Name:</td>
<td><!--webbot bot="Validation" b-value-required="TRUE" --><input name="firstname3" size="20" type="text">*</td>
</tr>
<tr>
<td>Surname:</td>
<td><!--webbot bot="Validation" b-value-required="TRUE" --><input name="surname3" size="20" type="text">*</td>
</tr>

</table>
</div>

<div id="registration04">
<table id="4th" border="0" width="100%">

<tr>
<td colspan="2">
<hr></td>
</tr>
<tr>
<td colspan="2">Registration 4</td>
</tr>
<tr>
<td>Title:</td>
<td><input name="title4" size="10" type="text"></td>
</tr>
<tr>
<td>First Name:</td>
<td><!--webbot bot="Validation" b-value-required="TRUE" --><input name="firstname4" size="20" type="text">*</td>
</tr>
<tr>
<td>Surname:</td>
<td><!--webbot bot="Validation" b-value-required="TRUE" --><input name="surname4" size="20" type="text">*</td>
</tr>

</table>
</div>

<div id="registration05">
<table id="5th" border="0" width="100%">

<tr>
<td colspan="2">
<hr></td>
</tr>
<tr>
<td colspan="2">Registration 5</td>
</tr>
<tr>
<td>Title:</td>
<td><input name="title5" size="10" type="text"></td>
</tr>
<tr>
<td>First Name:</td>
<td><!--webbot bot="Validation" b-value-required="TRUE" --><input name="firstname5" size="20" type="text">*</td>
</tr>
<tr>
<td>Surname:</td>
<td><!--webbot bot="Validation" b-value-required="TRUE" --><input name="surname5" size="20" type="text">*</td>
</tr>

</table>
</div>

<div id="registration06">
<table id="6th" border="0" width="100%">

<tr>
<td colspan="2">
<hr></td>
</tr>
<tr>
<td colspan="2">Registration 6</td>
</tr>
<tr>
<td>Title:</td>
<td><input name="title6" size="10" type="text"></td>
</tr>
<tr>
<td>First Name:</td>
<td><!--webbot bot="Validation" b-value-required="TRUE" --><input name="firstname6" size="20" type="text">*</td>
</tr>
<tr>
<td>Surname:</td>
<td><!--webbot bot="Validation" b-value-required="TRUE" --><input name="surname6" size="20" type="text">*</td>
</tr>

</table>
</div>

<div id="registration07">
<table id="7th" border="0" width="100%">

<tr>
<td colspan="2">
<hr></td>
</tr>
<tr>
<td colspan="2">Registration 7</td>
</tr>
<tr>
<td>Title:</td>
<td><input name="title7" size="10" type="text"></td>
</tr>
<tr>
<td>First Name:</td>
<td><!--webbot bot="Validation" b-value-required="TRUE" --><input name="firstname7" size="20" type="text">*</td>
</tr>
<tr>
<td>Surname:</td>
<td><!--webbot bot="Validation" b-value-required="TRUE" --><input name="surname7" size="20" type="text">*</td>
</tr>

</table>
</div>

<div id="registration08">
<table id="8th" border="0" width="100%">

<tr>
<td colspan="2">
<hr></td>
</tr>
<tr>
<td colspan="2">Registration 8</td>
</tr>
<tr>
<td>Title:</td>
<td><input name="title8" size="10" type="text"></td>
</tr>
<tr>
<td>First Name:</td>
<td><!--webbot bot="Validation" b-value-required="TRUE" --><input name="firstname8" size="20" type="text">*</td>
</tr>
<tr>
<td>Surname:</td>
<td><!--webbot bot="Validation" b-value-required="TRUE" --><input name="surname8" size="20" type="text">*</td>
</tr>

</table>
</div>

<div id="registration09">
<table id="9th" border="0" width="100%">

<tr>
<td colspan="2">
<hr></td>
</tr>
<tr>
<td colspan="2">Registration 9</td>
</tr>
<tr>
<td>Title:</td>
<td><input name="title9" size="10" type="text"></td>
</tr>
<tr>
<td>First Name:</td>
<td><!--webbot bot="Validation" b-value-required="TRUE" --><input name="firstname9" size="20" type="text">*</td>
</tr>
<tr>
<td>Surname:</td>
<td><!--webbot bot="Validation" b-value-required="TRUE" --><input name="surname9" size="20" type="text">*</td>
</tr>

</table>
</div>

<div id="registration10">
<table id="10th" border="0" width="100%">

<tr>
<td colspan="2">
<hr></td>
</tr>
<tr>
<td colspan="2">Registration 10</td>
</tr>
<tr>
<td>Title:</td>
<td><input name="title10" size="10" type="text"></td>
</tr>
<tr>
<td>First Name:</td>
<td><!--webbot bot="Validation" b-value-required="TRUE" --><input name="firstname10" size="20" type="text">*</td>
</tr>
<tr>
<td>Surname:</td>
<td><!--webbot bot="Validation" b-value-required="TRUE" --><input name="surname10" size="20" type="text">*</td>
</tr>

</table>
</div>

<table id="buttons" border="0" cellpadding="0" width="100%">

<tr>
<td><input value="Send" name="send" type="submit"><input value="Reset" name="reset" type="reset"></td>
</tr>

</table>
</form>
</body>
</html>

Hope it helps.
mcjwb
07-06-2007, 12:41 AM
Tried to edit my last post but it didn't seem to want to work, anyway just some minor additional notes:
You can't start html IDs with numbers so you need to change your table ids.
There is no "language" attribute for the form element.
I've renamed div 6 from "attndee06" to "registration06".
synaptyx
07-06-2007, 09:34 AM
Wow! Thanks, I'll have a play with it.
synaptyx
07-06-2007, 12:36 PM
mcjwb, that's utterly brilliant. Thank you so much!

Expanding textfield validation was a dream and I've managed to get most of it working. The only thing I'm struggling with is validation on the radio buttons and dropdowns in the expanded version of the form. It's just to make sure they do choose and option other than -Select- and that they don't miss the radio buttons out.

Complete page code is too long to post, so I've attached it as a file. Rename to form.htm, I didn't zip it. :)
mcjwb
07-06-2007, 02:05 PM
Ok, I've modified the validate function to handle different types of inputs, however it's not perfect.

You'll get a message for each radio button even though you can only select one of them.
If you have more than 4 registration forms, due to the limited number of characters you can put in an alert box, you don't get the full message.Also I've renamed your numberofreg and cardholder inputs by putting a 0 on the end so I didn't have to modify the validation function even more. The validation function only checks inputs if they have a number in their name.

One other thing, it's probably not the best to tell users which field they haven't filled in by using the inputs html name, although I'm sure you'd thought of that. Perhaps the final version will highlight the actual input that needs filling in, therefore providing the user with a visuable reference on what's wrong? Might draw the line on doing all the work for that mod!

rename the file, it' not zipped.
synaptyx
07-06-2007, 02:22 PM
Ok, I've modified the validate function to handle different types of inputs, however it's not perfect.

You'll get a message for each radio button even though you can only select one of them.Okay, I think I'll make that a dropdown.
If you have more than 4 registration forms, due to the limited number of characters you can put in an alert box, you don't get the full message.Ok, thanks for the heads up.

Thank you for all your hard work mcjwb.

EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum