Autofill form fields, almost working

[bonneylake]

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

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')"/>
<SELECT NAME="options" id="options"
onChange="this.form.custnum.value=this.options[this.selectedIndex].value;javascript:initFormEvents();">
<cfoutput query="getcustnum">
<option value="#fk_custNum#">#fk_custNum#</option>
</cfoutput>
</SELECT>
First name: <input type="text" name="fname" id="fname" value="" size="20"/>

here is the javascript that appears on my form.

<SCRIPT LANGUAGE="JavaScript" SRC="autocomplete.js"></SCRIPT>
    <script type="text/javascript" src="ajax.js"></script>
    <script type="text/javascript">
 
var ajax = new sack();
    var currentClientID=false;
    function getClientData()
    {
        var clientId = document.getElementById('clientID').value;
            currentClientID = clientId
            ajax.requestFile = 'getClient.cfm?custnum='+clientId;    // Specifying which file to get
            ajax.onCompletion = showClientData;    // Specify function that will be executed after file has been found
            ajax.runAJAX();        // Execute AJAX function            
 
    }
 
    function showClientData()
    {
        var formObj = document.forms['page1'];    
        eval(ajax.response);
    }
 
 
    function initFormEvents()
    {
        document.getElementById("options").onchange = getClientData;
    }
 
    window.onload = initFormEvents;
    </script>
 

heres whats on my autocomplete.js file

function autoComplete (field, select, property, forcematch) {
    var found = false;
    for (var i = 0; i < select.options.length; i++) {
    if (select.options[i][property].toUpperCase().indexOf(field.value.toUpperCase()) == 0) {
        found=true; break;
        }
    }
    if (found) { select.selectedIndex = i; }
    else { select.selectedIndex = -1; }
    if (field.createTextRange) {
        if (forcematch && !found) {
            field.value=field.value.substring(0,field.value.length-1); 
            return;
            }
        var cursorKeys ="8;46;37;38;39;40;33;34;35;36;45;";
        if (cursorKeys.indexOf(event.keyCode+";") == -1) {
            var r1 = field.createTextRange();
            var oldValue = r1.text;
            var newValue = found ? select.options[i][property] : oldValue;
            if (newValue != field.value) {
                field.value = newValue;
                var rNew = field.createTextRange();
                rNew.moveStart('character', oldValue.length) ;
                rNew.select();
                }
            }
        }
    }

here what appears on my ajax.js file

