asked on

Cfselect binding with cfinput

Hi,
I've a situation here, where I want to auto populate my text boxes and a checkbox, when user select the artname from drop down.

For eg: if I select 1958, then my description, issold, price will auto populate by the value of charcoal, issold must be checked and price by 75000. Secondly, I am also wondering how can i get rid off by a NULL VALUE populating in my drop down.

I am not sure where and what I am doing wrong. My code is as under, any help, comments or feedback would be deeply appreciated.

test.cfm code is here:

<cfform>
<table>
    <tr>
        <td>Select Art Name:</td>
        <td><cfselect name="artName" id="artName" required="Yes" value="ArtID" display="Artname" bind="cfc:data.artName()" bindonload="true">
        </cfselect>
                </td>
    </tr>
    <tr>
        <td>Art Description:</td>
        <td><cfinput type="text" name="artdesc" bind="cfc:data.getallinfo(ArtID)"  bindattribute="Description" bindonload="yes"></td>
    </tr>
    <tr>
    <td>Art Price:</td>
    <td><cfinput type="text" name="artprice" bind="cfc:data.getallinfo(ArtID)"  bindattribute="Price" bindonload="yes"></td>
    </tr>
    <tr>
    <td>Is Sold:</td>
    <td><cfinput type="checkbox" name="issold" bind="cfc:data.getallinfo(ArtID)" checked="Issold" bindattribute="Issold" bindonload="yes"></td>
    </tr>
</table>
</cfform>

Open in new window

data.cfc code is here:

<cfcomponent output="false">
    <cfset THIS.dsn="cfartgallery">
    <cffunction name="artName" access="remote" returnType="query">
        <cfset var getArtname="">        
        <cfquery name="getArtname" datasource="#THIS.dsn#">
        SELECT ArtID, Artname  
        FROM art
        ORDER BY ArtName
        </cfquery>
 
 
 <cfscript>
 queryAddRow(getArtname);
 querySetCell(getArtname,'Artname','Please select Art Name', 1);
 </cfscript>        
        <cfreturn getArtname>
    </cffunction>

<cffunction name="getallinfo" access="remote" returnType="query">
<cfargument name="ArtID" type="numeric" required="true">
        <cfset var allinfo="">        
        <cfquery name="allinfo" datasource="#THIS.dsn#">
        SELECT Description, Issold, Price
        FROM art
		where ArtID = #ARGUMENTS.ArtID#
        </cfquery>
        <cfreturn allinfo>
    </cffunction>
</cfcomponent>

Open in new window

_agx_

Since you're not using filtering, I wouldn't use a bind for this. I also think there's a bug with binds and checkboxes. So I'd use something like this instead.

<cfquery name="getAllArt" datasource="cfartgallery">
	SELECT ArtID, Artname, Description, Price, Issold
    FROM 	art
	ORDER BY Artname
</cfquery>

<script type="text/javascript">
	function artSelected(list) {
		var elem = list.options[list.selectedIndex];
		document.getElementById('artdesc').value = elem.description;
		document.getElementById('artprice').value = elem.price;
		document.getElementById('issold').checked = (elem.issold == "1" ? true : false);
	}
</script>
<cfform>
<table>
    <tr>
        <td>Select Art Name:</td>
        <td><cfselect name="artName" id="artName" onChange="artSelected(this)">  
				<option value="" description="#description#" issold="0" price="">Please select Art Name</option>
				<cfoutput query="getAllArt">
					<option value="#ArtID#" description="#description#" issold="#isSold#" price="#Price#" alwaysFalse="false">#artName#</option>
				</cfoutput>				
			</cfselect>
        </td>
    </tr>
    <tr>
        <td>Art Description:</td>
        <td><cfinput type="text" id="artdesc" name="artdesc"></td>
    </tr> 
    <tr>
    <td>Art Price:</td>
    <td><cfinput type="text" name="artprice" id="artprice"></td>
    </tr>
    <tr>
    <td>Is Sold:</td>
    <td><cfinput type="checkbox" name="issold" id="issold"></td>
    </tr>
</table>
</cfform>

Open in new window

> <cfinput type="text" bind="cfc:data.getallinfo(ArtID)" bindattribute="Description"

Btw, with text boxes "bindattribute" doesn't refer to the query returned by the cfc. It means where do you want to apply whatever value is returned, ie apply it to the text box's "value". Just like in javascript

document.getElementById('artdesc').value = "... apply the value here ...";

s_hausen

ASKER

hi agx,
i tried to use your code, but i'm getting undefined in both of my text boxes and nothing in my checkbox. any thoughts??

_agx_

> <cfinput type="text" name="artprice" id="artprice">

I tested and it works successfully under CF9. Did you run the example as is - or try and modify your existing code? If the latter, maybe you forgot to add the "id" to the text boxes and checkboxes?

s_hausen

ASKER

no i used the same code as it is and i am sorry to mention in the beginning that i'm using CF9, but i don't think it has anything to do with CF versions whether its CF8 or CF9. Also when i select Please select Art Name still shows the undefined values in text boxes..
screen-shot.JPG

_agx_

Ugh .. you're right. It works in IE, but not FF. Should have known better than to test with IE ...

Give me a sec to adjust the code.

ASKER CERTIFIED SOLUTION

_agx_

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

s_hausen

ASKER

hi agx,
i'm a newbie in programming and need a big favour, and wondering in the begining you mentioned that i'm not using filtering, so you don't wanna use the binding. let suppose if i'm using filtering then how i can accomplish this task using binds.

_agx_

You mean like if your select list was filtered on some value like a category?

ie cfc:data.getArtForCategory( {someCagtegoryIDHere} )

Unfortunately binding lends itself more to single values. I think the most efficient way to do it would be to bind to a javascript value, that calls the function once. It would return a query containing not just the id and artname, but all of the fields. Then use it to populate the select list options (along with the attributes ie description, price, ...) manually. Let me see if I can come up with an example.

s_hausen

ASKER

if you like i can open another question and use the same example to use binds instead of javascript.

_agx_

Yeah, that's probably a good idea. It'll keep things simple.

s_hausen

ASKER

i was looking other route, but this solution is much simple and precise.

_agx_

Quick question: do you really need to filter the "art" list results or was there some other reason you want stick with a bind? Reason for asking is using a bind will require more complicated code. I'd almost suggest using jquery instead ...

s_hausen

ASKER

yes, i would like to go that route by filtering. and sure want to use bind instead of any other route. I've already opened the question.

_agx_

> I think the most efficient way to do it would be to bind to a javascript value, that calls the function once.

I just tried it and I don't think it'll work. Reason is CF doesn't recognize the extra attributes "price", "description", etc.... when they're populated manually instead in the html:

<option value="#ArtID#" description="#description#"

Also, I don't think you can bind a checkbox's state successfully. I think there's a bug that causes CF to try and update it's "value" instead of the "checked" state.


<cfinput type="checkbox" bindAttribute="checked"...

Though you might be able to hack something together, you might have better luck w/jquery.

s_hausen

ASKER

hi agx,
i do appreciate your help and glad to know that you don't think it can be accomplished by binding. i go ahead and close the new open question and again thx for all your help and professional opinions. have a good weekend.

_agx_

You too!