Connecting Tech Pros Worldwide Help | Site Map
bytes > topic > javascript > answers

Autofill form fields, almost working

Site Addict
  
Join Date: Aug 2008
Location: United States
Posts: 769
#1: Aug 26 '08
Hey Everyone,

Well after asking many questions i have this almost working.

This is how it works. Basically i fill in my customer number field an that populates my drop down box. Once i select an option from the drop down box it populates the rest of the form. The problem i am having is that if a customer number doesn't exist in the drop down box an i try to put a new customer number in the input say 538 an then click on another field such as first name i get an error saying Object expected. An well i can't figure out why its saying that. An could really use some help as to why i am getting this error.

i started a topic earlier about this which you can see here. don't know if this will help in anyway but thought i would post it anyway.
http://bytes.com/forum/showthread.ph...05#post3315805

here is my form
Expand|Select|Wrap|Line Numbers
  1. Customer Number*:<input type="text" name="custnum" id="clientID" value=""  ONKEYUP="autoComplete(this,this.form.options,'value',false)"  onChange="validate(this.form.custnum,'Customer Number')"/>
  2. <SELECT NAME="options" id="options"
  3. onChange="this.form.custnum.value=this.options[this.selectedIndex].value;javascript:initFormEvents();">
  4. <cfoutput query="getcustnum">
  5. <option value="#fk_custNum#">#fk_custNum#</option>
  6. </cfoutput>
  7. </SELECT>
  8. First name: <input type="text" name="fname" id="fname" value="" size="20"/>
here is the javascript that appears on my form.
Expand|Select|Wrap|Line Numbers
  1. <SCRIPT LANGUAGE="JavaScript" SRC="autocomplete.js"></SCRIPT>
  2.     <script type="text/javascript" src="ajax.js"></script>
  3.     <script type="text/javascript">
  4.  
  5. var ajax = new sack();
  6.     var currentClientID=false;
  7.     function getClientData()
  8.     {
  9.         var clientId = document.getElementById('clientID').value;
  10.             currentClientID = clientId
  11.             ajax.requestFile = 'getClient.cfm?custnum='+clientId;    // Specifying which file to get
  12.             ajax.onCompletion = showClientData;    // Specify function that will be executed after file has been found
  13.             ajax.runAJAX();        // Execute AJAX function            
  14.  
  15.     }
  16.  
  17.     function showClientData()
  18.     {
  19.         var formObj = document.forms['page1'];    
  20.         eval(ajax.response);
  21.     }
  22.  
  23.  
  24.     function initFormEvents()
  25.     {
  26.         document.getElementById("options").onchange = getClientData;
  27.     }
  28.  
  29.     window.onload = initFormEvents;
  30.     </script>
  31.  
heres whats on my autocomplete.js file
Expand|Select|Wrap|Line Numbers
  1. function autoComplete (field, select, property, forcematch) {
  2.     var found = false;
  3.     for (var i = 0; i < select.options.length; i++) {
  4.     if (select.options[i][property].toUpperCase().indexOf(field.value.toUpperCase()) == 0) {
  5.         found=true; break;
  6.         }
  7.     }
  8.     if (found) { select.selectedIndex = i; }
  9.     else { select.selectedIndex = -1; }
  10.     if (field.createTextRange) {
  11.         if (forcematch && !found) {
  12.             field.value=field.value.substring(0,field.value.length-1); 
  13.             return;
  14.             }
  15.         var cursorKeys ="8;46;37;38;39;40;33;34;35;36;45;";
  16.         if (cursorKeys.indexOf(event.keyCode+";") == -1) {
  17.             var r1 = field.createTextRange();
  18.             var oldValue = r1.text;
  19.             var newValue = found ? select.options[i][property] : oldValue;
  20.             if (newValue != field.value) {
  21.                 field.value = newValue;
  22.                 var rNew = field.createTextRange();
  23.                 rNew.moveStart('character', oldValue.length) ;
  24.                 rNew.select();
  25.                 }
  26.             }
  27.         }
  28.     }
here what appears on my ajax.js file

