Solved

Setting initial form values w/ CF and JavaScript

Posted on 2004-09-26
8
238 Views
Last Modified: 2013-12-24
Ok, this should be easy, but I have a way of making the easiest things the hardest. Now to the situation at hand. I am creating a coldfusion site to sell a product. For each product, the site admin needs to be able to edit item info. Right now I have the site set up to use the same page to both add and edit items. The form shows blank to add an item (this obviously works correctly), but should contain existing data for an item to be edited. This is where I am having problems. I am trying to set the value element of the input field on the forms. Here is my code;

<cfif #url.a# eq "e">
      <cfquery name="getItemInfo" datasource="ninaDB">
      Select *
      From table
      Where item_id = <cfqueryparam cfsqltype="cf_sql_integer" maxlength="2" value="#url.i#">
      </cfquery>
      
      <script language="JavaScript" type="text/JavaScript">
            document.theForm.item_id.Value = <cfoutput>#getItemInfo.item_id#</cfoutput>;
            document.theForm.Rname.Value = "<cfoutput>#getItemInfo.item_name#</cfoutput>";
            document.theForm.Rcat_id.value = "<cfoutput>#getItemInfo.cat_id#</cfoutput>";
            document.theForm.Rprice.value = "<cfoutput>#getItemInfo.price#</cfoutput>";
            document.theForm.shipping.value = <cfoutput>#getItemInfo.shipping#</cfoutput>;
            document.theForm.Rdesc_shrt.value = <cfoutput>#getItemInfo.desc_shrt#</cfoutput>;
            document.theForm.Rdesc_long.value = <cfoutput>#getItemInfo.desc_long#</cfoutput>;
            document.theForm.Rpicture_sml.value = <cfoutput>#getItemInfo.picture_sml#</cfoutput>;
            document.theForm.Rpicture_lrg.value = <cfoutput>#getItemInfo.picture_lrg#</cfoutput>;
            document.theForm.isSold.value = <cfoutput>#getItemInfo.isSold#</cfoutput>;
            document.theForm.isListed.value = <cfoutput>#getItemInfo.isListed#</cfoutput>;
            document.theForm.isFeatured.value = <cfoutput>#getItemInfo.isFeatured#</cfoutput>;
</script>
</cfif>

url.a is the action variable that determines if the page is for adding or editing an item. In the source code for the page, the cfoutputs work correcting (displaying the contents of the variable), but I keep getting an error about a missing semi-colon, which I don't understand.

I know this is an idiots question,

BUT PLEASE HELP!!!

Thanks,
Josh
0
Comment
Question by:dh2oing
  • 3
  • 2
8 Comments
 
LVL 17

Expert Comment

by:Tacobell777
ID: 12156560
wow wow, you are mixing JS with CF, not a good idea in this case.

Try

<cfparam name="form.firstName" default="" type="string" />

<cfoutput>
<form method="post" action="">
<input type="text" name="firstName" value="#form.firstName#" />
</form>
</cfoutput>

enter some data
now submit the form
you'll notice that the form is populated with the entry you put in there...
this is good if there was an error and you wanted to display the data to the user again so he/she can correct it.

Now for the edit
same page

<cfquery name="qData" datasource="yourdatasource">
SELECT firstname
FROM yourtable
WHERE (x = y)
</cfquery>

<cfset form.firstname = qData.firstName />

<cfparam name="form.firstName" default="" type="string" />

<cfoutput>
<form method="post" action="">
<input type="text" name="firstName" value="#form.firstName#" />
</form>
</cfoutput>

There is an easier way to populate the form scope again, but we'll get to that when you understand the above concept...
0
 
LVL 17

Accepted Solution

by:
Tacobell777 earned 125 total points
ID: 12156571
just incase you do not care about the above solution:

