?
Solved

Dynamic Form Field Population

Posted on 2003-03-26
15
Medium Priority
?
246 Views
Last Modified: 2013-12-24
I am trying to do something similar to the question listed here:
http://www.experts-exchange.com/Web/WebDevSoftware/ColdFusion/Q_20370403.html

When I look at the solution provided and attempt to implement it, I am pulling the first record from the DB into the fields that are supposed to be updated with the javascript onchange event of the listbox.

I see that the code for these fields still references the original query, prehaps this is a mistake, or am I missing something?
0
Comment
Question by:rredburn
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 7
  • 6
  • 2
15 Comments
 
LVL 8

Accepted Solution

by:
TallerMike earned 300 total points
ID: 8213475
How much data is your query returning? You can try this method if you want. It may take some cleanup, but you'll get the idea:

<script language="JavaScript">
// This is a JavaScript object Def
function queryRow(id,name,language)
  {
  this.id = id;
  this.name = name;
  this.language = language;
  }

// This is where we'll store all of the queryRow ojects
var queryArray = new Array();

// This will be called using the onchange to fill in the inputs
function showQueryRow(FormName,queryRowObj)
  {
  with(FormName)
    {
    name.value = queryRowObj.name;
    language.value = queryRowObj.language;
    }
  }

// Here you'll want to loop through your records and create Objects for each
<cfoutput query="myQueryName">
  queryArray[#id#] = new queryRow(#id#,'#name#','#language#');</cfoutput>
</script>

****************************************************************************************
****************************************************************************************

Now in the Cold Fusion end, we do this for the SELECT:

<select name="id" onchange="showQueryRow(this.form,queryArray[this.options[this.selectedIndex].value])">
<cfoutput query="myQueryName">
  <option value="#id#">#name#<option></cfoutput>
</select>
0
 

Author Comment

by:rredburn
ID: 8213585
The query is returning 3 items currently.  I was attempting to replicate the same type of form as in the previous question.  I have a list box, which, when selected, will update 2 other fields on the form with the coresponding info.

In the previous example they have the values statically created, which is fine for me, for now.  I just want to have the other fields update as I change the list box selection.  Currently, the fields which are not changing are pulling values from the query and not the javascript.

Does this make more sense?
0
 
LVL 8

Expert Comment

by:TallerMike
ID: 8213651
I understand what you're saying. The solution I posted above should be a better solution to your problem. It is a cleaner and easier to implement method.

If you want me to try and fix the code you've already got, you'd have to post the code itself.
0
Plug and play, no additional software required!

The ATEN UE3310 USB3.1 Gen1 Extender Cable allows users to extend the distance between the computer and USB devices up to 10 m (33 ft). The UE3310 is a high-quality, cost-effective solution for professional environments such as hospitals, factories and business facilities.

 

Author Comment

by:rredburn
ID: 8213706
OK, I've never really used JS, so it looked a little scary to me.  I'll give it a shot and let you know what happens.  
0
 
LVL 8

Expert Comment

by:TallerMike
ID: 8213873
Both methods use JavaScript to produce the end results. Although the JavaScript I presented above is a bit more complex to understand maybe, even though it is easier to implement.

I can explain a little bit of what is happening if you want:

**********************************************************************
**********************************************************************

Basically we're creating an object to store each row of the query in. Each of these objects will contain the columns that you want to fill the inputs on your form with. Objects are pretty simple to create actually, basically like creating a function:

function queryRow(id,name,language)
 {
 this.id = id;
 this.name = name;
 this.language = language;
 }

Everytime we call this function, it returns an object of type 'queryRow'. So, what can you do with this? You can use it's attributes in a handy fashion, like so:

testObj = new queryRow(1,'TallerMike','Cold Fusion');
alert(testObj.name);

This will alert 'TallerMike'.

**********************************************************************
**********************************************************************

OK, now that we've got all of our query rows into holding objects, we need a way to reference them. Now, we could name each of these objects so that we could reference them, like so:

TallerMike = new queryRow(123,'TallerMike','Cold Fusion');

But this would require us to use the Eval() function to get the object which is a slow function.

JavaScript gives us what is called an Associative Array. This means that you don't have to insert items into an array sequentially. Nor do you even need to user a number, you can use a string like so:

queryArray['TallerMike'] = = new queryRow(123,'TallerMike','Cold Fusion');

Now this is easier to read, but computers run on numbers and ID, not to mention your select box. If we use the ID which is the 'value' atttribute in your select, then we have a handy way to reference the objects stored in the array:

queryArray[123] = = new queryRow(123,'TallerMike','Cold Fusion');

<select name="users">
  <option value="123">TallerMike</option>
  <option value="456">rredburn</option>
</select>

**********************************************************************
**********************************************************************

Finally what happens is that when we change the select option, we run some code:

showQueryRow(this.form,queryArray[this.options[this.selectedIndex].value])

This function takes 2 parameters:

The form object where the inputs are located that we want to fill (using this.form works if it is the same form the select is in).

And then the object we created that is associated with the option selected. The next bit of code simply takes the selected option and grabs its value, then uses this to return the object from the queryArray.

**********************************************************************
**********************************************************************

Follow? Let me know, if you don't know JavaScript it may be a lot to follow. But it's really similar to alot of OO languages in procedure and function.
0
 

Author Comment

by:rredburn
ID: 8213883
What about the 2 fields that I need to change as the list box values change?  How would the code read for those?
0
 
LVL 8

Expert Comment

by:TallerMike
ID: 8213940
OK, so what you'll want to do is to use those names in the objectDefinition as well as the showQueryRow function.

So lets say the input names that you need to fill are as follows:

user_id, name, address, city

**********************************************************************
**********************************************************************

Then you would change the objectDefinition to read like this:

function queryRow(user_id, name, address, city)
  {
  this.user_id = user_id;
  this.name = name;
  this.address = address;
  this.city = city
  }

**********************************************************************
**********************************************************************

Of course your output loop like so:

<cfoutput query="myQueryName">
 queryArray[#user_id#] = new queryRow(#user_id#,'#name#','#address#','#city#');</cfoutput>

**********************************************************************
**********************************************************************

And finally the function:

function showQueryRow(FormName,queryRowObj)
 {
 with(FormName)
   {
   name.value = queryRowObj.name;
   address.value = queryRowObj.address;
   city.value = queryRowObj.city;
   }
 }
0
 
LVL 8

Expert Comment

by:TallerMike
ID: 8213953
This function is what's actually changing the values:

function showQueryRow(FormName,queryRowObj)
{
with(FormName)
  {
  name.value = queryRowObj.name;
  address.value = queryRowObj.address;
  city.value = queryRowObj.city;
  }
}

It takes in the form object where the inputs exist, and the queryRowObject where the values are defined.
0
 
LVL 11

Expert Comment

by:hart
ID: 8215693
i am just putting a suggestion, u can use it if u want.

see i think you are trying to do this.

<select name="select1" onchange="callme()">
  <option value="text1value,text2value,1">1</option>
  <option value="text1value,text2value,2">2</option>
</select>
<!-- In this the text1value is for text box text1 and text2value is for text2 and the last onez just the id for the option --->

<input type="text" name="text1" value="">
<input type="text" name="text2" value="">


onchange of the select box u want to show values in the respective text boxes.

for this the following javascript function
<script language="JavaScript">
function callme()
{
//get value of selected option (i.e text1value,text2value,id..

var selval = document.formname.select1.value;

//split it using delimiter ',' the split forms an array with 3 elements.
var selsplit = selval.split(",");

//assign it to the text box
document.formname.text1.value = selsplit[0];
document.formname.text2.value = selsplit[1];
}
</script>


this is some what similar to tallermikes solution.
but i feel this is more simplified.

hope tallermike agrees :-)
if not i just let me know i will not continue to answer this question..

let me know..

Regards
Hart(Harish)
0
 
LVL 11

Expert Comment

by:hart
ID: 8215709
i am just putting a suggestion, u can use it if u want.

see i think you are trying to do this.

<select name="select1" onchange="callme()">
  <option value="text1value,text2value,1">1</option>
  <option value="text1value,text2value,2">2</option>
</select>
<!-- In this the text1value is for text box text1 and text2value is for text2 and the last onez just the id for the option --->

<input type="text" name="text1" value="">
<input type="text" name="text2" value="">


onchange of the select box u want to show values in the respective text boxes.

for this the following javascript function
<script language="JavaScript">
function callme()
{
//get value of selected option (i.e text1value,text2value,id..

var selval = document.formname.select1.value;

//split it using delimiter ',' the split forms an array with 3 elements.
var selsplit = selval.split(",");

//assign it to the text box
document.formname.text1.value = selsplit[0];
document.formname.text2.value = selsplit[1];
}
</script>


this is some what similar to tallermikes solution.
but i feel this is more simplified.

hope tallermike agrees :-)
if not i just let me know i will not continue to answer this question..