Expand|Select|Wrap|Line Numbers
  1. function sack(file) {
  2.     this.xmlhttp = null;
  3.  
  4.     this.resetData = function() {
  5.         this.method = "POST";
  6.           this.queryStringSeparator = "?";
  7.         this.argumentSeparator = "&";
  8.         this.URLString = "";
  9.         this.encodeURIString = true;
  10.           this.execute = false;
  11.           this.element = null;
  12.         this.elementObj = null;
  13.         this.requestFile = file;
  14.         this.vars = new Object();
  15.         this.responseStatus = new Array(2);
  16.       };
  17.  
  18.     this.resetFunctions = function() {
  19.           this.onLoading = function() { };
  20.           this.onLoaded = function() { };
  21.           this.onInteractive = function() { };
  22.           this.onCompletion = function() { };
  23.           this.onError = function() { };
  24.         this.onFail = function() { };
  25.     };
  26.  
  27.     this.reset = function() {
  28.         this.resetFunctions();
  29.         this.resetData();
  30.     };
  31.  
  32.     this.createAJAX = function() {
  33.         try {
  34.             this.xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
  35.         } catch (e1) {
  36.             try {
  37.                 this.xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
  38.             } catch (e2) {
  39.                 this.xmlhttp = null;
  40.             }
  41.         }
  42.  
  43.         if (! this.xmlhttp) {
  44.             if (typeof XMLHttpRequest != "undefined") {
  45.                 this.xmlhttp = new XMLHttpRequest();
  46.             } else {
  47.                 this.failed = true;
  48.             }
  49.         }
  50.     };
  51.  
  52.     this.setVar = function(name, value){
  53.         this.vars[name] = Array(value, false);
  54.     };
  55.  
  56.     this.encVar = function(name, value, returnvars) {
  57.         if (true == returnvars) {
  58.             return Array(encodeURIComponent(name), encodeURIComponent(value));
  59.         } else {
  60.             this.vars[encodeURIComponent(name)] = Array(encodeURIComponent(value), true);
  61.         }
  62.     }
  63.  
  64.     this.processURLString = function(string, encode) {
  65.         encoded = encodeURIComponent(this.argumentSeparator);
  66.         regexp = new RegExp(this.argumentSeparator + "|" + encoded);
  67.         varArray = string.split(regexp);
  68.         for (i = 0; i < varArray.length; i++){
  69.             urlVars = varArray[i].split("=");
  70.             if (true == encode){
  71.                 this.encVar(urlVars[0], urlVars[1]);
  72.             } else {
  73.                 this.setVar(urlVars[0], urlVars[1]);
  74.             }
  75.         }
  76.     }
  77.  
  78.     this.createURLString = function(urlstring) {
  79.         if (this.encodeURIString && this.URLString.length) {
  80.             this.processURLString(this.URLString, true);
  81.         }
  82.  
  83.         if (urlstring) {
  84.             if (this.URLString.length) {
  85.                 this.URLString += this.argumentSeparator + urlstring;
  86.             } else {
  87.                 this.URLString = urlstring;
  88.             }
  89.         }
  90.  
  91.         // prevents caching of URLString
  92.         this.setVar("rndval", new Date().getTime());
  93.  
  94.         urlstringtemp = new Array();
  95.         for (key in this.vars) {
  96.             if (false == this.vars[key][1] && true == this.encodeURIString) {
  97.                 encoded = this.encVar(key, this.vars[key][0], true);
  98.                 delete this.vars[key];
  99.                 this.vars[encoded[0]] = Array(encoded[1], true);
  100.                 key = encoded[0];
  101.             }
  102.  
  103.             urlstringtemp[urlstringtemp.length] = key + "=" + this.vars[key][0];
  104.         }
  105.         if (urlstring){
  106.             this.URLString += this.argumentSeparator + urlstringtemp.join(this.argumentSeparator);
  107.         } else {
  108.             this.URLString += urlstringtemp.join(this.argumentSeparator);
  109.         }
  110.     }
  111.  
  112.     this.runResponse = function() {
  113.         eval(this.response);
  114.     }
  115.  
  116.     this.runAJAX = function(urlstring) {
  117.         if (this.failed) {
  118.             this.onFail();
  119.         } else {
  120.             this.createURLString(urlstring);
  121.             if (this.element) {
  122.                 this.elementObj = document.getElementById(this.element);
  123.             }
  124.             if (this.xmlhttp) {
  125.                 var self = this;
  126.                 if (this.method == "GET") {
  127.                     totalurlstring = this.requestFile + this.queryStringSeparator + this.URLString;
  128.                     this.xmlhttp.open(this.method, totalurlstring, true);
  129.                 } else {
  130.                     this.xmlhttp.open(this.method, this.requestFile, true);
  131.                     try {
  132.                         this.xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded")
  133.                     } catch (e) { }
  134.                 }
  135.  
  136.                 this.xmlhttp.onreadystatechange = function() {
  137.                     switch (self.xmlhttp.readyState) {
  138.                         case 1:
  139.                             self.onLoading();
  140.                             break;
  141.                         case 2:
  142.                             self.onLoaded();
  143.                             break;
  144.  
  145.                         case 3:
  146.                             self.onInteractive();
  147.                             break;
  148.                         case 4:
  149.                             self.response = self.xmlhttp.responseText;
  150.                             self.responseXML = self.xmlhttp.responseXML;
  151.                             self.responseStatus[0] = self.xmlhttp.status;
  152.                             self.responseStatus[1] = self.xmlhttp.statusText;
  153.  
  154.                             if (self.execute) {
  155.                                 self.runResponse();
  156.                             }
  157.  
  158.                             if (self.elementObj) {
  159.                                 elemNodeName = self.elementObj.nodeName;
  160.                                 elemNodeName.toLowerCase();
  161.                                 if (elemNodeName == "input"
  162.                                 || elemNodeName == "select"
  163.                                 || elemNodeName == "option"
  164.                                 || elemNodeName == "textarea") {
  165.                                     self.elementObj.value = self.response;
  166.                                 } else {
  167.                                     self.elementObj.innerHTML = self.response;
  168.                                 }
  169.                             }
  170.                             if (self.responseStatus[0] == "200") {
  171.                                 self.onCompletion();
  172.                             } else {
  173.                                 self.onError();
  174.                             }
  175.  
  176.                             self.URLString = "";
  177.                             break;
  178.                     }
  179.                 };
  180.  
  181.                 this.xmlhttp.send(this.URLString);
  182.             }
  183.         }
  184.     };
  185.  
  186.     this.reset();
  187.     this.createAJAX();
  188. }
Thank you in advance,
Rach
Page 1 of 2 1 2 >
Familiar Sight
  
Join Date: Feb 2007
Posts: 207
#2: Aug 27 '08

re: Autofill form fields, almost working

Quote:

Originally Posted by bonneylake

Expand|Select|Wrap|Line Numbers
  1. <SELECT NAME="options" id="options"
  2. onChange="this.form.custnum.value=this.options[this.selectedIndex].value;javascript:initFormEvents();">

You can't name a <select> 'options' since it has such a property already and it's causing an addressing error.
Site Addict
  
Join Date: Aug 2008
Location: United States
Posts: 769
#3: Aug 27 '08

re: Autofill form fields, almost working

Hey Logician,

Well i tried that but i am still getting the same error. an i had to make some changes because i realized after i tried to do what you told me that my form was not even auto populating. An i also realized i am getting the same error when i try to create a new customer number an also when i autopopulate the form which makes me wonder if maybe the problem is with onchange? but here is the parts i changed everything else is the same.

