Setting Values For Form Elements With Unconventional Names

[curtiss]

I'm back again, trying to do some more complicated things with my dynamic forms.

I am trying to add a "Copy Values" button to my form, that will copy a user's physical address into the form fields for the user's billing address.

Unfortunately, my form elements seem to have names that I can't easily identify with javascript. Because I generate a dynamic number of "sub-forms" within my form (they don't have their own "form" tags, but they all have the same form elements), and assign names like "ClientName[0]" for the client name textbox in the first set of form elements, "ClientName[1]" in the second set, etc. (each of the numbers within brackets are defined with an $i variable in my PHP script when it generates the form), I have trouble getting ahold of those elements in javascript.

I have added a button to my "sub-forms" that has an onClick event handler to copy the values. The onClick calls a javascript function, with the $i variable set in the function call. So, if someone pressed the copy button on the second set of form elements, it would call the javascript function like:

onClick='copy_res(1);'

If someone clicked the copy button on the seventh "sub-form", it would call it like:

onClick='copy_res(6);'

...and so on and so on.

My javascript function currently looks something like:

function copy_res(elnum) {
	document.frmReport.res_bill_name[elnum].value = document.frmReport.res_name[elnum].value;
	document.frmReport.res_bill_addy[elnum].value = document.frmReport.res_addy[elnum].value;
	document.frmReport.res_bill_city[elnum].value = document.frmReport.res_city[elnum].value;
	document.frmReport.res_bill_state[elnum].value = 46;
}

It doesn't work. The javascript error returned in Firefox's javascript console is:

document.frmReport.res_bill_name has no properties

Obviously, it is hitting that opening bracket and stopping the javascript code with an error.