let me know..

Regards
Hart(Harish)
0
 

Author Comment

by:rredburn
ID: 8218146
TallerMike,

Thanks for the lesson, I don't know JS but I have studied VB, so I'm not completely lost.  Actually, I follow you very well, thanks.

What I'm not sure about is how to code the fields that I want to update with the changing of the list box.  The list box seems to be populating fine.  Here's your code that I have modified to fit what I'm trying to do, maybe you can see a mistake.  

<cfquery name="Facilities" datasource="RobTest" dbtype="Oracle80">
Select *
From RobTest.Facilities
</cfquery>

<html>
<head>
     <title>Task Order</title>

<script language="JavaScript">

function queryRow(FAC_LOC_ID,FAC_TYPE,FAC_ADDRESS)
 {
 this.FAC_LOC_ID = FAC_LOC_ID;
 this.FAC_TYPE = FAC_TYPE;
 this.FAC_ADDRESS = FAC_ADDRESS;
 }

var queryArray = new Array();

function showQueryRow(TaskOrder,queryRowObj)
 {
 with(TaskOrder)
   {
   fac_type.value = queryRowObj.fac_type;
   fac_address.value = queryRowObj.fac_address;
   }
 }

<cfoutput query="Facilities">
 queryArray[#FAC_LOC_ID#] = new queryRow(#FAC_LOC_ID#,'#FAC_TYPE#',
 '#FAC_ADDRESS#');</cfoutput>