javascript on form page
Expand|Select|Wrap|Line Numbers
  1. var ajax = new sack();
  2.     var currentClientID=false;
  3.     function getClientData()
  4.     {
  5.         var clientId = document.getElementById('clientID').value;
  6.             currentClientID = clientId
  7.             ajax.requestFile = 'getClient.cfm?custnum='+clientId;    // Specifying which file to get
  8.             ajax.onCompletion = showClientData;    // Specify function that will be executed after file has been found
  9.             ajax.runAJAX();        // Execute AJAX function            
  10.  
  11.     }
  12.  
  13.     function showClientData()
  14.     {
  15.         var formObj = document.forms['page1'];    
  16.         eval(ajax.response);
  17.     }
  18.  
  19.  
  20.     function initFormEvents()
  21.     {
  22.         document.getElementById('clientID').onblur = getClientData;
  23.         document.getElementById('clientID').focus();
  24.         document.getElementById("options").onchange = getClientData;
  25.     }
  26.  
  27.  
  28.     window.onload = initFormEvents;
html part
Expand|Select|Wrap|Line Numbers
  1. Customer Number*:<input type="text" name="custnum" id="clientID" value=""  ONKEYUP="autoComplete(this,this.form.options,'value',false)"  onChange="validate(this.form.custnum,'Customer Number')"/>
  2. <SELECT NAME="customer" id="options"
  3. onChange="this.form.custnum.value=this.options[this.selectedIndex].value;javascript:initFormEvents();">
  4. <cfoutput query="getcustnum">
  5. <option value="#fk_custNum#">#fk_custNum#</option>
  6. </cfoutput>
  7. </SELECT>
Thank you for all the help :),
Rach
acoder's Avatar
Site Moderator
  
Join Date: Nov 2006
Location: UK
Posts: 14,581
#4: Aug 27 '08

re: Autofill form fields, almost working

The reason the auto-complete isn't working is that you forgot to change this line
Expand|Select|Wrap|Line Numbers
  1. autoComplete(this,this.form.options,'value',false)
to refer to the new name:
Expand|Select|Wrap|Line Numbers
  1. autoComplete(this,this.form.customer,'value',false)
Site Addict
  
Join Date: Aug 2008
Location: United States
Posts: 769
#5: Aug 27 '08

re: Autofill form fields, almost working

Hey Acoder,

the autocomplete is working. but i am still getting the error of object expected.

here is what i changed

Expand|Select|Wrap|Line Numbers
  1. Customer Number*:<input type="text" name="custnum" id="clientID" value=""  ONKEYUP="autoComplete(this,this.form.customer,'value',false)"  onChange="validate(this.form.custnum,'Customer Number')"/>
  2. <SELECT NAME="customer" id="options"
  3. onChange="this.form.custnum.value=this.options[this.selectedIndex].value;javascript:initFormEvents();">
  4. <cfoutput query="getcustnum">
  5. <option value="#fk_custNum#">#fk_custNum#</option>
  6. </cfoutput>
  7. </SELECT>
any suggestions, Thank you :),
Rach
acoder's Avatar
Site Moderator
  
Join Date: Nov 2006
Location: UK
Posts: 14,581
#6: Aug 27 '08

re: Autofill form fields, almost working

What line does the error occur on? Check the error console in a decent browser such as Firefox - it'll give you more information about the error, if indeed it occurs in that browser.
Site Addict
  
Join Date: Aug 2008
Location: United States
Posts: 769
#7: Aug 27 '08

re: Autofill form fields, almost working

Hey Acoder,

when i tried it out in firefox it says validate is not defined.also, when i try to type in a different customer number an go to another field it gets rid of what i typed in customer number in firefox, but it doesn't do this in internet explorer just gives me an error.

Thank you,
Rach
acoder's Avatar
Site Moderator
  
Join Date: Nov 2006
Location: UK
Posts: 14,581
#8: Aug 27 '08

re: Autofill form fields, almost working

Well, that's a lot more useful. Have you actually defined validate() anywhere?
Site Addict
  
Join Date: Aug 2008
Location: United States
Posts: 769
#9: Aug 27 '08

re: Autofill form fields, almost working

Hey Acoder,

as far as i know, no. I looked through all the files i have for the word validate. An only place that has validate is here

Expand|Select|Wrap|Line Numbers
  1. Customer Number*:<input type="text" name="custnum" id="clientID" value=""  ONKEYUP="autoComplete(this,this.form.customer,'value',false)"  onChange="validate(this.form.custnum,'Customer Number')"/>
i took validate out an i don't get the error anymore when i autopopulate or type something different into the customer number, so can i leave the validate part out of it? heres it updated without validate

Expand|Select|Wrap|Line Numbers
  1. Customer Number*:<input type="text" name="custnum" id="clientID" value=""  ONKEYUP="autoComplete(this,this.form.customer,'value',false)"  onChange="this.form.custnum,'Customer Number'"/>
However, i am still having trouble with it. when i type something into customer number an it doesn't exist in the drop down an i go to click into another field it completely gets ride of what i typed in the customer number field. Any suggestions on how to fix that?

Thank you :),
Rach
acoder's Avatar
Site Moderator
  
Join Date: Nov 2006
Location: UK
Posts: 14,581
#10: Aug 27 '08

re: Autofill form fields, almost working

Get rid of the onchange completely. You must have copied the code from somewhere that used a validate() function onchange.
Site Addict
  
Join Date: Aug 2008
Location: United States
Posts: 769
#11: Aug 27 '08

re: Autofill form fields, almost working

Hey Acoder,

The only thing wrong with taking out onchange is that then it doesn't populate the drop down box right. Like lets say i have 2 customer number values one called 4 and one called 444. If i just type 4 its putting 444 an when i go and take out the extra 2 4's its not changing the drop down box to 4 and instead its leaving it as 444 even though i typed in just 4(i hope that makes since) .

an the way i am trying to get it to work is if i start typing in customer number , as i am typeing in the customer number it populates the drop down box an then when you choose the value in the drop down box it populates the form.

but can i leave onchange in there or is that going to continue to cause trouble?

Thank you,
Rach
acoder's Avatar
Site Moderator
  
Join Date: Nov 2006
Location: UK
Posts: 14,581
#12: Aug 27 '08

re: Autofill form fields, almost working

Does the following not work?
Expand|Select|Wrap|Line Numbers
  1. Customer Number*:<input type="text" name="custnum" id="clientID" value=""  ONKEYUP="autoComplete(this,this.form.customer,'value',false  )"/>
