The CMSB Cookbook

CREATING DYNAMIC FORM FIELDS - Nov 10th, 2018


I was creating a front end form that allowed companies that had more than one location and wanted to list those
locations without cluttering up the form with lots of blank fields. 


Here’s how...

1) In the head of your form page add the following  javascript:

<script type="text/javascript">

function yesnoCheck1() {
if (document.getElementById('yesCheck1').checked) {
document.getElementById('ifYes1').style.display = 'block';
}
else document.getElementById('ifYes1').style.display = 'none';

}
function yesnoCheck2() {
if (document.getElementById('yesCheck2').checked) {
document.getElementById('ifYes2').style.display = 'block';
}
else document.getElementById('ifYes2').style.display = 'none';

}

function yesnoCheck3() {
if (document.getElementById('yesCheck3').checked) {
document.getElementById('ifYes3').style.display = 'block';
}
else document.getElementById('ifYes3').style.display = 'none';

}
</script>

Then in the form itself, add the following:

<form>
<table align="center" >
<tr>
<td class="text_font" >Location 1 Street Address</td>
<td><input type="text" name="location_street_address_1" value="<?php echo
ucfirst(htmlencode(@$_REQUEST['location_street_address_1'])); ?>" size="50" /></td>
</tr>
<tr>
<td class="text_font" >Apt/Suite/Floor</td>
<td><input type="text" name="location_suite_apartment_or_floor_1" value="<?php echo
ucfirst(htmlencode(@$_REQUEST['location_suite_apartment_or_floor_1'])); ?>" size="50" /></td>
</tr>
<tr>
<td class="text_font">City</td>
<td><input type="text" name="location_city_1" value="<?php echo
htmlspecialchars(@$_REQUEST['location_city_1']); ?>" size="50" /></td>
</tr>
<tr>
<td class="text_font">State</td>
<td><input type="text" name="location_state_1" value="<?php echo
htmlspecialchars(@$_REQUEST['location_state_1']); ?>" MAXLENGTH="1" size="50" /></td>
</tr>
<tr>
<td class="text_font">Zip Code</td>
<td><input type="text" name="location_zip_1" value="<?php echo
htmlspecialchars(@$_REQUEST['location_zip_1']); ?>" MAXLENGTH="10" size="50" /></td>
</tr>
</table>
<span class="text_font"><b>
<hr />
Add A Second Location?
<input type="radio" onclick="javascript:yesnoCheck1();" name="yesno1" id="yesCheck1">

<hr />
</b></span>
<div id="ifYes1" <?php if(@!$_REQUEST['location_street_address_2']):?>style="display:none" <?php endif
?>>
<table align="center" >
<tr>
<td class="text_font" >Location 2 Street Address</td>
<td><input type="text" name="location_street_address_2" value="<?php echo
ucfirst(htmlencode(@$_REQUEST['location_street_address_2'])); ?>" size="50" /></td>
</tr>
<tr>
<td class="text_font" >Apt/Suite/Floor</td>
<td><input type="text" name="location_suite_apartment_or_floor_2" value="<?php echo
ucfirst(htmlencode(@$_REQUEST['location_suite_apartment_or_floor_2'])); ?>" size="50" /></td>
</tr>
<tr>
<td class="text_font">City</td>
<td><input type="text" name="location_city_2" value="<?php echo
htmlspecialchars(@$_REQUEST['location_city_2']); ?>" size="50" /></td>
</tr>
<tr>
<td class="text_font">State</td>
<td><input type="text" name="location_state_2" value="<?php echo
htmlspecialchars(@$_REQUEST['location_state_2']); ?>" MAXLENGTH="2" size="50" /></td>
</tr>
<tr>
<td class="text_font">Zip Code</td>
<td><input type="text" name="location_zip_2" value="<?php echo
htmlspecialchars(@$_REQUEST['location_zip_2']); ?>" MAXLENGTH="10" size="50" /></td>
</tr>
</table>
<span class="text_font"><b>
<hr />
Add A Third Location?
<input type="radio" onclick="javascript:yesnoCheck2();" name="yesno2" id="yesCheck2">

<hr />
</b></span>
<div id="ifYes2" <?php if(@!$_REQUEST['location_street_address_3']):?>style="display:none" <?php endif
?>>
<table align="center" >
<tr>
<td class="text_font" >Location 3 Street Address</td>
<td><input type="text" name="location_street_address_3" value="<?php echo
ucfirst(htmlencode(@$_REQUEST['location_street_address_3'])); ?>" size="50" /></td>
</tr>
<tr>
<td class="text_font" >Apt/Suite/Floor</td>
<td><input type="text" name="location_suite_apartment_or_floor_3" value="<?php echo
ucfirst(htmlencode(@$_REQUEST['location_suite_apartment_or_floor_3'])); ?>" size="50" /></td>
</tr>
<tr>
<td class="text_font">City</td>
<td><input type="text" name="location_city_3" value="<?php echo
htmlspecialchars(@$_REQUEST['location_city_3']); ?>" size="50" /></td>
</tr>
<tr>
<td class="text_font">State</td>
<td><input type="text" name="location_state_3" value="<?php echo
htmlspecialchars(@$_REQUEST['location_state_3']); ?>" MAXLENGTH="2" size="50" /></td>
</tr>
<tr>
<td class="text_font">Zip Code</td>
<td><input type="text" name="location_zip_3" value="<?php echo
htmlspecialchars(@$_REQUEST['location_zip_3']); ?>" MAXLENGTH="10" size="50" /></td>
</tr>
</table>
</div>
</div>
</form>

To add new fields, at the end of each block of location entry fields there's an “Add another location?” radio button
that added another block of location entry fields.

**To add more blocks of fields, add new functions to the javascript and add new blocks to the form. Just make sure to
add closing </div> tags and to increment the function numbers.

The <?php if(@!$_REQUEST['location_street_address_n']):?>style="display:none" <?php endif ?> code insures that if there
is data entered in that block, the block will remain visible for updating.

The materials on this web site have been created for use with CMS Builder content management software. CMS Builder software is published and licensed for use by InteractiveTools.com. Please contact Interactive Tools for information on the downloading of the software or the purchasing of licenses.