Auto fill form fields using coldfusion

769 512MB

Hey Everyone,

Well i don't know if my question should be in javascript/ajax or coldfusion, i figure this is more of a coldfusion question. But if this is in the wrong section let me know an all gladly delete my question an put it in the correct section.

Well what i am trying to do is pretty simple. I have a input field and someone starts typing in a customer number. As they type in the customer number the drop down box is populated. They then click on the drop down box an the rest of the form is populated (it gets all the information from a database).

I found a script online that does almost exactly what i want to do except it is in php. I have found an example of this in every language except coldfusion and well i must admit i am not good at converting code from one language to another.

But anyway i was wondering if anyone could provide me with an example on how i would do this in coldfusion instead of php? or if you know of a tutorial,forum, or example online i could look at?

Here is the example page
http://www.dhtmlgoodies.com/scripts/...nt-lookup.html

an here is the code
http://www.dhtmlgoodies.com/index.ht..._client_lookup

i already created the drop down box part of this (since it is missing in the
the example above), but like i said i just can't figure out how i would populate it using my coldfusion database. Here is what i got for the drop down box

here is coldfusion/html

Expand|Select|Wrap|Line Numbers

 <cfquery name="getcustnum" datasource="CustomerSupport">

usp_CS_Getcontacts

</cfquery>

<HTML>

<HEAD>

    <TITLE>JavaScript Toolbox - Auto-Complete</TITLE>

<SCRIPT LANGUAGE="JavaScript" SRC="autocomplete.js"></SCRIPT>

</HEAD>

<BODY BGCOLOR=#FFFFFF LINK="#00615F" VLINK="#00615F" ALINK="#00615F">

<FORM>

Customer Number*

<INPUT TYPE="text" NAME="input1" VALUE="" ONKEYUP="autoComplete(this,this.form.options,'value',true)" onChange="validate(this.form.custnum,'Customer Number')">

<SELECT NAME="options" 

onChange="this.form.input1.value=this.options[this.selectedIndex].value" onclick="">

<cfoutput query="getcustnum">

<option value="#fk_custNum#">#fk_custNum#</option>

</cfoutput>

</SELECT>

Company Name:<input type="text" name="compname"  size="20" id="compname"/>

First Name:<input type="text" name="fname"  size="20" id="fname"/>

Last Name:<input type="text" name="lname"size="20" id="lname"/>

</FORM>

</BODY>

</HTML>

here is the javascript

Expand|Select|Wrap|Line Numbers

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

                }

            }

        }

    }

But thank you in advance :),
Rach

Aug 15 '08

Follow Post Reply

106

18837

bonneylake

769

512MB

For the first question, you may have to change the autoComplete function. You could default to the first option to begin with.

I may have misunderstood the second question. If you meant that it appears below the field with the previous entries, then you can use 'autocomplete="off"' as an attribute for the field.

Hey Acoder,

well the first question i asked was working correctly because it does leave the field blank.Think i just got confused by something else. But i was wondering, for some reason if the drop down box is blank it will still allow the user to autofill if you click on the button an it puts undefined in all the fields an was wondering if there was a way to disable the button until they actually choose a field in the drop down box?

Well on my second question, what i am trying to do is when a user starts typing in the field it starts guessing what i am typing behind it (its in blue what it thinks i am typing) but anyway i was wondering if i could make it so it would stop guessing what i am typing behind it, but still autofill the drop down box?i don't know if its possible but just wanted to ask.

here is what i have

Expand|Select|Wrap|Line Numbers

 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();"/>

Thank you again for all the help :),
Rach

Sep 22 '08 #101

acoder

16,027

Expert Mod 8TB

In the getClientData() function, you could check for the value. If it's empty, don't make the request.

As for the guessing, this is most probably caused by the auto-complete function. If you remove the second part of the function which creates a text range and selects the text, it shouldn't guess any longer.

Sep 22 '08 #102

bonneylake

769

512MB

In the getClientData() function, you could check for the value. If it's empty, don't make the request.