Site Addict
  
Join Date: Aug 2008
Location: United States
Posts: 769
#13: Aug 27 '08

re: Autofill form fields, almost working

Acoder,

it does, but then it doesn't work. ok heres an example. lets say i type 1. 1 is the name of the customer number i want. But its trying to guess the number so behind the 1 in my input field it adds 024 (which is another field called 1024), an would like to get it to stop guessing the number for me in my input field as well if thats possible. but anyway it puts 1024 also in my dropdown box. well when i remove the rest of the 1024 and put 1 it doesn't update the dropdown box from 1024 to 1 and instead remains 1024. however, it does populate the rest of the form with the correct information. Just need the drop down box to work correctly. Hope this makes since.

Thank you,
Rach
acoder's Avatar
Site Moderator
  
Join Date: Nov 2006
Location: UK
Posts: 14,581
#14: Aug 27 '08

re: Autofill form fields, almost working

I tested with this simple example and it works fine:
Expand|Select|Wrap|Line Numbers
  1. <form>
  2. Customer Number*:<input type="text" name="custnum" id="clientID" value=""  ONKEYUP="autoComplete(this,this.form.customer,'value',false)">
  3. <SELECT NAME="customer" id="options"
  4. onChange="this.form.custnum.value=this.options[this.selectedIndex].value;">
  5. <option value="1">1</option>
  6. <option value="1024">1024</option>
  7. </SELECT>
  8. </form>
Site Addict
  
Join Date: Aug 2008
Location: United States
Posts: 769
#15: Aug 27 '08

re: Autofill form fields, almost working

Hey Acoder,

yep you are right your example works like it needs to. Typed yours in an it worked. But what i have is not working at all an makes no since to me! When i start typing in something it keeps auto filling the input field with a value thats in the dropdown box.like if i type 1 it puts 024 in blue right behind it in the input field and makes the drop down box 1024. It doesn't even seem to recognize 1 because when i type 1, 1 doesn't come up only the 1024 number. But when i click off of it, it auto fills the form with the values from customer number 1 it just doesn't change the drop down box from 1024 to 1.

but heres the form again
Expand|Select|Wrap|Line Numbers
  1. Customer Number*:<input type="text" name="custnum" id="clientID" value=""  ONKEYUP="autoComplete(this,this.form.customer,'value',false)"  <!---onChange="this.form.custnum,'Customer Number'"--->/>
  2. <SELECT NAME="customer" id="options"
  3. onChange="this.form.custnum.value=this.options[this.selectedIndex].value;<!---javascript:initFormEvents();--->">
  4. <cfoutput query="getcustnum">
  5. <option value="#fk_custNum#">#fk_custNum#</option>
  6. </cfoutput>
  7. </SELECT>
an here is the javascript on the form page.
Expand|Select|Wrap|Line Numbers
  1. <script type="text/javascript">
  2.  
  3. var ajax = new sack();
  4.     var currentClientID=false;
  5.     function getClientData()
  6.     {
  7.         var clientId = document.getElementById('clientID').value;
  8.             currentClientID = clientId
  9.             ajax.requestFile = 'getClient.cfm?custnum='+clientId;    // Specifying which file to get
  10.             ajax.onCompletion = showClientData;    // Specify function that will be executed after file has been found
  11.             ajax.runAJAX();        // Execute AJAX function            
  12.  
  13.     }
  14.  
  15.     function showClientData()
  16.     {
  17.         var formObj = document.forms['page1'];    
  18.         eval(ajax.response);
  19.     }
  20.  
  21.  
  22.     function initFormEvents()
  23.     {
  24.         document.getElementById('clientID').onblur = getClientData;
  25.         document.getElementById('clientID').focus();
  26.         document.getElementById("options").onchange = getClientData;
  27.     }
  28.  
  29.  
  30.     window.onload = initFormEvents;
  31.     </script>
  32.  
Thank you for all the help,
Rach
acoder's Avatar
Site Moderator
  
Join Date: Nov 2006
Location: UK
Posts: 14,581
#16: Aug 27 '08

re: Autofill form fields, almost working

What values does the getcustnum query return? In other words, what values do you have for the options for the select drop-down? View the source in your browser.
Site Addict
  
Join Date: Aug 2008
Location: United States
Posts: 769
#17: Aug 27 '08

re: Autofill form fields, almost working

Hey Acoder,

According to it i have 1 and 1024 in there. i viewed the drop down and looked at the source.


Expand|Select|Wrap|Line Numbers
  1. <option value="222">222</option>
  2.  
  3. <option value="777">777</option>
  4.  
  5. <option value="555">555</option>
  6.  
  7. <option value="333">333</option>
  8.  
  9. <option value="32">32</option>
  10.  
  11. <option value="234">234</option>
  12.  
  13. <option value="324">324</option>
  14.  
  15. <option value="3">3</option>
  16.  
  17. <option value="1024">1024</option>
  18.  
  19. <option value="666">666</option>
  20.  
  21. <option value="444">444</option>
  22.  
  23. <option value="1">1</option>
  24.  
  25. <option value="1111">1111</option>
  26.  
  27. <option value="3333">3333</option>
i am baffled.

Thank you,
Rach
acoder's Avatar
Site Moderator
  
Join Date: Nov 2006
Location: UK
Posts: 14,581
#18: Aug 27 '08

re: Autofill form fields, almost working

The most likely cause is that values need to be sorted, so modify your query to return the values in order.
Site Addict
  
Join Date: Aug 2008
Location: United States
Posts: 769
#19: Aug 27 '08

re: Autofill form fields, almost working

Hey Acoder,

Alrighty i got that right so now 1 comes up before the other (yay). But still running into another problem *sigh*. When i try to type something into customer number that doesn't exist in the drop down an go to another field it complete deletes what i had tried to type before.

