We help IT Professionals succeed at work.

Dynamically query database and display DIV based on FORM TEXT entry

ehart12
ehart12 used Ask the Experts™
on
I am using a CFFORM with several different element types. I have a text field called "ITEM" that I would like to validate the user-entered-data against a database query as soon as the user leaves the field. I would like to diplay an image of a green check and the ITEM DESCRIPTION (queried from the database query) if the record exists, or an image of a red x if no records were found.

I have tried What is the best way to accomplish this?

Thank you,

Eric
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Pravin AsarPrincipal Systems Engineer
Top Expert 2005
Commented:
I am assuming you are using CF8 or above.

<cfajaximport tags="cfform,cfdiv"/>
<cfform name="cmp1">
<br/>Enter Text Here<cfinput type="text" name="text1"/>
</cfform>
<cfdiv bindonload="false"    bind="url:CheckMatch.cfm?text1={text1@change}" ID="theDiv"
        style="background-color:##4499dd; color:##00000; width:600; height:50"/>


The file CheckMatch.cfm will do the required operation(s) to verify the match and display the messages.

For example:

<cfif #url.text1# is "MATCH">
      <cfoutput><h1>TEXT #url.text1# matches</h1></cfoutput>
<cfelse>
      <cfoutput>
            <h1 style="color:##ff0000;">
            TEXT #url.text1# does NOT match. Expected value is MATCH
            </h1>
      </cfoutput>
</cfif>
Most Valuable Expert 2015
Commented:
(no points.. just expanding on pravinasar's example)

Just to expand on pravinasar's explanation, you don't need a cfform if you're not using one already. Also, you may want to use on @blur instead of @change.  

Also, if the goal is validation, you might consider using autosuggest .

        Form:
         <form>
                 Item <input type="text" name="item" id="item">
                 <cfdiv bindonLoad="false" bind="url:checkItem.cfm?item={item@blur}">
                 Next field <input type="text" name="otherField">
         </form>

        checkItem.cfm:
         <cfparam name="url.item" default="">
         <cfquery name="findRecord" ...>
                 SELECT  Description
                 FROM   YourTable
                 WHERE  item = <cfqueryparam value="#url.item#" cfsqltype="cf_sql_varchar">
         </cfquery>


          <cfif len(trim(url.item)) and findRecord.recordCount>
                  <img src="path/to/your/greenCheckImage.jpg">            
                  Description: <cfoutput>#findRecord.descrip0tion#</cfoutput>
          <cfelse>
                  <img src="path/to/your/redXImage.jpg">
          </cfif>

Author

Commented:
Thank you for your responses...  Using code from each of your responses I was able to get something working!  

What is the best way to start off the form with the submit button hidden until the ITEM field validates with a record?
Most Valuable Expert 2015

Commented:
Well that's a little different.  For that I'd probably use jquery to call a cfc , instead of binding to a .cfm page. Have the cfc return a json structure with "status" and "description". Then set the image and hide/show the submit button based on the response.  (edit: it's cleaner and more flexibility imo).  But you should probably open a separate question for that.

Author

Commented:
Thank you!