rredburn
asked on
Dynamic Form Field Population
I am trying to do something similar to the question listed here:
https://www.experts-exchange.com/questions/20370403/Dynamic-Form-Field-Population.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?
https://www.experts-exchange.com/questions/20370403/Dynamic-Form-Field-Population.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?
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
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.
If you want me to try and fix the code you've already got, you'd have to post the code itself.
ASKER
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.
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','C
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',
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',
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',
<select name="users">
<option value="123">TallerMike</op
<option value="456">rredburn</opti
</select>
**************************
**************************
Finally what happens is that when we change the select option, we run some code:
showQueryRow(this.form,que
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.
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','C
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',
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',
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',
<select name="users">
<option value="123">TallerMike</op
<option value="456">rredburn</opti
</select>
**************************
**************************
Finally what happens is that when we change the select option, we run some code:
showQueryRow(this.form,que
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.
ASKER
What about the 2 fields that I need to change as the list box values change? How would the code read for those?
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#
**************************
**************************
And finally the function:
function showQueryRow(FormName,quer
{
with(FormName)
{
name.value = queryRowObj.name;
address.value = queryRowObj.address;
city.value = queryRowObj.city;
}
}
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#
**************************
**************************
And finally the function:
function showQueryRow(FormName,quer
{
with(FormName)
{
name.value = queryRowObj.name;
address.value = queryRowObj.address;
city.value = queryRowObj.city;
}
}
This function is what's actually changing the values:
function showQueryRow(FormName,quer
{
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.
function showQueryRow(FormName,quer
{
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.
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,text2val
<option value="text1value,text2val
</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.
//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.va
document.formname.text2.va
}
</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)
see i think you are trying to do this.
<select name="select1" onchange="callme()">
<option value="text1value,text2val
<option value="text1value,text2val
</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.
//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.va
document.formname.text2.va
}
</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)
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,text2val
<option value="text1value,text2val
</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.
//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.va
document.formname.text2.va
}
</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)
see i think you are trying to do this.
<select name="select1" onchange="callme()">
<option value="text1value,text2val
<option value="text1value,text2val
</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.
//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.va
document.formname.text2.va
}
</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)
ASKER
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_TY
{
this.FAC_LOC_ID = FAC_LOC_ID;
this.FAC_TYPE = FAC_TYPE;
this.FAC_ADDRESS = FAC_ADDRESS;
}
var queryArray = new Array();
function showQueryRow(TaskOrder,que
{
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#,'#FA
'#FAC_ADDRESS#');</cfoutpu
</script>
Inside form:
<TD>
<select name="Fac_Loc_ID" onchange="showQueryRow(thi
<cfoutput query="Facilities">
<option value="#FAC_LOC_ID#">#FAC_
</cfoutput>
</select>
</TD>
<TD>
<cfoutput>
NOT SURE WHAT GOES HERE
</cfoutput>
</TD>
<TD>
<cfoutput>
NOT SURE WHAT GOES HERE
</cfoutput>
</TD>
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_TY
{
this.FAC_LOC_ID = FAC_LOC_ID;
this.FAC_TYPE = FAC_TYPE;
this.FAC_ADDRESS = FAC_ADDRESS;
}
var queryArray = new Array();
function showQueryRow(TaskOrder,que
{
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#,'#FA
'#FAC_ADDRESS#');</cfoutpu
</script>
Inside form:
<TD>
<select name="Fac_Loc_ID" onchange="showQueryRow(thi
<cfoutput query="Facilities">
<option value="#FAC_LOC_ID#">#FAC_
</cfoutput>
</select>
</TD>
<TD>
<cfoutput>
NOT SURE WHAT GOES HERE
</cfoutput>
</TD>
<TD>
<cfoutput>
NOT SURE WHAT GOES HERE
</cfoutput>
</TD>
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.
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.
ASKER
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_TY
{
this.FAC_LOC_ID = FAC_LOC_ID;
this.FAC_TYPE = FAC_TYPE;
this.FAC_ADDRESS = FAC_ADDRESS;
}
var queryArray = new Array();
function showQueryRow(TaskOrder,que
{
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#,'#FA
'#FAC_ADDRESS#');</cfoutpu
</script>
Inside form:
<TD>
<select name="Fac_Loc_ID" onchange="showQueryRow(thi
<cfoutput query="Facilities">
<option value="#FAC_LOC_ID#">#FAC_
</cfoutput>
</select>
</TD>
<TD>
<cfoutput>
NOT SURE WHAT GOES HERE
</cfoutput>
</TD>
<TD>
<cfoutput>
NOT SURE WHAT GOES HERE
</cfoutput>
</TD>
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_TY
{
this.FAC_LOC_ID = FAC_LOC_ID;
this.FAC_TYPE = FAC_TYPE;
this.FAC_ADDRESS = FAC_ADDRESS;
}
var queryArray = new Array();
function showQueryRow(TaskOrder,que
{
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#,'#FA
'#FAC_ADDRESS#');</cfoutpu
</script>
Inside form:
<TD>
<select name="Fac_Loc_ID" onchange="showQueryRow(thi
<cfoutput query="Facilities">
<option value="#FAC_LOC_ID#">#FAC_
</cfoutput>
</select>
</TD>
<TD>
<cfoutput>
NOT SURE WHAT GOES HERE
</cfoutput>
</TD>
<TD>
<cfoutput>
NOT SURE WHAT GOES HERE
</cfoutput>
</TD>
ASKER
You the man! Thanks a lot!
This is going to make my life a million times easier.
This is going to make my life a million times easier.
No problem. Glad I could help
ASKER
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?