Skip navigation
Currently Being Moderated

Auto-fill text box field values based on pulldown selection

Jul 30, 2012 7:50 AM

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-value

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>

 
Replies
  • Currently Being Moderated
    Jul 30, 2012 9:53 AM   in reply to westonjeff

    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.

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 30, 2012 10:48 AM   in reply to westonjeff

    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;

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 30, 2012 3:29 PM   in reply to westonjeff

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

    ...

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 31, 2012 11:29 AM   in reply to westonjeff

    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.

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 31, 2012 4:48 PM   in reply to westonjeff

    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;

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points