function sack(file) {
    this.xmlhttp = null;
 
    this.resetData = function() {
        this.method = "POST";
          this.queryStringSeparator = "?";
        this.argumentSeparator = "&";
        this.URLString = "";
        this.encodeURIString = true;
          this.execute = false;
          this.element = null;
        this.elementObj = null;
        this.requestFile = file;
        this.vars = new Object();
        this.responseStatus = new Array(2);
      };
 
    this.resetFunctions = function() {
          this.onLoading = function() { };
          this.onLoaded = function() { };
          this.onInteractive = function() { };
          this.onCompletion = function() { };
          this.onError = function() { };
        this.onFail = function() { };
    };
 
    this.reset = function() {
        this.resetFunctions();
        this.resetData();
    };
 
    this.createAJAX = function() {
        try {
            this.xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
        } catch (e1) {
            try {
                this.xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
            } catch (e2) {
                this.xmlhttp = null;
            }
        }
 
        if (! this.xmlhttp) {
            if (typeof XMLHttpRequest != "undefined") {
                this.xmlhttp = new XMLHttpRequest();
            } else {
                this.failed = true;
            }
        }
    };
 
    this.setVar = function(name, value){
        this.vars[name] = Array(value, false);
    };
 
    this.encVar = function(name, value, returnvars) {
        if (true == returnvars) {
            return Array(encodeURIComponent(name), encodeURIComponent(value));
        } else {
            this.vars[encodeURIComponent(name)] = Array(encodeURIComponent(value), true);
        }
    }
 
    this.processURLString = function(string, encode) {
        encoded = encodeURIComponent(this.argumentSeparator);
        regexp = new RegExp(this.argumentSeparator + "|" + encoded);
        varArray = string.split(regexp);
        for (i = 0; i < varArray.length; i++){
            urlVars = varArray[i].split("=");
            if (true == encode){
                this.encVar(urlVars[0], urlVars[1]);
            } else {
                this.setVar(urlVars[0], urlVars[1]);
            }
        }
    }
 
    this.createURLString = function(urlstring) {
        if (this.encodeURIString && this.URLString.length) {
            this.processURLString(this.URLString, true);
        }
 
        if (urlstring) {
            if (this.URLString.length) {
                this.URLString += this.argumentSeparator + urlstring;
            } else {
                this.URLString = urlstring;
            }
        }
 
        // prevents caching of URLString
        this.setVar("rndval", new Date().getTime());
 
        urlstringtemp = new Array();
        for (key in this.vars) {
            if (false == this.vars[key][1] && true == this.encodeURIString) {
                encoded = this.encVar(key, this.vars[key][0], true);
                delete this.vars[key];
                this.vars[encoded[0]] = Array(encoded[1], true);
                key = encoded[0];
            }
 
            urlstringtemp[urlstringtemp.length] = key + "=" + this.vars[key][0];
        }
        if (urlstring){
            this.URLString += this.argumentSeparator + urlstringtemp.join(this.argumentSeparator);
        } else {
            this.URLString += urlstringtemp.join(this.argumentSeparator);
        }
    }
 
    this.runResponse = function() {
        eval(this.response);
    }
 
    this.runAJAX = function(urlstring) {
        if (this.failed) {
            this.onFail();
        } else {
            this.createURLString(urlstring);
            if (this.element) {
                this.elementObj = document.getElementById(this.element);
            }
            if (this.xmlhttp) {
                var self = this;
                if (this.method == "GET") {
                    totalurlstring = this.requestFile + this.queryStringSeparator + this.URLString;
                    this.xmlhttp.open(this.method, totalurlstring, true);
                } else {
                    this.xmlhttp.open(this.method, this.requestFile, true);
                    try {
                        this.xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded")
                    } catch (e) { }
                }
 
                this.xmlhttp.onreadystatechange = function() {
                    switch (self.xmlhttp.readyState) {
                        case 1:
                            self.onLoading();
                            break;
                        case 2:
                            self.onLoaded();
                            break;
 
                        case 3:
                            self.onInteractive();
                            break;
                        case 4:
                            self.response = self.xmlhttp.responseText;
                            self.responseXML = self.xmlhttp.responseXML;
                            self.responseStatus[0] = self.xmlhttp.status;
                            self.responseStatus[1] = self.xmlhttp.statusText;
 
                            if (self.execute) {
                                self.runResponse();
                            }
 
                            if (self.elementObj) {
                                elemNodeName = self.elementObj.nodeName;
                                elemNodeName.toLowerCase();
                                if (elemNodeName == "input"
                                || elemNodeName == "select"
                                || elemNodeName == "option"
                                || elemNodeName == "textarea") {
                                    self.elementObj.value = self.response;
                                } else {
                                    self.elementObj.innerHTML = self.response;
                                }
                            }
                            if (self.responseStatus[0] == "200") {
                                self.onCompletion();
                            } else {
                                self.onError();
                            }
 
                            self.URLString = "";
                            break;
                    }
                };
 
                this.xmlhttp.send(this.URLString);
            }
        }
    };
 
    this.reset();
    this.createAJAX();
}

Thank you in advance,
Rach

[bonneylake]

Hey Acoder,

Well i got another question involving the same topic an hope you wouldn't mind answering it.

