Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 257
  • Last Modified:

Dynamic Form Field Population

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
rredburn
Asked:
rredburn
  • 7
  • 6
  • 2
1 Solution
 
TallerMikeCommented:
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
 
rredburnAuthor Commented:
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
 
TallerMikeCommented:
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
Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
rredburnAuthor Commented:
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
 
TallerMikeCommented:
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
 
rredburnAuthor Commented:
What about the 2 fields that I need to change as the list box values change?  How would the code read for those?
0
 
TallerMikeCommented:
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
 
TallerMikeCommented:
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
 
hartCommented:
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
 
hartCommented:
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
 
rredburnAuthor Commented:
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
 
TallerMikeCommented:
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
 
rredburnAuthor Commented:
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
 
rredburnAuthor Commented:
You the man!  Thanks a lot!
This is going to make my life a million times easier.
0
 
TallerMikeCommented:
No problem. Glad I could help
0

Featured Post

Become an Android App Developer

Ready to kick start your career in 2018? Learn how to build an Android app in January’s Course of the Month and open the door to new opportunities.

  • 7
  • 6
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now