• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

Auto-fill text box field values based on pulldown selection

New Here ,
Jul 30, 2012 Jul 30, 2012

Copy link to clipboard

Copied

Trying to fill in address, city, state, zip text fields based on option selected in a select form field. The following code works great in Internet Explorer, but in Chrome or Firefox, after making selection, text fields are populated with the word "undefined."

I've found a PHP version of Jquery script here that would probabably fit the bill.
http://stackoverflow.com/questions/3657127/jquery-populate-text-input-from-table-based-on-select-val...

Maybe someone has a CF version they could share?

Thanks in advance to any who can point me to a solution for this code, or a better way to accomplish my need.

<!--- 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 = list.options[list.selectedIndex].value;
                  var locationAddress = list.options[list.selectedIndex].locationAddress;
                  var locationCity = list.options[list.selectedIndex].locationCity;
              var locationState = list.options[list.selectedIndex].locationState;
              var locationZip = list.options[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;
            }
      }
</script>
<tr>
<td align="right" bgcolor="#FFFFFF" valign="top">Name of Destination</td>
<td align="left" bgcolor="#FFFFFF" valign="top">
   <select name="locationID" onChange="selectAddress(this)" class="smallforms">
             <option value="">SELECT DESTINATION ››››››››››</option>
             <cfoutput query="allLocations">
                   <option value="#locationName#" locationAddress="#allLocations.locationAddress#" locationCity="#allLocations.locationCity#" locationState="#allLocations.locationState#" locationZip="#allLocations.locationZip#">#locationName#</option>
             </cfoutput>
        </select> 
     
      Other: <cfinput name="destinationNameOther" type="text" class="smallforms" size="75">
      <br />
       <input id="locationID" name="locationID" type="hidden"><br>
         Address:    <input class="smallforms" id="locationAddress"    name="locationAddress"    type="text" size="30"> 
         City:       <input class="smallforms" id="locationCity"    name="locationCity"    type="text" size="20"> 
         State:       <input class="smallforms" id="locationState"    name="locationState"    type="text" size="2"> 
         Zip:       <input class="smallforms" id="locationZip"       name="locationZip"       type="text" size="8"><br />
<br />
</td></tr>

Views

6.2K

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct answer

Advocate , Jul 31, 2012 Jul 31, 2012

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.

Votes

Translate

Translate
Advocate ,
Jul 30, 2012 Jul 30, 2012

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Jul 30, 2012 Jul 30, 2012

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 );

?>

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Advocate ,
Jul 30, 2012 Jul 30, 2012

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;

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Jul 30, 2012 Jul 30, 2012

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 &#8250;&#8250;&#8250;&#8250;&#8250;&#8250;&#8250;&#8250;&#8250;&#8250;</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!

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Advocate ,
Jul 30, 2012 Jul 30, 2012

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);

...

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Jul 31, 2012 Jul 31, 2012

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 &#8250;&#8250;&#8250;&#8250;&#8250;&#8250;&#8250;&#8250;&#8250;&#8250;</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" . . .

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Advocate ,
Jul 31, 2012 Jul 31, 2012

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Jul 31, 2012 Jul 31, 2012

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Advocate ,
Jul 31, 2012 Jul 31, 2012

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;

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Aug 01, 2012 Aug 01, 2012

Copy link to clipboard

Copied

LATEST

Steve, you're the best! Can't thank you enough.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Resources
Documentation