Copy link to clipboard
Copied
In your latest posted code, selectAddress is referencing "index" but I don't see it declared or assigned. I think you're missing a "var index=list.selectedIndex;" instruction.
Copy link to clipboard
Copied
Just for clarification, jquery is a javascript library and it works with all server side scripting languages; there are no php dependancies whatsoever. I love it and use it all the time. My first recomendation would be to use it and adjust this code whether or not you find a tweak that solves your immediate problem. That said, my guess is that the problem browsers do not support the user defined attributes you are using in the option tags. I would store the address information in a javascript array instead of the custom attributes. Then adjust your onChange code to pull from the aray.
Copy link to clipboard
Copied
Steve, thanks for your reply.
I hope to get accomplished with Jquery, but need some advice on how to revise PHP code (from previous posts' link -- http://stackoverflow.com/questions/3657127/jquery-populate-text-input- from-table-based-on-select-va...) to ColdFusion code using my query and variables (allLocations.locationAddress, allLocations.locationCity, allLocations.locationState, allLocations.locationZip).
I'm a novice at both arrays and javascript. Thanks for any and all help!
<?php
$clientId = $_POST['Client_ID']; // Selected Client Id
$query = "SELECT Address1, Address2 from Client where Client_ID = $clientId";
$result = mysql_query($query);
$row = mysql_fetch_array($result, MYSQL_ASSOC)
$add1 = $row[Address1];
$add2 = $row[Address2];
$gender = 1;
$arr = array( 'input#address1' => $add1, 'input#address2' => $add2, 'select#gender' => $gender );
echo json_encode( $arr );
?>
Copy link to clipboard
Copied
The example you are referencing uses AJAX. That is an option but for simplicity, you can make adjustments as follows:
To create your javascript array (based on the cfoutput loop in your original code):
<script type="text/javascript">
var addresses = [
<cfset variables.fs = "" />
<cfoutput query="allLocations">
#variables.fs#{
"locationName": "#jsStringFormat(locationName)#",
"locationAddress": "#jsStringFormat(locationAddress)#",
"locationCity": "#jsStringFormat(locationCity)#",
"locationState": "#jsStringFormat(locationState)#",
"locationZip": "#jsStringFormat(locationZip)#"
}
<cfset variables.fs = "," />
</cfoutput>
];
// reference as address[index].locationName...address[index].locationZip where index = 0-[arraysize-1]
...
</script>
Remove the custom attributes from the option tags. Adjust the onChange to simply reference the array for the values: var locationAddress = addresses[list.selectedIndex].locationAddress;
Copy link to clipboard
Copied
Thanks a million for the help Steve, the array is being created in source as follows:
<script type="text/javascript">
var addresses = [
{
"locationName": "Airport Park School",
"locationAddress": "",
"locationCity": "",
"locationState": "WI",
"locationZip": ""
}
,{
"locationName": "American Legion Golf Course",
"locationAddress": "1001 Golf Club Road",
"locationCity": "Wausau",
"locationState": "WI",
"locationZip": "54403"
}
but I'm lost at the
// reference as address[index].locationName...address[index].locationZip where index = 0-[arraysize-1]
direction, and just to double check, you named the Javascript var "addresses", so the "reference as address" s/b "reference as addresses" right?
I've tried many iterations of "onchange" adding other variables (locationCity, locationZip, etc.) but coming up empty.
Anyway, I wish I could buy you a beer or two for the help . . .
Here's where I'm at, which ain't working. If you have a minute to look over, it would be MUCH appreciated. Try not to laugh at my (what's probably ugly) Javascript code:
<!--- Code from Steve @ Adobe.com CF Forum --->
<script type="text/javascript">
var addresses = [
<cfset variables.fs = "" />
<cfoutput query="allLocations">
#variables.fs#{
"locationName": "#jsStringFormat(locationName)#",
"locationAddress": "#jsStringFormat(locationAddress)#",
"locationCity": "#jsStringFormat(locationCity)#",
"locationState": "#jsStringFormat(locationState)#",
"locationZip": "#jsStringFormat(locationZip)#"
}
<cfset variables.fs = "," />
</cfoutput>
];
// reference as address[index].locationName...address[index].locationZip where index = 0-[arraysize-1]
...
</script>
<tr>
<td align="right" bgcolor="#FFFFFF" valign="top">Name of Destination</td>
<td align="left" bgcolor="#FFFFFF" valign="top">
<select name="locationID" class="smallforms"
onChange="var locationAddress = addresses[list.selectedIndex].locationAddress;">
<option value="">SELECT DESTINATION ››››››››››</option>
<cfoutput query="allLocations">
<option value="#locationName#">#locationName#</option>
</cfoutput>
</select>
Other: <cfinput name="destinationNameOther" type="text" class="smallforms" size="75">
<br />
<cfoutput>
<input id="locationID" name="locationID" type="hidden"><br>
Address: <cfinput class="smallforms" id="locationAddress" name="locationAddress" type="text" size="30">
City: <cfinput class="smallforms" id="locationCity" name="locationCity" type="text" size="20">
State: <cfinput class="smallforms" id="locationState" name="locationState" type="text" size="2">
Zip: <cfinput class="smallforms" id="locationZip" name="locationZip" type="text" size="8"><br />
</cfoutput>
<br />
</td></tr>
Thanks again Steve . . . much appreciated!
Copy link to clipboard
Copied
No, my reference to change the onChange event was shorthand to change your currently defined selectAddress(list) function:
function selectAddress(list) {
// assume first item is empty
if (list.selectedIndex > 0) {
var locationID = list.options[list.selectedIndex].value;
var locationAddress = addresses[list.selectedIndex].locationAddress;
var locationCity = addresses[list.selectedIndex].locationCity;
var locationState = addresses[list.selectedIndex].locationState;
var locationZip = addresses[list.selectedIndex].locationZip;
document.getElementById('locationID').value = locationID;
document.getElementById('locationAddress').value = locationAddress;
document.getElementById('locationCity').value = locationCity;
document.getElementById('locationState').value = locationState;
document.getElementById('locationZip').value = locationZip;
}
}
Put your onChange event back the way it was with "selectAddress(this)".
I would also incorporate jquery while you're updating the function:
document.getElementById('locationID').value = locationID;
document.getElementById('locationAddress').value = locationAddress;
...
would instead be:
$('#locationID').val(locationID);
$('#locationAddress').val(locationAddress);
...
Copy link to clipboard
Copied
Once again, I can't thank you enough for your help, but I'm still not quite there . .
.
I've revised the "document.getElementByID" lines as suggested, and added call to Jquery script (<script src="jquery-1.4.2.min.js" type="text/javascript"></script>) in header, but form fields are not being populated.
Here's latest iteration of my code, without all the table code
<script type="text/javascript">
var addresses = [
<cfset variables.fs = "" />
<cfoutput query="allLocations">
#variables.fs#{
"locationID": "#jsStringFormat(locationID)#",
"locationName": "#jsStringFormat(locationName)#",
"locationAddress": "#jsStringFormat(locationAddress)#",
"locationCity": "#jsStringFormat(locationCity)#",
"locationState": "#jsStringFormat(locationState)#",
"locationZip": "#jsStringFormat(locationZip)#"
}
<cfset variables.fs = "," />
</cfoutput>
];
// reference as address[index].locationName...address[index].locationZip where index = 0-[arraysize-1]
</script>
<!--- Destinations with auto-fill of address, city, etc. --->
<script type="text/javascript">
function selectAddress(list) {
// assume first item is empty
if (list.selectedIndex > 0) {
var locationID = addresses[index].locationID;
var locationAddress = addresses[index].locationAddress;
var locationCity = addresses[index].locationCity;
var locationState = addresses[index].locationState;
var locationZip = addresses[index].locationZip;
$('#locationID').val(locationID);
$('#locationAddress').val(locationAddress);
$('#locationCity').val(locationCity);
$('#locationState').val(locationState);
$('#locationZip').val(locationZip);
where index = 0-[arraysize-1]
}
}
</script>
<select name="locationID" class="smallforms" onChange="selectAddress(this)">
<option value="">SELECT DESTINATION ››››››››››</option>
<cfoutput query="allLocations">
<option value="#locationName#">#locationName#</option>
</cfoutput>
</select>
<input id="locationID" name="locationID" type="hidden"><br>
Address: <cfinput class="smallforms" id="locationAddress" name="locationAddress" type="text" size="30">
City: <cfinput class="smallforms" id="locationCity" name="locationCity" type="text" size="20">
State: <cfinput class="smallforms" id="locationState" name="locationState" type="text" size="2">
Zip: <cfinput class="smallforms" id="locationZip" name="locationZip" type="text" size="8">
Sorry for "not getting it" . . .
Copy link to clipboard
Copied
In your latest posted code, selectAddress is referencing "index" but I don't see it declared or assigned. I think you're missing a "var index=list.selectedIndex;" instruction.
Copy link to clipboard
Copied
It's working (with a slight modification)!
Form fields (address, city, etc.) were getting populated, but the results were one record ahead of itself (select item #1, address, city, etc. for item #2 displayed).
Revised your initial <cfset variables.fs = "" /> to <cfset variables.fs = "," /> and results are perfect.
Thanks for your patience and quick replies to my needs.
Copy link to clipboard
Copied
I don't think your fix will work on all browsers. Your fix relies on an empty first element in the array by starting with the comma (look at the source, you'll see var addresses = [,{...},{...}];) Not all browsers like the first comma without any data. A better solution would be to adjust the index value in selectAddress by subtracting one from it: var index = list.selectedIndex-1;
Copy link to clipboard
Copied
Steve, you're the best! Can't thank you enough.