<cfoutput>
 <script language="JavaScript" type="text/JavaScript">
          document.theForm.item_id.Value = #getItemInfo.item_id#;
          document.theForm.Rname.Value = "#getItemInfo.item_name#";
          document.theForm.Rcat_id.value = "#getItemInfo.cat_id#";
          document.theForm.Rprice.value = "#getItemInfo.price#";
          document.theForm.shipping.value = #getItemInfo.shipping#;
          document.theForm.Rdesc_shrt.value = #getItemInfo.desc_shrt#;
          document.theForm.Rdesc_long.value = #getItemInfo.desc_long#;
          document.theForm.Rpicture_sml.value = #getItemInfo.picture_sml#;
          document.theForm.Rpicture_lrg.value = #getItemInfo.picture_lrg#;
          document.theForm.isSold.value = #getItemInfo.isSold#;
          document.theForm.isListed.value = #getItemInfo.isListed#;
          document.theForm.isFeatured.value = #getItemInfo.isFeatured#;
</script>
</cfoutput>
make sure you have a ; at the end of each statement, and use ' around string values
0
 

Author Comment

by:dh2oing
ID: 12156624
I tried the second solution, but I still get an error: Expected: ';' Line: 22 Column: 45. (that is right after the '=' on the first document.form...
0
Use Case: Protecting a Hybrid Cloud Infrastructure

Microsoft Azure is rapidly becoming the norm in dynamic IT environments. This document describes the challenges that organizations face when protecting data in a hybrid cloud IT environment and presents a use case to demonstrate how Acronis Backup protects all data.

 

Author Comment

by:dh2oing
ID: 12156634
I am still a little confused on solution one offered above, what is the concept? I understand using the cf variable and bypassing the js. Should I just use a cfswitch statement to set the cf variables to "" for a new item or the existing data for editings?
0
 
LVL 17

Expert Comment

by:Tacobell777
ID: 12156677
Value probably needs to be lowercase

the concept of the solution is, that you post a form to itself, if there are any errors the form is populated again and the user can correct, the same form can also be reused for editing records...
0
 
LVL 9

Assisted Solution

by:digicidal
digicidal earned 125 total points
ID: 12186416
Why not just put the logic in your form fields value attribute?  Ex.

<cfif #url.a# eq "e">
     <cfquery name="getItemInfo" datasource="ninaDB">
     Select *
     From table
     Where item_id = <cfqueryparam cfsqltype="cf_sql_integer" maxlength="2" value="#url.i#">
     </cfquery>
</cfif>
<cfoutput>
<input type="text" size="20" name="item_id" value="<cfif IsDefined('getItemInfo.Item_id')>#getItemInfo.Item_id#</cfif>">
...
</cfoutput>

That way they are blanks if not defined, and filled if they are... if you want to provide default values just make the <cfif></cfif> a <cfif><cfelse></cfif> and put the default value in the second slot.

Not sure this is the best solution, but it's definitely an easy one and will eliminate the Javascript entirely.  This will slightly slow the server compile of the page (but caching will solve that on 2nd load), but it will actually make it slightly faster on the client side since the javascript doesn't have to fire... also this will work on browsers that have javascript turned off as well.

Just a thought.
0

Featured Post

Easy, flexible multimedia distribution & control

Coming soon!  Ideal for large-scale A/V applications, ATEN's VM3200 Modular Matrix Switch is an all-in-one solution that simplifies video wall integration. Easily customize display layouts to see what you want, how you want it in 4k.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

One of the typical problems I have experienced is when you have to move a web server from one hosting site to another. You normally prepare all on the new host, transfer the site, change DNS and cross your fingers hoping all will be ok on new server…
Introduction This article explores the design of a cache system that can improve the performance of a web site or web application.  The assumption is that the web site has many more “read” operations than “write” operations (this is commonly the ca…
Two types of users will appreciate AOMEI Backupper Pro: 1 - Those with PCIe drives (and haven't found cloning software that works on them). 2 - Those who want a fast clone of their boot drive (no re-boots needed) and it can clone your drive wh…
I've attached the XLSM Excel spreadsheet I used in the video and also text files containing the macros used below. https://filedb.experts-exchange.com/incoming/2017/03_w12/1151775/Permutations.txt https://filedb.experts-exchange.com/incoming/201…

860 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question