heres the html
Expand|Select|Wrap|Line Numbers
  1. Customer Number*:<input type="text" name="custnum" id="clientID" value=""  ONKEYUP="autoComplete(this,this.form.customer,'value',false)"  />
  2. <SELECT NAME="customer" id="options"
  3. onChange="this.form.custnum.value=this.options[this.selectedIndex].value;javascript:initFormEvents();">
  4. <cfoutput query="getcustnum">
  5. <option value="#fk_custNum#">#fk_custNum#</option>
  6. </cfoutput>
  7. </SELECT>
heres the javascript that appears with the html

Expand|Select|Wrap|Line Numbers
  1. var ajax = new sack();
  2.     var currentClientID=false;
  3.     function getClientData()
  4.     {
  5.         var clientId = document.getElementById('clientID').value;
  6.             currentClientID = clientId
  7.             ajax.requestFile = 'getClient.cfm?custnum='+clientId;    // Specifying which file to get
  8.             ajax.onCompletion = showClientData;    // Specify function that will be executed after file has been found
  9.             ajax.runAJAX();        // Execute AJAX function            
  10.  
  11.     }
  12.  
  13.     function showClientData()
  14.     {
  15.         var formObj = document.forms['page1'];    
  16.         eval(ajax.response);
  17.     }
  18.  
  19.  
  20.     function initFormEvents()
  21.     {
  22.         document.getElementById('clientID').onblur = getClientData;
  23.         document.getElementById('clientID').focus();
  24.         document.getElementById("options").onchange = getClientData;
  25.     }
  26.  
  27.  
  28.     window.onload = initFormEvents;
Thank you,
Rach
acoder's Avatar
Site Moderator
  
Join Date: Nov 2006
Location: UK
Posts: 14,581
#20: Aug 27 '08

re: Autofill form fields, almost working

Why are you calling initFormEvents() in the onchange?
Site Addict
  
Join Date: Aug 2008
Location: United States
Posts: 769
#21: Aug 27 '08

re: Autofill form fields, almost working

Hey Acoder,

well i did that so that when i click on the drop down box it will auto fill the form fields instead of when i type in the value into the input box an then click enter or go to click into another field. Could that be causing the problem?

Thank you,
Rach
acoder's Avatar
Site Moderator
  
Join Date: Nov 2006
Location: UK
Posts: 14,581
#22: Aug 28 '08

re: Autofill form fields, almost working

In that case, you just need to call getClientData() instead of initFormEvents.
Site Addict
  
Join Date: Aug 2008
Location: United States
Posts: 769
#23: Aug 28 '08

re: Autofill form fields, almost working

Hey Acoder,

alrighty did that but i am still getting errors. When i did it on internet explorer i got unterminated string constant as the error. an when i did it in firefox i got this error
unterminated string literal an then this line
Expand|Select|Wrap|Line Numbers
  1. formObj.notes.value = "notes
heres the javascript that is on the form.
Expand|Select|Wrap|Line Numbers
  1. <SCRIPT LANGUAGE="JavaScript" SRC="autocomplete.js"></SCRIPT>
  2.     <script type="text/javascript" src="ajax.js"></script>
  3.     <script type="text/javascript">
  4.  
  5. var ajax = new sack();
  6.     var currentClientID=false;
  7.     function getClientData()
  8.     {
  9.         var clientId = document.getElementById('clientID').value;
  10.             currentClientID = clientId
  11.             ajax.requestFile = 'getClient.cfm?custnum='+clientId;    // Specifying which file to get
  12.             ajax.onCompletion = showClientData;    // Specify function that will be executed after file has been found
  13.             ajax.runAJAX();        // Execute AJAX function            
  14.  
  15.     }
  16.  
  17.     function showClientData()
  18.     {
  19.         var formObj = document.forms['page1'];    
  20.         eval(ajax.response);
  21.     }
  22.  
  23.  
  24.     function initFormEvents()
  25.     {
  26.         document.getElementById('clientID').onblur = getClientData;
  27.         document.getElementById('clientID').focus();
  28.         document.getElementById("options").onchange = getClientData;
  29.     }
  30.  
  31.  
  32.     window.onload = initFormEvents;
  33.     </script>
an here is the form itself

Expand|Select|Wrap|Line Numbers
  1. Customer Number*:<input type="text" name="custnum" id="clientID" value=""  ONKEYUP="autoComplete(this,this.form.customer,'value',false)"  />
  2. <SELECT NAME="customer" id="options"
  3. onChange="this.form.custnum.value=this.options[this.selectedIndex].value;javascript:getClientData();">
  4. <cfoutput query="getcustnum">
  5. <option value="#fk_custNum#">#fk_custNum#</option>
  6. </cfoutput>
  7. </SELECT>
Thank you,
Rach
acoder's Avatar
Site Moderator
  
Join Date: Nov 2006
Location: UK
Posts: 14,581
#24: Aug 28 '08

re: Autofill form fields, almost working

That's a line in your Coldfusion code. Check that it's returning the correct data by running the Coldfusion page with the customer number that you're testing with. See what the output is.
Site Addict
  
Join Date: Aug 2008
Location: United States
Posts: 769
#25: Aug 28 '08

re: Autofill form fields, almost working

Hey Acoder,

Yep i am getting the right information. i was messing with it earlier an somehow got the error to go away (not sure what i did). But now it is working correctly. I thought i had information in customer number 1024, but i guess i didn't which is why nothing was working right (blond moment).

but i got one more question. how would i make it so instead of if auto populating after i type the number in an try to do something else. how could i make it so that it will only autopopulate once i select the option that auto populated in the drop down box?

Thank you again for all the help :),
Rach
acoder's Avatar
Site Moderator
  
Join Date: Nov 2006
Location: UK
Posts: 14,581
#26: Aug 28 '08

re: Autofill form fields, almost working

Remove this line:
Expand|Select|Wrap|Line Numbers
  1. document.getElementById('clientID').onblur = getClientData;
Site Addict
  
Join Date: Aug 2008
Location: United States
Posts: 769
#27: Aug 28 '08

re: Autofill form fields, almost working

Hey Acoder,

