10 Replies Latest reply: Aug 1, 2012 4:47 AM by westonjeff RSS

    Auto-fill text box field values based on pulldown selection

    westonjeff

      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>

        • 1. Re: Auto-fill text box field values based on pulldown selection
          Steve Sommers Community Member

          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.

          • 2. Re: Auto-fill text box field values based on pulldown selection
            westonjeff Community Member

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

            ?>

             

             

            • 3. Re: Auto-fill text box field values based on pulldown selection
              Steve Sommers Community Member

              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;

              • 4. Re: Auto-fill text box field values based on pulldown selection
                westonjeff Community Member

                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!

                • 5. Re: Auto-fill text box field values based on pulldown selection
                  Steve Sommers Community Member

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

                  ...

                  • 6. Re: Auto-fill text box field values based on pulldown selection
                    westonjeff Community Member

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

                    • 7. Re: Auto-fill text box field values based on pulldown selection
                      Steve Sommers Community Member

                      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.

                      • 8. Re: Auto-fill text box field values based on pulldown selection
                        westonjeff Community Member

                        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.

                        • 9. Re: Auto-fill text box field values based on pulldown selection
                          Steve Sommers Community Member

                          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;

                          • 10. Re: Auto-fill text box field values based on pulldown selection
                            westonjeff Community Member

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