I am working on now trying to redisplay information so that users can edit it. An well for some reason it is acting weird. when i pull up a ticket an you see all the contact information. When i go to submit it to go to the second page, when i get to the second page where i see the same exact information for some reason the customer number,city and notes fields will put space a little bit of space in front of the value. an the more editing i do to the same ticket the more space i am getting for those fields. The problem with that is every time that little bit of space is added it adds more contacts to my contacts table which i don't need. I have no clue whats causing this an was wondering if you had a suggestion?

Thank you,
Rach

[acoder]

Have you made any changes to the code that you had in the two threads (this and the one in Coldfusion)? Post your latest relevant code.

[bonneylake]

Have you made any changes to the code that you had in the two threads (this and the one in Coldfusion)? Post your latest relevant code.

Hey Acoder,

As far as i know i haven't made any real changes to it that would effect the city and customer notes, maybe the customer #

here is the javascript it is the same for both c1.cfm and c2.cfm.

<SCRIPT LANGUAGE="JavaScript" SRC="autocomplete.js"></SCRIPT>
    <script type="text/javascript" src="autofill.js"></script>
    <script type="text/javascript">
 
var ajax = new sack();
    var currentClientID=false;
    function getClientData()
    {
        var clientId = document.getElementById('clientID').value;
        if (clientId != "") {
            currentClientID = clientId
            ajax.requestFile = 'getClient.cfm?custnum='+clientId;    // Specifying which file to get
            ajax.onCompletion = showClientData;    // Specify function that will be executed after file has been found
            ajax.runAJAX();        // Execute AJAX function            
    }}
 
 
 
 
    function showClientData()
    {
        var formObj = document.forms['page1'];
        var resp = ajax.response.split(",");
 
      if (ajax.response == "") { // you may want to trim here just in case
          formObj.cust_company.value = "";
          formObj.fname.value = "";
          formObj.lname.value = "";
          formObj.add1.value = "";
          formObj.city.value = "";
          formObj.state.value = "";
          formObj.zip.value = "";
          formObj.email.value = "";
          formObj.pri_phone.value = "";
          formObj.sec_phone.value = "";
          formObj.notes.value = "";
 
      } else {
          var resp = ajax.response.split(",");
          formObj.cust_company.value = resp[1];
          formObj.fname.value = resp[2];
          formObj.lname.value = resp[3];
          formObj.add1.value = resp[4];
          formObj.city.value = resp[5];
          formObj.state.value = resp[6];
          formObj.zip.value = resp[7];
          formObj.email.value = resp[8];
          formObj.pri_phone.value = resp[9];
          formObj.sec_phone.value = resp[10];
          formObj.notes.value = resp[11];
      }
    }
        </script>

heres the coldfusion for c1.cfm and c2.cfm. the cfoutput query ticket is used to redisplay what was entered.
'

<cfoutput query="ticket">
Customer Number*:<input type="text" name="clientID" id="clientID" 
value="#fk_customer_number#"  ONKEYUP="autoComplete(this,this.form.customer,'value',false)" size="20"/>
<cfset fk_customer_number = #fk_customer_number#>
</cfoutput>
<SELECT NAME="customer" id="options"
onChange="this.form.clientID.value=this.options[this.selectedIndex].value;"/>
<option value="" selected></option>
<cfoutput query="getcustnum">
<option value="#fk_custNum#"<cfif #fk_custNum# is #fk_customer_number#>selected</cfif>>#fk_custNum#</option>
</cfoutput>
</SELECT>
<input type="button" class="custnum" name="insert" value="Insert Contact" 
 onclick="getClientData();"/>