Alrighty i did that but i got one last problem. When i type in a number in the customer number. an the drop down box says the same number as the customer number. when i go to click on it, it wont autofill. if i choose another option it will autofill with that customer number information. an if i go back to the number that i was trying to autofill in the first place it will. but when i go to click on it when i first tell it to autopopulate it wont. any suggestions?

Expand|Select|Wrap|Line Numbers
  1.     function initFormEvents()
  2.     {
  3.           <!---document.getElementById('clientID').onblur = getClientData;--->
  4.         document.getElementById('clientID').focus();
  5.         document.getElementById("options").onchange = getClientData
  6.  
  7.     }
Thank you,
Rach
acoder's Avatar
Site Moderator
  
Join Date: Nov 2006
Location: UK
Posts: 14,581
#28: Aug 29 '08

re: Autofill form fields, almost working

You could try adding this line to initFormEvents:
Expand|Select|Wrap|Line Numbers
  1. document.getElementById("options").onblur = getClientData;
The only problem with it is that it could result in a lot of unnecessary Ajax calls. To avoid that, you could check that a request has not already been made via onchange.
Site Addict
  
Join Date: Aug 2008
Location: United States
Posts: 769
#29: Aug 29 '08

re: Autofill form fields, almost working

Hey Acoder,

is there anyway i could do something besides onblur?because when i do onblur it wont autofill the form until i click on another field. an well i don't got the smartest tools in the shed where i work an they would think it was not working.so was just wondering if i could use something else? trying to think of an easy way that it will do it an not confuse the people who use it. i was thinking of doing onclick. but if you do onclick then it will show all the dropdown fields an then it might confuse them on which number they actually choose. so if you got a suggestion on something i could use that would do the job an not confuse them that be great :).

here is what i got in the function intFormEvents

Expand|Select|Wrap|Line Numbers
  1. function initFormEvents()
  2.     {
  3.         <!---  document.getElementById('clientID').onblur = getClientData;--->
  4.         document.getElementById("options").onblur = getClientData;
  5.         document.getElementById('clientID').focus();
  6.         document.getElementById("options").onchange = getClientData;
  7.  
  8.  
  9.     }
but thank you for all the help :),
Rach
acoder's Avatar
Site Moderator
  
Join Date: Nov 2006
Location: UK
Posts: 14,581
#30: Aug 29 '08

re: Autofill form fields, almost working

What you can do is use a button and call the function onclick.
Site Addict
  
Join Date: Aug 2008
Location: United States
Posts: 769
#31: Aug 29 '08

re: Autofill form fields, almost working

Hey Acoder,

Well i like your idea so i added a button so now when they click on the button it inserts.

I am only running into 1 last problem. The thing with the customer number is that it appears on 2 pages. The first page is where you fill it out. An then the second page is where you view what you had typed in on the first page and also make changes in case of an error. The problem i am having is on the 2nd page.

If i do not select something from the drop down box an instead create a new customer number and click submit on the first page. Then on the second page it will bring up an error saying the form field can not be found (for the drop down box). An was wondering how could i give it the value of nothing if a value in the drop down box is not selected?

here is what i got in the form
Expand|Select|Wrap|Line Numbers
  1. Customer Number*:<input type="text" name="custnum" value="#Form.custnum#"  id="clientID" ONKEYUP="autoComplete(this,this.form.customer,'value',false)"   onChange="validate(this.form.custnum,'Customer Number')"/></cfoutput>
  2. <SELECT NAME="customer" id="options"
  3. onChange="this.form.custnum.value=this.options[this.selectedIndex].value;javascript:getClientData();">
  4. <cfoutput query="getcustnum">
  5. <option value="#fk_custNum#" <cfif #fk_custNum# is #form.customer#>selected</cfif>>#fk_custNum#</option>
  6. </cfoutput>
  7. </SELECT>
  8. <input type="button" class="custnum" name="insert" value="Insert Contact" 
  9.    onclick="javascript:getClientData();">
  10.  
Thank you in advance for all the help :),
Rach
acoder's Avatar
Site Moderator
  
Join Date: Nov 2006
Location: UK
Posts: 14,581
#32: Aug 29 '08

re: Autofill form fields, almost working

Do you have an empty value for the drop-down? You should have this selected initially. If you enter a new number that doesn't match, this is the value that should be selected.
Site Addict
  
Join Date: Aug 2008
Location: United States
Posts: 769
#33: Aug 29 '08

re: Autofill form fields, almost working

Hey Acoder,

No i don't have a empty value for the drop-down. An when the drop down box loads when i fill out the information for the first time it says 1. but I changed it now so when it loads it says nothing.

this is what i did for the first page on the select button
Expand|Select|Wrap|Line Numbers
  1. <SELECT NAME="customer" id="options"
  2. onChange="this.form.custnum.value=this.options[this.selectedIndex].value;">
  3. <cfoutput query="getcustnum">
  4. <option value="" selected></option>
  5. <option value="#fk_custNum#">#fk_custNum#</option>
  6. </cfoutput>
  7. </SELECT>
but i am not sure how to apply this to the second page since its suppose to get whatever was choosen/writen on the first page.the only way i can think of is to do it in the table but if i do it in the table i have to put 0 an can't just leave it saying nothing in the table.

here is what i have on the second page right now but this doesn't worth with no value in there

Expand|Select|Wrap|Line Numbers
  1. <SELECT NAME="customer" id="options"
  2. onChange="this.form.custnum.value=this.options[this.selectedIndex].value;javascript:getClientData();">
  3. <cfoutput query="getcustnum">
  4. <option value=""></option>
  5. <option value="#fk_custNum#" <cfif #fk_custNum# is #form.customer#>selected</cfif>>#fk_custNum#</option>
  6. </cfoutput>
  7. </SELECT>
any suggestions? Thank you again for the help,

Rach
acoder's Avatar
Site Moderator
  
Join Date: Nov 2006
Location: UK
Posts: 14,581
#34: Aug 29 '08

re: Autofill form fields, almost working

If the second page is only for viewing the results, just display the results using Coldfusion. The user can always go back to change something.

PS. you don't need the "javascript:" protocol in most cases, especially not in event handlers.
Site Addict
  
