I have the following JavaScript function on a page:
function setFields(){
var menu = document.getElementById('EditLocation');
var itemDataArray = menu[menu.selectedIndex].value.split('|');
form.LocationShortName.value = itemDataArray[0];
form.LocationLongName.value = itemDataArray[1];
form.Phone.value = itemDataArray[2];
form.Address1.value = itemDataArray[3];
form.CityStateZip.value = itemDataArray[4];
form.MapLink.value = itemDataArray[5];
}
Down on the Form, I have the following:
<select class="input2" name="EditLocation" id="EditLocation" onchange = "setFields();">
<option value="-Add New-"<?php if($editlocation=='-Add New-'){echo(' selected="selected"');} ?>>-Add New-</option>
<?php require_once('connection.php');
$connection = mysql_connect($hostname,$username,$password) or die (mysql_errno().": ".mysql_error()."<BR />");
mysql_select_db($database);
$sql = "SELECT * FROM directions ORDER BY dirshortname";
$query = mysql_query($sql);
while ($row = mysql_fetch_array($query)) {
echo('<option value="'.stripslashes($row['dirshortname']).'|'.stripslashes($row['dirlongname']).'|'.stripslashes($row['dirphone']).'|'.stripslashes($row['dirstreet']).'|'.stripslashes($row['dircsz']).'|'.stripslashes($row['dirmaplink']).'"');
if ($editlocation==stripslashes($row['dirshortname']))
{
echo(' selected="selected"');
}
echo('>'.stripslashes($row['dirshortname']).'</option>');
}
?>
In essence, the PHP is supposed to pack the data elements pulled from MySQL into the OPTION VALUE portion of the SELECT box. Once the user selects a record, the JavaScript pulls the packed data apart and populates the other data elements on the FORM. It all works wonderfully in IE, but in FF the fields do not populate with data.
The form is somewhat long, but I'll include it anyway for the sake of completeness.
<form action="admin-dirs.php" method="post" enctype="multipart/form-data" style="margin:0px; padding:0px " id="form">
<table width="587" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="60"> </td>
<td width="185">Select Location to Edit: </td>
<td width="342"><select class="input2" name="EditLocation" id="EditLocation" onchange = "setFields();">
<option value="-Add New-"<?php if($editlocation=='-Add New-'){echo(' selected="selected"');} ?>>-Add New-</option>
<?php require_once('connection.php');
$connection = mysql_connect($hostname,$username,$password) or die (mysql_errno().": ".mysql_error()."<BR />");
mysql_select_db($database);
$sql = "SELECT * FROM directions ORDER BY dirshortname";
$query = mysql_query($sql);
while ($row = mysql_fetch_array($query)) {
echo('<option value="'.stripslashes($row['dirshortname']).'|'.stripslashes($row['dirlongname']).'|'.stripslashes($row['dirphone']).'|'.stripslashes($row['dirstreet']).'|'.stripslashes($row['dircsz']).'|'.stripslashes($row['dirmaplink']).'"');
if ($editlocation==stripslashes($row['dirshortname']))
{
echo(' selected="selected"');
}
echo('>'.stripslashes($row['dirshortname']).'</option>');
}
?>
</select></td>
</tr>
<tr>
<td width="60"> </td>
<td colspan="2"><span class="main" style=" padding-left:12px; padding-right:12px; padding-top:6px"><br />
(Note:
Leaving the Long Name blank will duplicate the Short Name.)</span></td>
</tr>
<?php if(!$errlocationshortname=='' ){echo('
<tr>
<td width="60"> </td>
<td width="185"> </td>
<td width="342"><span class="redtxterror">'.$errlocationshortname.'</span></td>
</tr>');} ?>
<tr>
<td> </td>
<td>Location Short Name: <span class="red_star">*</span> </td>
<td><input name="LocationShortName" id="LocationShortName" type="text" class="input2<?php if(!$errlocationshortname==''){echo('r');} ?>" value="<?php echo($locationshortname); ?>" maxlength="50"></td>
</tr>
<?php if(!$errlocationlongname=='' ){echo('
<tr>
<td width="60"> </td>
<td width="185"> </td>
<td width="342"><span class="redtxterror">'.$errlocationlongname.'</span></td>
</tr>');} ?>
<tr>
<td> </td>
<td>Location Long Name: <span class="red_star">*</span> </td>
<td><input name="LocationLongName" id="LocationLongName" type="text" class="input2<?php if(!$errlocationlongname==''){echo('r');} ?>" value="<?php echo($locationlongname); ?>" maxlength="50"></td>
</tr>
<?php if(!$erraddress=='' ){echo('
<tr>
<td width="60"> </td>
<td width="185"> </td>
<td width="342"><span class="redtxterror">'.$erraddress.'</span></td>
</tr>');} ?>
<tr>
<td> </td>
<td>Street Address: <span class="red_star">*</span> </td>
<td><input name="Address1" id="Address1" type="text" class="input2<?php if(!$erraddress==''){echo('r');} ?>" value="<?php echo($address); ?>"></td>
</tr>
<?php if(!$errcsz=='' ){echo('
<tr>
<td width="60"> </td>
<td width="185"> </td>
<td width="342"><span class="redtxterror">'.$errcsz.'</span></td>
</tr>');} ?>
<tr>
<td> </td>
<td>City, State, Zip: <span class="red_star">*</span> </td>
<td><input name="CityStateZip" id="CityStateZip" type="text" class="input2<?php if(!$errcsz==''){echo('r');} ?>" value="<?php echo($csz); ?>"></td>
</tr>
<?php if(!$errphone=='' ){echo('
<tr>
<td width="60"> </td>
<td width="185"> </td>
<td width="342"><span class="redtxterror">'.$errphone.'</span></td>
</tr>');} ?>
<tr>
<td> </td>
<td>Location Phone Number: <span class="red_star">*</span> </td>
<td><input name="Phone" id="Phone" type="text" class="input2<?php if(!$errphone==''){echo('r');} ?>" value="<?php echo($phone); ?>" maxlength="20"></td>
</tr>
<?php if(!$errmaplink=='' ){echo('
<tr>
<td width="60"> </td>
<td width="185"> </td>
<td width="342"><span class="redtxterror">'.$errmaplink.'</span></td>
</tr>');} ?>
<tr>
<td> </td>
<td>Paste Link to Map: <span class="red_star">*</span> </td>
<td><input name="MapLink" id="MapLink" type="text" class="input2<?php if(!$errmaplink==''){echo('r');} ?>" value="<?php echo($maplink); ?>" maxlength="125"></td>
</tr>
<tr>
<td> </td>
<td> </td>
<td><div align="right" style="padding-right:25px">
<input type="hidden" id="action" name="action" value="submitform" />
<input type="submit" id="savenew" name="savenew" value="Save & New" />
<input type="submit" id="submit" name="submit" value="Save & Close" />
<?php if(!isset($_POST['action'])) {?>
<input type="reset" id="reset" name="reset" value="Reset" />
<?php } ?>
</div></td>
</tr><tr>
<td> </td>
<td> </td>
<td class="main_d"><div align="right" style="padding-right:25px">Your IP Address is Logged as: <?php echo($ip); ?></div></td>
</tr>
</table>
</form>
You access the form not the right way.
Create a variable for form like you do with the select:
var form = document.getElementById('form');
menu and itemDataArray values are after you set them?I'm guessing that you'll get "form is not an object" or something like that. IE has the wonderful annoying side effect of auto-creating objects from tags and tag ID's. You're not defining "form" inside your setFields() function, so FF will no doubt complain that the form variable doesn't exist. In IE, since it auto-creates stuff whenever it wants, it most likely created 'form' for you, but FF won't, so it's not working.