<cfoutput query="ticket">
Company Name:<input type="text" name="compname" id="cust_company" value="#customer_company#" size="20"/>
First Name:<input type="text" name="fname" id="fname" size="20" value="#customer_Fname#"/>
Last Name:<input type="text" name="lname" id="lname" value="#customer_Lname#" size="20"/>
Address:<input type="text" name="address" value="#customer_add1#" id="add1" size="20"/>
City:<input type="text" name="city" id="city" value="#customer_city#" size="20"/>
State:<input type="text" name="state" id="state" value="#customer_state#" size="20"/>
Zip:<input type="text" name="zip" id="zip" value="#customer_zip#" size="20"/>
Email Address:<input type="text" name="email" id="email" value="#customer_email#" size="20"/>
Primary Phone:<input type="text" name="priphone" id="pri_phone"value="#customer_pri_phone#" size="20"/>
Secondary Phone:<input type="text" name="secphone" id="sec_phone" value="#customer_sec_phone#" size="20"/>
Customer Notes:
<textarea  maxlength='500' onkeyup='return ismaxlength(this)' onkeydown='return ismaxlength(this)' rows="4" cols="60" name="custnotes" id="notes">#customer_notes#</textarea></cfoutput>

here is getclient.cfm

<cfparam name="url.custnum" default="">
 
<cfquery name="customerd" datasource="CustomerSupport">
      select * from dbo.tbl_CS_contacts
      where fk_custNum='#url.custnum#'
      </cfquery>
          <cfif url.custnum NEQ "" AND customerd.recordcount IS NOT 0> 
<cfoutput query="customerd">#custnum#,#cust_company#,#fname#,#lname#,#add1#,#city#,#state#,#zip#,#email#,#pri_phone#,#sec_phone#,#notes#</cfoutput><cfelse></cfif>

There are only a few things that i notice. When i go to open up the page for edit. It will have space before the customer number,city and customer notes. The thing is when i am inserting you see no spaces or anything not on the first page or second page. When i go to the second page for edit (its exactly like the form i talked about previously). when i go to look at the edit on the second page it puts more space in front of those 3 fields an i got no clue why.

Thank you so much for the help,
Rach

[bonneylake]

Hey Acoder,

Well i managed to fix the second page. Instead of the values being the names in the database i changed it to how i had it before which was "form.name of the field" and i was trying to do it "name of the field in database".

However, i am still having trouble with the first page an i am not sure how to fix it.
When i load the first page it still puts space for customer_number,city and notes.
The thing is with this i have to use the database names in order to get there values so i am not sure how to go around this.Any ideas?

Thank you :),
Rach

[acoder]

When you mention about opening up a page for edit, is that another page?

[bonneylake]

When you mention about opening up a page for edit, is that another page?

Hey Acoder,

Basically what i am doing with the form now is trying to make it where you can edit it. I made a copy of the form an just changed the name of it so i can use it for editing. when i go to select the ticket i want to edit when i click on it, it takes me to c1.cfm where i can see what was previously entered, which is the page that i am trouble with.

Heres all my pages

index.cfm is where you choose the ticket to edit.
c1.cfm is the first page where you see the ticket you are editing which shows all the contact information that was entered for that pacific ticket
c2.cfm is the second page where you see the contact information for a second time

the thing with c1.cfm the only way to display what was originally entered is by using the table field name like customer_number. before on the first page we did not give it values an now i am giving it values.

I hope this makes sense,

Rach

[acoder]

When the space appears, is it when the page loads or after the auto-fill?

[bonneylake]

When the space appears, is it when the page loads or after the auto-fill?

Hey Acoder,

the space appears when the page loads. When the page loads it shows what was typed in previously so theres no need to auto-fill unless there changing the customer. But i don't seem to have this trouble with any fields except customer number, city and notes so i am not sure why its only applying it to those 3, you would think it would happen to all.

but here is what i have on the first page. the only thing i changed was i added a value to each field.

<cfquery name="ticket" datasource="CustomerSupport">
        SELECT pk_ticketID,title,priority,status,cost_center,fk_customer_number,
customer_company,customer_Fname,customer_Lname,customer_add1,customer_city,customer_state,
customer_zip,customer_email,customer_pri_phone,customer_sec_phone,customer_notes,htpp FROM dbo.tbl_CS_ticketMaster
        WHERE pk_ticketID = #URL.pk_ticketID#
