Skip to main content
W
westonjeff
Participating Frequently
July 30, 2012
Answered

Auto-fill text box field values based on pulldown selection

  • July 30, 2012
  • 1 reply
  • 6572 views

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>

    This topic has been closed for replies.
    Correct answer Steve Sommers

    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" . . .


    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.

    1 reply

    S
    Steve Sommers
    Legend
    July 30, 2012

    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.

    W
    westonjeffAuthor
    Participating Frequently
    July 30, 2012

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

    ?>

    S
    Steve Sommers
    Legend
    July 30, 2012

    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;

    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices