Splitting data from MySQL using PHP & Javascript works in IE but not in FF
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开发者_Go百科('>'.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>
- Have you checked FF's Javascript console (shift-ctrl-J) for any errors?
- Have you tried using a Javascript debugger (like FF's FireBug) to see what the
menu
anditemDataArray
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.
You access the form not the right way.
Create a variable for form like you do with the select:
var form = document.getElementById('form');
精彩评论