</cfquery>
 
<cfoutput query="ticket">
Customer Number*:<input type="text" name="custnum" id="clientID" 
value="#fk_customer_number#"  ONKEYUP="autoComplete(this,this.form.customer,'value',false)" size="20"/>
<cfset fk_customer_number = #fk_customer_number#>
</cfoutput>
<SELECT NAME="customer" id="options"
onChange="this.form.custnum.value=this.options[this.selectedIndex].value;"/>
<option value="" selected></option>
<cfoutput query="getcustnum">
<option value="#fk_custNum#"<cfif #fk_custNum# is #fk_customer_number#>selected</cfif>>#fk_custNum#</option>
</cfoutput>
</SELECT>
<input type="button" class="custnum" name="insert" value="Insert Contact" 
 onclick="getClientData();"/>
<cfoutput query="ticket">
Company Name:<input type="text" name="compname" id="cust_company" value="#customer_company#" size="20"/>
First Name:<input type="text" name="fname" id="fname" size="20" value="#customer_Fname#"/>
Last Name:<input type="text" name="lname" id="lname" value="#customer_Lname#" size="20"/>
Address:<input type="text" name="address" value="#customer_add1#" id="add1" size="20"/>
City:<input type="text" name="city"  value="#customer_city#" id="city" size="20"/>
State:<input type="text" name="state" id="state" value="#customer_state#" size="20"/>
Zip:<input type="text" name="zip" id="zip" value="#customer_zip#" size="20"/>Email Address:<input type="text" name="email" id="email" value="#customer_email#" size="20"/>
Primary Phone:
<input type="text" name="priphone" id="pri_phone" value="#customer_pri_phone#" size="20"/>
Secondary Phone:<input type="text" name="secphone" id="sec_phone" value="#customer_sec_phone#" size="20"/>
Customer Notes:
<textarea  maxlength='500' onkeyup='return ismaxlength(this)' onkeydown='return ismaxlength(this)' rows="4" cols="60" name="custnotes" id="notes">#customer_notes#</textarea>
</cfoutput>

Thank you for the help,
Rach

[acoder]

If it's appearing on page load, that means it can't be the JavaScript which is causing the problem (unless you're calling some JavaScript code onload). This seems like a Coldfusion problem.

[bonneylake]

If it's appearing on page load, that means it can't be the JavaScript which is causing the problem (unless you're calling some JavaScript code onload). This seems like a Coldfusion problem.

Hey Acoder,

i was afraid it was a coldfusion problem. The weird thing that is happening with this is when i am inserting information into the table i have noticed these squares in front of the fields i add an its only for those 3 fields mentioned.But anyway this information for the contacts gets insert into 2 tables one called ticketMaster and the other called contacts. When it goes into contacts it inserts correctly an does not put any spaces in the fields. But when it goes into ticketMaster the 3 fields always seem to have space in them.

ok i just did a test on it (tested by inserting new records) an here is what i am getting

on the cticketpage1.cfm page
when i insert the first customer in the contacts it looks fine an in the ticketMaster it looks fine except in the customer_notes where it puts 2 squares in front of it although i made sure before inserting that it had no spaces an on the form instead it appears to have no spaces.

when i get to the second page an i click update (i have a part in my form that allows the users to update information). It then puts the spaces in front of customer_number, city and notes.this also happens when i click submit at the bottom of the page because they resubmit the information when they submit the form.

here is what is on the page when i first submit the form for the first time

<!---Inserts record into ticketmaster table--->
<cfquery name="insertticketmaster" datasource="CustomerSupport">
    exec usp_CS_InsertticketMaster '#Form.title#','#Form.priority#','#Form.status#','#Form.submitted_by#','#Form.last_edited_by#',
    '#Form.clientID#','#Form.compname#','#Form.fname#',
  '#Form.lname#','#Form.address#','#Form.city#','#Form.state#','#Form.zip#','#Form.email#','#Form.priphone#','#Form.secphone#','
    #Form.custnotes#','#Form.costcenterid#','#Form.htpp#'
</cfquery>
 
<!---gets the id for ticketmaster an for all of the second part of form.--->
<cfset pkID=#insertticketmaster.ID#>
 
<!---inserts/updates record into contacts table. if new inserts if not new will update old record.--->
<cfquery name="insertcontacts" datasource="CustomerSupport">
exec usp_CS_UpdateInsertcontacts  '#Form.clientID#','#Form.compname#','#Form.fname#', '#Form.lname#','#Form.address#','#Form.city#','#Form.state#','#Form.zip#','#Form.email#','#Form.priphone#','#Form.secphone#','#Form.custnotes#'
</cfquery>

where is what happens when i update the form

<!---Updates TicketMaster Table--->
<cfquery name="Update" datasource="CustomerSupport">
exec usp_CS_UpdateticketMaster '#Form.ID#','#Form.title#','#Form.priority#','#Form.status#','#Form.last_edited_by#','
   #Form.clientID#','#Form.compname#','#Form.fname#','#Form.lname#','#Form.add1#','
    #Form.city#','#Form.state#','#Form.zip#','#Form.email#','#Form.priphone#','#Form.secphone#','
    #Form.notes#','#Form.cost_center#','#Form.htpp#'
</cfquery>
 
<!---Updates/Inserts Contacts table (should only update in this case unless they create a new customer number right here which they shouldn't)--->
<cfquery name="insertcontacts" datasource="CustomerSupport">
exec usp_CS_UpdateInsertcontacts  '#Form.clientID#','#Form.compname#','#Form.fname#', '#Form.lname#','#Form.add1#','#Form.city#','#Form.state#','#Form.zip#','#Form.email#','#Form.priphone#','#Form.secphone#','#Form.notes#'
</cfquery>

here is what happens when i submit the entire form for the 2nd an final time

<!---Inserts Data for General Information and Contact Information.--->
<cfquery name="Update" datasource="CustomerSupport">
exec usp_CS_UpdateticketMaster '#Form.ID#','#Form.title#','#Form.priority#','#Form.status#','#Form.last_edited_by#','
   #Form.clientID#','#Form.compname#','#Form.fname#','#Form.lname#','#Form.address#','
    #Form.city#','#Form.state#','#Form.zip#','#Form.email#','#Form.priphone#','#Form.secphone#','
    #Form.custnotes#','#Form.cost_center#','#Form.htpp#'
</cfquery>
 
<!---Updates/Inserts Contacts table (should only update in this case unless they create a new customer number right here which they shouldn't)--->
<cfquery name="insertcontacts" datasource="CustomerSupport">
exec usp_CS_UpdateInsertcontacts  '#Form.clientID#','#Form.compname#','#Form.fname#', '#Form.lname#','#Form.address#','#Form.city#','#Form.state#','#Form.zip#','#Form.email#','#Form.priphone#','#Form.secphone#','#Form.custnotes#'
</cfquery>

thats the only thing the 3 of them all have in common, the only thing different is that for the update it has a javascript script, but i don't think that could be it.

Any ideas?

Thank you for the help,
Rach

[acoder]

Could you repost this in Coldfusion seeing as it's a Coldfusion question now.

Something to muse over while you do though: I do notice that you have spaces/line breaks for the afore-mentioned three fields within the quotes.

[bonneylake]

Could you repost this in Coldfusion seeing as it's a Coldfusion question now.

Something to muse over while you do though: I do notice that you have spaces/line breaks for the afore-mentioned three fields within the quotes.

hey acoder, i reposted it here...hope thats ok.

http://bytes.com/forum/showthread.ph...75#post3356975