As for the guessing, this is most probably caused by the auto-complete function. If you remove the second part of the function which creates a text range and selects the text, it shouldn't guess any longer.

Hey Acoder,

Got the auto-complete working correctly (yay). But i am lost on the getClientData. I can tell it already checks clientID, but not sure how to make it check that both the clientID and customer both have a value.

here is what i did try,but i had to have missed something because didn't work

Expand|Select|Wrap|Line Numbers

 var ajax = new sack();

    var currentClientID=false;

    var currentCustomer=false;

    function getClientData()

    {

        var clientId = document.getElementById('clientID').value;

        var customer = document.getElementById('customer').value;

        if (clientId != "" & customer != "") {

            currentClientID = clientId

            currentCustomer = customer

            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            

    }}

here is what the code originally looks like.

Expand|Select|Wrap|Line Numbers

 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            

    }}

Thank you,
Rach

Sep 22 '08 #103

acoder

16,027

Expert Mod 8TB

The id of the customer drop down is "options", so:

Expand|Select|Wrap|Line Numbers

 var clientId = document.getElementById('clientID').value;

var customer = document.getElementById('options').value;

if (clientId != "" && customer != "") {

Sep 22 '08 #104

bonneylake

769

512MB

Hey Acoder,

IT WORKS! THANK YOU THANK YOU!!!!

I got one last question i was hoping you could help me out with. I don't know if i need to start a new thread for this but its dealing with the same page so thought i would try asking. if i need to start a new thread for this let me know :).

But anyway i been working on trying to understand the URL method of retrieving information. I been able to get one table of information, but now i need to get 3 tables of information at the same time an i am running into trouble. Each table has a number in common with the other, each has a field that holds the number (but fields have different name). For example ticketMaster table has the field pk_ticketID which holds the number 1, serial has the field pkb_fk_ticketNo which holds the number 1, and parts has the field fk_ticketNo which holds the number 1. Right now i can get the correct table information for ticketMaster but for the serial an parts i get all the tables that are in those tables instead of just the one record needed, which in this case is the one record that holds the number 1.

Right now here is what i have

Expand|Select|Wrap|Line Numbers

 
<!---Shows what was previously entered into table ticketmaster--->

<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>
 
<cfquery name="serial" datasource="CustomerSupport">

        SELECT pka_serialNo,pkb_fk_ticketNo,model_no,product_type,

software_hardware,resolution,resolution_date,

         verification_date,rma_data,

type_hardware_failure,dept_responsibility,resolution_verified_by FROM dbo.tbl_CS_serial

</cfquery>
 
<cfquery name="parts" datasource="CustomerSupport">

        SELECT pk_partID,fk_serialNo,fk_ticketNo,hc_partNo,

part_returned,defective,submission

         FROM dbo.tbl_CS_parts

</cfquery>
 
<form name="page1" id="page1" action="saveticket1edit.cfm?<cfoutput query="ticket">pk_ticketID=#pk_ticketID#</cfoutput><cfoutput query="serial">&pkb_fk_ticketNo=#pkb_fk_ticketNo#</cfoutput><cfoutput query="parts">&fk_ticketNo=#fk_ticketNo#</cfoutput>"

method="POST" onSubmit="return validate_form();">

</form>

If you could let me know what i am doing wrong i would really appreciate it, i been looking online for days an can't find anything online that does anything i am trying to do. But again THANK YOU so much for the help :) on the autofill i really really appreciate it!!!

Thank you again for all the help :),
Rach

Sep 22 '08 #105

acoder

16,027

Expert Mod 8TB

Glad the auto-fill's now fully working.

Since this is a new problem, I would say yes, this calls for a new thread. I think this one's long enough as it is :)

Sep 22 '08 #106

bonneylake

769

512MB

Hey Acoder,

Thank you again for all the help. I opened a new thread, if you wouldn't mind checking it out i would really appreciate it :)

http://bytes.com/forum/showthread.ph...33#post3361333

Thank you so much for all the help once again,

Rach

Sep 22 '08 #107

Post your reply

Similar topics