469,342 Members | 6,653 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,342 developers. It's quick & easy.

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
  1. <cfquery name="getcustnum" datasource="CustomerSupport">
  2. usp_CS_Getcontacts
  3. </cfquery>
  4. <HTML>
  5. <HEAD>
  6.     <TITLE>JavaScript Toolbox - Auto-Complete</TITLE>
  7. <SCRIPT LANGUAGE="JavaScript" SRC="autocomplete.js"></SCRIPT>
  8. </HEAD>
  9. <BODY BGCOLOR=#FFFFFF LINK="#00615F" VLINK="#00615F" ALINK="#00615F">
  10. <FORM>
  11. Customer Number*
  12. <INPUT TYPE="text" NAME="input1" VALUE="" ONKEYUP="autoComplete(this,this.form.options,'value',true)" onChange="validate(this.form.custnum,'Customer Number')">
  13. <SELECT NAME="options" 
  14. onChange="this.form.input1.value=this.options[this.selectedIndex].value" onclick="">
  15. <cfoutput query="getcustnum">
  16. <option value="#fk_custNum#">#fk_custNum#</option>
  17. </cfoutput>
  18. </SELECT>
  19. Company Name:<input type="text" name="compname"  size="20" id="compname"/>
  20. First Name:<input type="text" name="fname"  size="20" id="fname"/>
  21. Last Name:<input type="text" name="lname"size="20" id="lname"/>
  22. </FORM>
  23. </BODY>
  24. </HTML>

here is the javascript
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.     }
But thank you in advance :),
Rach
Aug 15 '08
106 17542
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
  1. Customer Number*:<input type="text" name="custnum" id="clientID" 
  2. value="#fk_customer_number#"  ONKEYUP="autoComplete(this,this.form.customer,'value',false)" size="20"/>
  3. <cfset fk_customer_number = #fk_customer_number#>
  4. </cfoutput>
  5. <SELECT NAME="customer" id="options"
  6. onChange="this.form.custnum.value=this.options[this.selectedIndex].value;"/>
  7. <option value="" selected></option>
  8. <cfoutput query="getcustnum">
  9. <option value="#fk_custNum#"<cfif #fk_custNum# is #fk_customer_number#>selected</cfif>>#fk_custNum#</option>
  10. </cfoutput>
  11. </SELECT>
  12. <input type="button" class="custnum" name="insert" value="Insert Contact" 
  13.  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
  1. var ajax = new sack();
  2.     var currentClientID=false;
  3.     var currentCustomer=false;
  4.     function getClientData()
  5.     {
  6.         var clientId = document.getElementById('clientID').value;
  7.         var customer = document.getElementById('customer').value;
  8.         if (clientId != "" & customer != "") {
  9.             currentClientID = clientId
  10.             currentCustomer = customer
  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.     }}
here is what the code originally looks like.
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.         if (clientId != "") {
  7.             currentClientID = clientId
  8.             ajax.requestFile = 'getClient.cfm?custnum='+clientId;    // Specifying which file to get
  9.             ajax.onCompletion = showClientData;    // Specify function that will be executed after file has been found
  10.             ajax.runAJAX();        // Execute AJAX function            
  11.     }}
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
  1. var clientId = document.getElementById('clientID').value;
  2. var customer = document.getElementById('options').value;
  3. 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
  1. <!---Shows what was previously entered into table ticketmaster--->
  2. <cfquery name="ticket" datasource="CustomerSupport">
  3.         SELECT pk_ticketID,title,priority,status,
  4. cost_center,fk_customer_number,
  5. customer_company,customer_Fname,customer_Lname,
  6. customer_add1,customer_city,customer_state,
  7. customer_zip,customer_email,customer_pri_phone,
  8. customer_sec_phone,customer_notes,htpp FROM dbo.tbl_CS_ticketMaster
  9.         WHERE pk_ticketID = #URL.pk_ticketID#
  10. </cfquery>
  11.  
  12. <cfquery name="serial" datasource="CustomerSupport">
  13.         SELECT pka_serialNo,pkb_fk_ticketNo,model_no,product_type,
  14. software_hardware,resolution,resolution_date,
  15.          verification_date,rma_data,
  16. type_hardware_failure,dept_responsibility,resolution_verified_by FROM dbo.tbl_CS_serial
  17. </cfquery>
  18.  
  19. <cfquery name="parts" datasource="CustomerSupport">
  20.         SELECT pk_partID,fk_serialNo,fk_ticketNo,hc_partNo,
  21. part_returned,defective,submission
  22.          FROM dbo.tbl_CS_parts
  23. </cfquery>
  24.  
  25. <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>"
  26. method="POST" onSubmit="return validate_form();">
  27. </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

Sign in to post your reply or Sign up for a free account.

Similar topics

2 posts views Thread by John Scott | last post: by
1 post views Thread by mikeybe | last post: by
2 posts views Thread by Joanne Lewis | last post: by
1 post views Thread by CARIGAR | last post: by
reply views Thread by zhoujie | last post: by
reply views Thread by suresh191 | last post: by
1 post views Thread by haryvincent176 | last post: by
1 post views Thread by Marylou17 | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.