PDA

View Full Version : Dynamic Form Generation and Validation



jmarston4
04 May 2010, 06:26 PM
I am currently building a website which takes consumer information through the use of forms and allows them to register for medical testing services (and submitting payment online as well).

I am currently writing the page with a mix of HTML, Javascript, and PHP. I will be storing the registration information on a MySQL server.

On the first page of the enrollment, the registrant is asked whether he/she is an individual or registering for multiple entities. If the decision is the latter, the registrant first enters his/her information as the primary account holder - then populates the remaining individual(s) information on another page. The number of individuals being enrolled is asked to the 'client owner' in the form of a drop down field and as a result, tells the PHP how many individual registration pieces to display and store.

To accomplish this, I am using simple <?php if ($_SESSION['Enr_Num'] > "1") { .....

which then is followed by table information. The problem I am running into however is that my pages and (ESPECIALLY) validation pieces (written in Javascript and eventually will need Serverside PHP validation) are becoming very large. I am wondering if there is a way to 'dynamically' create additional enrollments based on the number of participants selected. Currently I have seven places allocated during enrollment but would like the manager to be able to sign up 10-25 if he/she wanted. To give you a clue of where I am, I have included the basic PHP code without the validation pieces.



<?php
session_start();
?>
...

<h1>Enroll your Fighter Today</h1>
<h3>Your Fighters' Information</h3>
<p>Please complete the following fields with your <span style="color:red;"> Fighters' Information</span> to continue enrollment. If any of the information below is incorrect, please <a href="personal.php"><span style="color:red;">click here</span></a> to correct it.</p><br />


<form id="Enroll_Form" action="fstore.php" method="post" name="Enroll_Form" onsubmit="return Enroll_Form_Validator(this)" language="javascript">
<table style="width:100%; font:12px Arial, Helvetica, sans-serif; font-weight:bold;" cellpadding="3">
<?php if ($_SESSION['Num_Fighters'] > "0") { ?>
<tr>
<td colspan="2">FIGHTER 1 INFORMATION</td>
</tr>
<tr>
<td width="45%">First Name: </td>
<td width="55%"><input type="text" name="F1FirstName" size="24" onkeyup="if(!this.value.match(/^([a-z]+\s?)*$/i))this.value=this.value.replace(/[^a-z ]/ig,'').replace(/\s+/g,' ')" /></td>
</tr>
<tr>
<td>Middle Initial: </td>
<td><input type="text" name="F1MI" size="2" maxlength="1" onkeyup="this.value=this.value.replace(/[^a-z]/ig, '')" /></td>
</tr>
<tr>
<td>Last Name: </td>
<td><input type="text" name="F1LastName" size="24" onkeyup="if(!this.value.match(/^([a-z]+\s?)*$/i))this.value=this.value.replace(/[^a-z ]/ig,'').replace(/\s+/g,' ')" /></td>
</tr>
<tr>
<td>Date of Birth: </td>
<td><input type="text" name="F1DOB1" size="2" maxlength="2" onkeyup="this.value=this.value.replace(/[^0-9]/ig, '')" />/<input type="text" name="F1DOB2" size="2" maxlength="2" onkeyup="this.value=this.value.replace(/[^0-9]/ig, '')" />/<input type="text" name="F1DOB3" size="4" maxlength="4" onkeyup="this.value=this.value.replace(/[^0-9]/ig, '')" /></td>
</tr>
<tr>
<td>Social Security Number:</td>
<td><input type="text" name="F1SSN1" size="3" maxlength="3" onkeyup="this.value=this.value.replace(/[^0-9]/ig, '')" /> - <input type="text" name="F1SSN2" size="2" maxlength="2" onkeyup="this.value=this.value.replace(/[^0-9]/ig, '')" /> - <input type="text" name="F1SSN3" size="4" maxlength="4" onkeyup="this.value=this.value.replace(/[^0-9]/ig, '')" /></td>
</tr>
<tr>
<td>Home Address:</td>
<td><input type="text" name="F1Address" size="24" /></td>
</tr>
<tr>
<td>City: </td>
<td><input type="text" name="F1City" size="24" onkeyup="if(!this.value.match(/^([a-z]+\s?)*$/i))this.value=this.value.replace(/[^a-z ]/ig,'').replace(/\s+/g,' ')" /></td>
</tr>
<tr>
<td>State: </td>
<td><select name="F1State"><option value="0">Choose a State</option><?php showOptionsDrop($states_arr, null, true); ?></select></td>
</tr>
<tr>
<td>Zip Code: </td>
<td><input type="text" name="F1Zip" size="5" maxlength="5" onkeyup="this.value=this.value.replace(/[^0-9]/ig, '')" /></td>
</tr>
<tr>
<td>Contact Telephone No: </td>
<td>( <input type="text" name="F1Phone1" size="3" maxlength="3" onkeyup="this.value=this.value.replace(/[^0-9]/ig, '')" /> ) <input type="text" name="F1Phone2" size="3" maxlength="3" onkeyup="this.value=this.value.replace(/[^0-9]/ig, '')" />-<input type="text" name="F1Phone3" size="4" maxlength="4" onkeyup="this.value=this.value.replace(/[^0-9]/ig, '')" /></td>
</tr>
<tr>
<td>Fighter Email Address: </td>
<td><input type="text" name="F1Email" id="F1Email" size="24" /></td>
</tr>
<?php } ?>

<?php if ($_SESSION['Num_Fighters'] > "1") { ?>
<tr height="25px"><td colspan="2"><hr /></td></tr>
<tr>
<td colspan="2">FIGHTER 2 INFORMATION</td>
</tr>
<tr>
<td width="45%">First Name: </td>
<td width="55%"><input type="text" name="F2FirstName" size="24" onkeyup="if(!this.value.match(/^([a-z]+\s?)*$/i))this.value=this.value.replace(/[^a-z ]/ig,'').replace(/\s+/g,' ')" /></td>
</tr>
<tr>
<td>Middle Initial: </td>
<td><input type="text" name="F2MI" size="2" maxlength="1" onkeyup="this.value=this.value.replace(/[^a-z]/ig, '')" /></td>
</tr>
<tr>
<td>Last Name: </td>
<td><input type="text" name="F2LastName" size="24" onkeyup="if(!this.value.match(/^([a-z]+\s?)*$/i))this.value=this.value.replace(/[^a-z ]/ig,'').replace(/\s+/g,' ')" /></td>
</tr>
<tr>
<td>Date of Birth: </td>
<td><input type="text" name="F2DOB1" size="2" maxlength="2" onkeyup="this.value=this.value.replace(/[^0-9]/ig, '')" />/<input type="text" name="F2DOB2" size="2" maxlength="2" onkeyup="this.value=this.value.replace(/[^0-9]/ig, '')" />/<input type="text" name="F2DOB3" size="4" maxlength="4" onkeyup="this.value=this.value.replace(/[^0-9]/ig, '')" /></td>
</tr>
<tr>
<td>Social Security Number:</td>
<td><input type="text" name="F2SSN1" size="3" maxlength="3" onkeyup="this.value=this.value.replace(/[^0-9]/ig, '')" /> - <input type="text" name="F2SSN2" size="2" maxlength="2" onkeyup="this.value=this.value.replace(/[^0-9]/ig, '')" /> - <input type="text" name="F2SSN3" size="4" maxlength="4" onkeyup="this.value=this.value.replace(/[^0-9]/ig, '')" /></td>
</tr>
<tr>
<td>Home Address:</td>
<td><input type="text" name="F2Address" size="24" /></td>
</tr>
<tr>
<td>City: </td>
<td><input type="text" name="F2City" size="24" onkeyup="if(!this.value.match(/^([a-z]+\s?)*$/i))this.value=this.value.replace(/[^a-z ]/ig,'').replace(/\s+/g,' ')" /></td>
</tr>
<tr>
<td>State: </td>
<td><select name="F2State"><option value="0">Choose a State</option><?php showOptionsDrop($states_arr, null, true); ?></select>
</td>
</tr>
<tr>
<td>Zip Code: </td>
<td><input type="text" name="F2Zip" size="5" maxlength="5" onkeyup="this.value=this.value.replace(/[^0-9]/ig, '')" /></td>
</tr>
<tr>
<td>Contact Telephone No: </td>
<td>( <input type="text" name="F2Phone1" size="3" maxlength="3" onkeyup="this.value=this.value.replace(/[^0-9]/ig, '')" /> ) <input type="text" name="F2Phone2" size="3" maxlength="3" onkeyup="this.value=this.value.replace(/[^0-9]/ig, '')" />-<input type="text" name="F2Phone3" size="4" maxlength="4" onkeyup="this.value=this.value.replace(/[^0-9]/ig, '')" /></td>
</tr>
<tr>
<td>Fighter Email Address: </td>
<td><input type="text" name="F2Email" id="F2Email" size="24" /></td>
</tr>
<?php } ?>
</table>
<div align="right"><input type="submit" name="Submit" value="Continue" /></div>
</form>
</div>
</div>
<div class="clear"></div>
</div>
<div class="push"></div>
</div>
<div class="clear"></div>
<?php include('footer.html'); ?>
</body>
</html>


In addition to this, I am curious if it is possible to validate through an array as opposed to individual records. For example:

In the above text, I have seven first name fields. I would like to create a javascript array which says:

var fnames = array['F1FirstName','F2FirstName','F3FirstName']

if (myForm.fnames.values == "") {
alert ("you suck, enter a first name for" /Fighter1);
myForm.fnames.focus();
return (false);
}

and so on and so on for all the various fields (last name, address, zip code, email, etc)