Join Date: Aug 2008
Location: United States
Posts: 769
#35: Aug 29 '08

re: Autofill form fields, almost working

Hey Acoder

about the javsacript protocol are you meaning to take this part out javascript:getClientData()?

an well the thing is i am trying to display the one that is selected from the first page onto the second page so basically would it still work if i took the cfif selected part out?

Thank you,
Rach
acoder's Avatar
Site Moderator
  
Join Date: Nov 2006
Location: UK
Posts: 14,581
#36: Aug 29 '08

re: Autofill form fields, almost working

Just the "javascript:" part, so for example, "javascript:getClientData()" becomes getClientData().

The second question is about Coldfusion, but I'll answer it here. Use a cfparam for the form.customer to set a default value of "".
Site Addict
  
Join Date: Aug 2008
Location: United States
Posts: 769
#37: Sep 3 '08

re: Autofill form fields, almost working

Quote:

Originally Posted by acoder

Just the "javascript:" part, so for example, "javascript:getClientData()" becomes getClientData().

The second question is about Coldfusion, but I'll answer it here. Use a cfparam for the form.customer to set a default value of "".

Hey Acoder,

yep that worked,yay :). but i got one last problem. which sorry took so long to respond to this just got to come back to work today. I added one line to my drop down box. the line is bolded.

Expand|Select|Wrap|Line Numbers
  1. <SELECT NAME="customer" id="options"
  2. onChange="this.form.custnum.value=this.options[this.selectedIndex].value;">
  3. <cfoutput query="getcustnum">
  4. <option value="" selected></option>
  5. <option value="#fk_custNum#">#fk_custNum#</option>
  6. </cfoutput>
  7. </SELECT>
but anyway with that line in there it makes the drop down options appear as such

1024

444

etc....

when needs to appear like this

1024
444
etc....

how could i still keep that line in there without it display my drop down box with spaces in it?

Thank you again for all the help :),
Rach
acoder's Avatar
Site Moderator
  
Join Date: Nov 2006
Location: UK
Posts: 14,581
#38: Sep 3 '08

re: Autofill form fields, almost working

You need to keep that line outside the loop (before it), otherwise in the loop, you're adding two options for each iteration.
Site Addict
  
Join Date: Aug 2008
Location: United States
Posts: 769
#39: Sep 3 '08

re: Autofill form fields, almost working

Quote:

Originally Posted by acoder

You need to keep that line outside the loop (before it), otherwise in the loop, you're adding two options for each iteration.

Hey Acoder,

yep that was it. wow can't believe it's working! But THANK YOU SO MUCH FOR ALL THE HELP!!! you have no idea how awesome it is to see it working :). But thank you again for all the help, you are awesome!

Rach
acoder's Avatar
Site Moderator
  
Join Date: Nov 2006
Location: UK
Posts: 14,581
#40: Sep 3 '08

re: Autofill form fields, almost working

You're welcome. Glad it's working. Pretty long thread for one which has got "almost working" in the title! ;)
Site Addict
  
Join Date: Aug 2008
Location: United States
Posts: 769
#41: Sep 3 '08

re: Autofill form fields, almost working

Quote:

Originally Posted by acoder

You're welcome. Glad it's working. Pretty long thread for one which has got "almost working" in the title! ;)

Hey Acoder,

yeah i thought it was "almost working" but i was wrong. An still wrong now. i got another problem an i can't even begin to really explain it. This morning i got on to the form an when i tried to auto fill the form it wouldn't work. i checked the database an it has entry's. But when i tried to auto fill it it wouldn't worked. After refreshing it a few times an messing with it i got it to work. But today i have noticed this problem a lot. when i came back to lunch it didn't work. an when i let it sit for a few minutes an tried to change it i ran into this problem as well. an i am wondering could anything in the autofill and the drop down box affect this problem or could it be a loading problem on my part? i know we been having loading problems at work. but everything else for my form works fine even with the slow internet an few problems we have had. If you got any suggestions let me know because needs to work all the time an this seems to continue to be a problem. if you need me to repost everything i got i will.

Thank you,
Rach
acoder's Avatar
Site Moderator
  
Join Date: Nov 2006
Location: UK
Posts: 14,581
#42: Sep 3 '08

re: Autofill form fields, almost working

Have you made any changes since the last version that you've posted in this thread?
Site Addict
  
Join Date: Aug 2008
Location: United States
Posts: 769
#43: Sep 3 '08

re: Autofill form fields, almost working

Quote:

Originally Posted by acoder

Have you made any changes since the last version that you've posted in this thread?

Hey Acoder,

As far as i know i don't think so, the only thing i think i might of changed is the Javascript that appears with the form, i know i didn't mess with any of the files that work with it. Here is what i got on the Javascript part.i messed with the function initFormEvents part.

Javascript that appears on the form page
Expand|Select|Wrap|Line Numbers
  1. <script type="text/javascript">
  2.  
  3. var ajax = new sack();
  4.     var currentClientID=false;
  5.     function getClientData()
  6.     {
  7.         var clientId = document.getElementById('clientID').value;
  8.             currentClientID = clientId
  9.             ajax.requestFile = 'getClient.cfm?custnum='+clientId;    // Specifying which file to get
  10.             ajax.onCompletion = showClientData;    // Specify function that will be executed after file has been found
  11.             ajax.runAJAX();        // Execute AJAX function            
  12.  
  13.     }
  14.  
  15.     function showClientData()
  16.     {
  17.         var formObj = document.forms['page1'];    
  18.         eval(ajax.response);
  19.     }
  20.  
  21.  
  22.     function initFormEvents()
  23.     {
  24.         <!---  document.getElementById('clientID').onblur = getClientData;--->
  25.         document.getElementById("insert").onclick = getClientData;
  26.   <!---      document.getElementById('clientID').focus();
  27.         document.getElementById("options").onchange = getClientData;--->
  28.  
  29.  
  30.     }
  31.  
  32.  
  33.     window.onload = initFormEvents;
  34.     </script>
an here is the html i have in case you wanna see this.