</script>

Inside form:

<TD>
     <select name="Fac_Loc_ID" onchange="showQueryRow(this.form,queryArray[this.options[this.selectedIndex].value])">
          <cfoutput query="Facilities">
          <option value="#FAC_LOC_ID#">#FAC_LOC_ID#</option>
          </cfoutput>
     </select>
     </TD>
    <TD>
     <cfoutput>
     NOT SURE WHAT GOES HERE
     </cfoutput>
     </TD>
    <TD>
     <cfoutput>
     NOT SURE WHAT GOES HERE
     </cfoutput>
     </TD>
0
 
LVL 8

Expert Comment

by:TallerMike
ID: 8218262
Great, glad you followed me. Makes things alot easier to debug when I know we're on the same page/level.

So the only thing it looks like you're missing is the inputs that need to be filled in. You'll need to add the 2 inputs to your form like so:

<input type="text" name="fac_type" value="">
<input type="text" name="fac_address" value="">

Remember that JavaScript IS case sensative, so be sure to use a consistant case in your variables.
0
 

Author Comment

by:rredburn
ID: 8218269
TallerMike,

Thanks for the lesson, I don't know JS but I have studied VB, so I'm not completely lost.  Actually, I follow you very well, thanks.

What I'm not sure about is how to code the fields that I want to update with the changing of the list box.  The list box seems to be populating fine.  Here's your code that I have modified to fit what I'm trying to do, maybe you can see a mistake.  

<cfquery name="Facilities" datasource="RobTest" dbtype="Oracle80">
Select *
From RobTest.Facilities
</cfquery>

<html>
<head>
     <title>Task Order</title>

<script language="JavaScript">

function queryRow(FAC_LOC_ID,FAC_TYPE,FAC_ADDRESS)
 {
 this.FAC_LOC_ID = FAC_LOC_ID;
 this.FAC_TYPE = FAC_TYPE;
 this.FAC_ADDRESS = FAC_ADDRESS;
 }

var queryArray = new Array();

function showQueryRow(TaskOrder,queryRowObj)
 {
 with(TaskOrder)
   {
   fac_type.value = queryRowObj.fac_type;
   fac_address.value = queryRowObj.fac_address;
   }
 }

<cfoutput query="Facilities">
 queryArray[#FAC_LOC_ID#] = new queryRow(#FAC_LOC_ID#,'#FAC_TYPE#',
 '#FAC_ADDRESS#');</cfoutput>
</script>

Inside form:

<TD>
     <select name="Fac_Loc_ID" onchange="showQueryRow(this.form,queryArray[this.options[this.selectedIndex].value])">
          <cfoutput query="Facilities">
          <option value="#FAC_LOC_ID#">#FAC_LOC_ID#</option>
          </cfoutput>
     </select>
     </TD>
    <TD>
     <cfoutput>
     NOT SURE WHAT GOES HERE
     </cfoutput>
     </TD>
    <TD>
     <cfoutput>
     NOT SURE WHAT GOES HERE
     </cfoutput>
     </TD>
0
 

Author Comment

by:rredburn
ID: 8218430
You the man!  Thanks a lot!
This is going to make my life a million times easier.
0
 
LVL 8

Expert Comment

by:TallerMike
ID: 8218519
No problem. Glad I could help
0

Featured Post

Get 15 Days FREE Full-Featured Trial

Benefit from a mission critical IT monitoring with Monitis Premium or get it FREE for your entry level monitoring needs.
-Over 200,000 users
-More than 300,000 websites monitored
-Used in 197 countries
-Recommended by 98% of users

Question has a verified solution.

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

Article by: kevp75
Hey folks, 'bout time for me to come around with a little tip. Thanks to IIS 7.5 Extensions and Microsoft (well... really Windows 8, and IIS 8 I guess...), we can now prime our Application Pools, when IIS starts. Now, though it would be nice t…
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…
Add bar graphs to Access queries using Unicode block characters. Graphs appear on every record in the color you want. Give life to numbers. Hopes this gives you ideas on visualizing your data in new ways ~ Create a calculated field in a query: …
Have you created a query with information for a calendar? ... and then, abra-cadabra, the calendar is done?! I am going to show you how to make that happen. Visualize your data!  ... really see it To use the code to create a calendar from a q…
Suggested Courses

765 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