Can anyone think of a way around this problem without renaming all of my form elements? The PHP code I have written relies very heavily on the fact that each of my form elements encloses a number within those brackets, and it would be a gigantic pain to try to replace them all with something else (and that doesn't even take into account the endless hours I spent trying to figure out a way to generate and evaluate those forms before I eventually figured out the bracket solution).

[Till]

You can't use them like that, I think.

How does your HTML look like?

[curtiss]

Well, my HTML (it's actually PHP, but I obviously output HTML with it) looks like:

		if(isset($project[$i]) && $project[$i] != "") {
			echo "
						</td>
					</tr>";
			if(isset($res[$i]) && $res[$i] == TRUE) {
				echo "
					<tr>
						<td colspan='7' align='left'>
							<span style='font-weight: bold; color: #00f;float: left;'>Billing Info:</span>
							<span style='float: right;'><input type='button' name='openResWindow' value='Look-up Residential Customers' onclick='resWindow(this);' /></span>
						</td>

					</tr>
					<tr>
						<td colspan='2'>
							Name:<br />
							<input type='text' size='25' style='width: 100%;' name='res_bill_name[$i]'";
				if(isset($res_bill_name[$i])) {
					echo " value='$res_bill_name[$i]'";
				}
				echo " />
						</td>
						<td colspan='2'>
							Address:<br />
							<input type='text' size='25' style='wdith: 100%;' name='res_bill_addy[$i]'";
				if(isset($res_bill_addy[$i])) {
					echo " value='$res_bill_addy[$i]'";
				}
				echo " />
						</td>
						<td>
							City:<br />
							<input type='text' size='10' style='width: 100%;' name='res_bill_city[$i]'";
				if(isset($res_bill_city)) {
					echo " value='$res_bill_city[$i]'";
				}
				echo " />
						</td>
						<td>
							State:<br />
							<select name='res_bill_state[$i]' size='1'>";
				for($state = 1; $state <= 50; $state++) {
					$sql_query = "SELECT * FROM `states` WHERE `stateid` = '$state'";
					$sql_query = mysql_query($sql_query, $link);
					while($rs = mysql_fetch_row($sql_query)) {
						if(empty($res_bill_state[$i])) {
							$res_bill_state[$i] = 46;
						}
						if($res_bill_state[$i] == $rs[0]) {
							$state_val = " selected='selected'";
						}
						else {
							$state_val = "";
						}
						echo "
								<option value='$rs[0]'$state_val>$rs[1]</option>";
					}
				}
				echo "
							</select>
						</td>
						<td>
							Zip:<br />
							<input type='text' size='5' maxlength='5' name='res_bill_zip[$i]'";
				if(isset($res_bill_zip)) {
					echo " value='$res_bill_zip[$i]'";
				}
				echo " /> 
						</td>
					</tr>
					<tr>
						<td colspan='7' align='left'>
							<span style='font-weight: bold; color: #00f; float: left;'>
								Service Property Info:
							</span>
							<span style='font-style: italic; float: right;'>
								<label>Check here if service info is the same as billing info: <input type='checkbox' name='res_billsame[$i]' value='yes' onClick='copy_res(this);'";
				if($res_billsame[$i] == 'yes') {
					echo " checked='checked'";
				}
				echo " /></label>
							</span>
						</td>
					</tr>
					<tr>
						<td>
							Job #:<br />
							<input type='text' size='5' style='width: 100%;' name='res_job[$i]'";
				if(isset($res_job[$i])) {
					echo " value='$res_job[$i]'";
				}
				echo " />
						</td>
						<td colspan='2'>
							Name:<br />
							<input type='text' size='25' style='width: 100%;' name='res_name[$i]'";
				if(isset($res_name[$i])) {
					echo " value='$res_name[$i]'";
				}
				echo " />
						</td>
						<td colspan='2'>
							Address:<br />
							<input type='text' size='25' style='width: 100%;' name='res_addy[$i]'";
				if(isset($res_addy[$i])) {
					echo " value='$res_addy[$i]'";
				}
				echo " />
						</td>
						<td colspan='2'>
							TaxMap #:<br />
							<input type='text' size='25' style='width:100%;' name='res_taxmap[$i]'";
				if(isset($res_taxmap[$i])) {
					echo " value='$res_taxmap[$i]'";
				}
				echo" />
						</td>
					</tr>
					<tr>
						<td colspan='3'>
							How many of each did we pump?
							<table style='font-family: verdana, arial, sans-serif; font-size: 10px; color: #009400;' width='100%'>
								<tr>
									<td rowspan='2' width='5'>
										&nbsp;
									</td>
									<td>
										Septic <input type='text' size='1' style='line-height: 14px; height: 18px; font-size: 9px; font-family: verdana, arial, sans-serif;;' name='res_septic[$i]' onChange='calc_price(this, 0);'";
				if(isset($res_septic[$i])) {
					echo " value='$res_septic[$i]'";
				}
				else {
					echo " value='0'";
				}
				echo " />
									</td>
									<td>
										Pump <input type='text' size='1' style='line-height: 14px; height: 18px; font-size: 9px; font-family: verdana, arial, sans-serif;;' name='res_pumpc[$i]' onChange='calc_price(this, 1);'";
				if(isset($res_septic[$i])) {
					echo " value='$res_pumpc[$i]'";
				}
				else {
					echo " value='0'";
				}
				echo " />
									</td>
									<td>
										ATU <input type='text' size='1' style='line-height: 14px; height: 18px; font-size: 9px; font-family: verdana, arial, sans-serif;;' name='res_atu[$i]' onChange='calc_price(this, 2);'";
				if(isset($res_atu[$i])) {
					echo " value='$res_atu[$i]'";
				}
				else {
					echo " value='0'";
				}
				echo " />
									</td>
								</tr>
								<tr>
									<td>
										Aquarobic <input type='text' size='1' style='line-height: 14px; height: 18px; font-size: 9px; font-family: verdana, arial, sans-serif;;' name='res_aqua[$i]' onChange='calc_price(this, 3);'";
				if(isset($res_aqua[$i])) {
					echo " value='$res_aqua[$i]'";
				}
				else {
					echo " value='0'";
				}
				echo " />
									</td>
									<td>
										D-Box <input type='text' size='1' style='line-height: 14px; height: 18px; font-size: 9px; font-family: verdana, arial, sans-serif;;' name='res_dbox[$i]' onChange='calc_price(this, 4);'";
				if(isset($res_dbox[$i])) {
					echo " value='$res_dbox[$i]'";
				}
				else {
					echo " value='0'";
				}
				echo " />
									</td>
									<td>
										&nbsp;
									</td>
								</tr>
							</table>
						</td>
						<td>
							City:<br/>
							<input type='text' size='20' style='width: 100%;' name='res_city[$i]'";
				if(isset($res_city[$i])) {
					echo " value='$res_city[$i]'";
				}
				echo " />
						</td>
						<td>
							State:<br />
							<select name='res_state[$i]' size='1'>";
				for($state = 1; $state <= 50; $state++) {
					$sql_query = "SELECT * FROM `states` WHERE `stateid` = '$state'";
					$sql_query = mysql_query($sql_query, $link);
					while($rs = mysql_fetch_row($sql_query)) {
						if(empty($res_state[$i])) {
							$res_state[$i] = 46;
						}
						if($res_state[$i] == $rs[0]) {
							$state_val = " selected='selected'";
						}
						else {
							$state_val = "";
						}
						echo "
								<option value='$rs[0]'$state_val>$rs[1]</option>";
					}
				}
				echo "
							</select>
						</td>
						<td>
							Zip:<br />
							<input type='text' size='5' maxlength='5' name='res_zip[$i]'";
				if(isset($res_zip[$i])) {
					echo " value='$res_zip[$i]'";
				}
				echo " />
						</td>
						<td>
							Price:<br />
							<input type='text' size='5' name='res_price[$i]'";
				if(isset($res_price[$i])) {
					echo " value='$res_price[$i]'";
				}
				echo " />
						</td>
					</tr>";
			}

It's started off with the following:

		while ($i < $pumpouts) {

So, obviously, depending on what $pumpouts is, we could have 1 set of these form elements or a million of them.

I have figured out how to accomplish what I wanted, but I didn't do it the way I wanted to. Basically, once again, I figured out the number of the form element that the click to copy, and then added the right number of elements in order to copy the information to all the right places.