Expand|Select|Wrap|Line Numbers
  1. Customer Number*:<input type="text" name="custnum" id="clientID" value=""  ONKEYUP="autoComplete(this,this.form.customer,'value',false)"  />
  2. <SELECT NAME="customer" id="options"
  3. onChange="this.form.custnum.value=this.options[this.selectedIndex].value;">
  4. <option value="" selected></option>
  5. <cfoutput query="getcustnum">
  6. <option value="#fk_custNum#">#fk_custNum#</option>
  7. </cfoutput>
  8. </SELECT>
  9. <input type="button" class="custnum" name="insert" value="Insert Contact" 
  10.    onclick="getClientData();">
Thank you :),
Rach
acoder's Avatar
Site Moderator
  
Join Date: Nov 2006
Location: UK
Posts: 14,581
#44: Sep 4 '08

re: Autofill form fields, almost working

The initFormEvents function is now pretty much useless because you've already set the onclick inline in the button.

When you say it sometimes doesn't work, what exactly do you mean? Can you give an example? You do realise that with the current code, the form will only autofill on clicking the button?
Site Addict
  
Join Date: Aug 2008
Location: United States
Posts: 769
#45: Sep 4 '08

re: Autofill form fields, almost working

Hey Acoder,

well basically i would get on there an choose a number an then click on the button an it wouldn't auto fill the form. i ran in to this problem at certain points in the day yesterday.at one point it would work. an at others i would click on the button several times saying come on auto fill. i even had a point where i choose a number an clicked on the button and nothing happened, so i went online an checked my email i came back a minute later and the form was auto filled. but today it seems to be working fine. i might of been doing something wrong on account of i ended up getting a cold over the weekend so my mind is not as there so i might of chosen the wrong customer number. although thought i tried several different ones. it could of been a problem with the intranet because the networking guys had to fix some problems yesterday so it could be a mixture of both. but for now i am just going to keep an eye out on it an see what happens.

But thank you again for the help :),
Rach
acoder's Avatar
Site Moderator
  
Join Date: Nov 2006
Location: UK
Posts: 14,581
#46: Sep 4 '08

re: Autofill form fields, almost working

OK, that's good to hear. You should also test the Coldfusion side of things when it doesn't seem to be working to see if it's giving the correct output.
Site Addict
  
Join Date: Aug 2008
Location: United States
Posts: 769
#47: Sep 5 '08

re: Autofill form fields, almost working

Hey Acoder,

The error came up today. An i did the test like you said an its getting the correct information. But today it finally told me what is wrong an it says it has a problem with the following line. the line is bolded. The error it gives me is undetermined string constant

Expand|Select|Wrap|Line Numbers
  1.     function showClientData()
  2.     {
  3.         var formObj = document.forms['page1'];    
  4.         eval(ajax.response);
  5.     }
  6.  
Any ideas? here is what firefox told me

Error: document.getElementById("insert") has no properties
Line: 66

Error: unterminated string literal
Line: 96, Column: 28
Source Code:
formObj.notes.value = "This is a test

here is the javascript that appears on the form page (which is what is having a problem)

Expand|Select|Wrap|Line Numbers
  1.     <script type="text/javascript">
  2.  
  3. var ajax = new sack();
  4.     var currentClientID=false;
  5.     function getClientData()
  6.     {
  7.         var clientId = document.getElementById('clientID').value;
  8.             currentClientID = clientId
  9.             ajax.requestFile = 'getClient.cfm?custnum='+clientId;    // Specifying which file to get
  10.             ajax.onCompletion = showClientData;    // Specify function that will be executed after file has been found
  11.             ajax.runAJAX();        // Execute AJAX function            
  12.  
  13.     }
  14.  
  15.     function showClientData()
  16.     {
  17.         var formObj = document.forms['page1'];    
  18.         eval(ajax.response);
  19.     }
  20.  
  21.  
  22.     function initFormEvents()
  23.     {
  24.  
  25.         document.getElementById("insert").onclick = getClientData;
  26.  
  27.  
  28.  
  29.     }
  30.  
  31.  
  32.     window.onload = initFormEvents;
  33.     </script>
Thank you :),
Rach
acoder's Avatar
Site Moderator
  
Join Date: Nov 2006
Location: UK
Posts: 14,581
#48: Sep 5 '08

re: Autofill form fields, almost working

This is caused by the Coldfusion-generated code where the string has not been terminated properly. Check the output. What does it show?

PS. I think you could probably take this back to the Coldfusion thread.
Site Addict
  
Join Date: Aug 2008
Location: United States
Posts: 769
#49: Sep 5 '08

re: Autofill form fields, almost working

Quote:

Originally Posted by acoder

This is caused by the Coldfusion-generated code where the string has not been terminated properly. Check the output. What does it show?

PS. I think you could probably take this back to the Coldfusion thread.

Hey Acoder,

i tried the getClient="" and it gave me the correct choice. The only thing i did to it was i took all the previously enter entrys out of the table an now wont work at all.

an also it is stll updating the drop down. if i add a new one an then go back you will see the new one. its just not auto populating the form.

Thank you,
Rach
acoder's Avatar
Site Moderator
  
Join Date: Nov 2006
Location: UK
Posts: 14,581
#50: Sep 5 '08

re: Autofill form fields, almost working

As I mentioned in the other thread, if you've got no data, it can't populate with anything.
Reply
Page 1 of 2 1 2 >

« previous question | next question »

Similar JavaScript / Ajax / DHTML bytes

/bytes/development

/bytes/it

/bytes/about

We are a network of experts and professionals in IT and software development that help one another with answers to tough questions and share insights. Get the best answers to your questions from over 226,272 network members.

dev questions:
algorithms | asp | asp.net | c/c++ | coldfusion | c# | flash | html/css | java | javascript |
mobile dev | .net | perl | php | python | ruby | software dev | vb.net | visual basic | xml
it questions:
access | apache | careers | db2 | iis | macosx | mysql | networking | oracle | postgresql | sql server | unix | windows

About Bytes | Copyright 1995-2009 BYTES. All rights Reserved