[SOLVED] Javascript using inline html to copy text boxes
Okay, this is not a true WebFOCUS question - it is more of a javascript issue that I cannot get to work within WebFOCUS. However, I am desperate enough to post it in hope that someone my have come up against this before.
It's been about a year since I wrote my last javascript. It's remarkable how much I have forgotten in the last year - not that I was a boy genius to begin with.
I am trying to use a Radio button with an onclick event. I want to copy 'everything' in one select box to another select box.
I have code that allows a consumer to double click on a field in box F and have it copy to box G and visa vera. This works great; however, I want to be able to click on a radio button and copy all items in box F to box G.
Here is the radio button and the html for select box F and G:
<input type="radio" name="OUTEN" id="DA" value="ALL" onClick="displayAll[document.forms['ezform'].elements['F'])">Display All Fields
Here are the select boxs for F and G. The !IBI.FIL.HOLDLIST; contains a list of dynamically generated field names that contains x number of entries
Here it the script I have been playing with. I know that each item in box F is being put into the array (I use the alert to verify that). I cannot figure out had to pass the contents of the array over to box G.
[/code]function displayAll(toListG) { // This function is used to move all fields names to from/to
FOCUS 7.3.4 on Z/OS WebFOCUS/EDA 7.1.8 self-service - Win2003 and Z/OS
November 05, 2008, 11:29 AM
Harry M Cleveland
Okay, I notice that my html tags messed up the post. How do I post the html tags without messing things up.
SORRY!
FOCUS 7.3.4 on Z/OS WebFOCUS/EDA 7.1.8 self-service - Win2003 and Z/OS
November 05, 2008, 11:55 AM
Francis Mariani
Harry, put your HTML code between
[code]
and
[/code]
tags in your posting.
Francis
Give me code, or give me retirement. In FOCUS since 1991
Production: WF 7.7.05M, Dev Studio, BID, MRE, WebSphere, DB2 / Test: WF 8.1.05M, App Studio, BI Portal, Report Caster, jQuery, HighCharts, Apache Tomcat, MS SQL Server
November 05, 2008, 12:51 PM
Francis Mariani
The function moveItem copies all the options from one select list to the other.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title> New Document </title>
<script type="text/javascript">
function displayAll(toListG)
{
// This function is used to move all fields names to from/to <select boxes
var fromListF = document.getElementById('F');
toListG = new Array();
for(i=0; i<fromListF.length; i++)
{
toListG[i] = fromListF.options[i].text;
alert("Number of form elements=" + i + " value=" + toListG[i])
}
return;
}
function moveItem(SelectBox1,SelectBox2)
{
SelectBox2.length = 0;
for (j=0; j<SelectBox1.length; j++)
{
var aOption = document.createElement("OPTION");
aOption.text = SelectBox1.options[j].text;;
aOption.value = SelectBox1.options[j].value;;
SelectBox2.add(aOption);
}
}
</script>
</head>
<body>
<form name="ezform">
<input type="radio" name="OUTEN" id="DA" value="ALL" onClick="displayAll(document.forms['ezform'].elements['F'])">Display All Fields
<select size="10" name="F" id="F" style="width:230;" ondblclick="moveItem(document.forms['ezform'].elements['F'],document.forms['ezform'].elements['G']);">
<option value="A">A
<option value="B">B
<option value="C">C
</select>
<select size="10" name="G" id="G" style="width:230;" ondblClick="moveItem(document.forms['ezform'].elements['G'],document.forms['ezform'].elements['F']);">
</select>
</form>
</body>
</html>
Francis
Give me code, or give me retirement. In FOCUS since 1991
Production: WF 7.7.05M, Dev Studio, BID, MRE, WebSphere, DB2 / Test: WF 8.1.05M, App Studio, BI Portal, Report Caster, jQuery, HighCharts, Apache Tomcat, MS SQL Server
November 05, 2008, 01:54 PM
Harry M Cleveland
Thank you Francis ... for both of your posts. I will be playing with your suggestion this afternoon.
Someone in the UK suggested the following:
<input type="radio" name="OUTEN" value="PRINT " onClick="Move('F','G');">Display All Fields
and the script:
function moveIt(SelectBox1,SelectBox2)
{
SelectBox2.length = 0;
for (j=0; j<SelectBox1.length; j++)
{
var aOption = document.createElement("OPTION");
aOption.text = SelectBox1.options[j].text;;
aOption.value = SelectBox1.options[j].value;;
SelectBox2.add(aOption);
}
}
This worked; however, I will look at your code and give it a try.
Thanks again for your response and for telling me how to post html tags.
Harry
FOCUS 7.3.4 on Z/OS WebFOCUS/EDA 7.1.8 self-service - Win2003 and Z/OS
November 05, 2008, 02:08 PM
Francis Mariani
Harry, that code sure looked like mine.
By the way, now that you know how to add
[code]
tags to a post, why not edit your original post?
Thanks,
Francis.
Francis
Give me code, or give me retirement. In FOCUS since 1991
Production: WF 7.7.05M, Dev Studio, BID, MRE, WebSphere, DB2 / Test: WF 8.1.05M, App Studio, BI Portal, Report Caster, jQuery, HighCharts, Apache Tomcat, MS SQL Server
November 05, 2008, 02:20 PM
Harry M Cleveland
Thanks again...
Here what my original request looked like:
Here is the radio button and the html for select box F and G:
<input type="radio" name="OUTEN" id="DA" value="ALL" onClick="displayAll(document.forms['ezform'].elements['F'])">Display All Fields
Here are the select boxs for F and G. The !IBI.FIL.HOLDLIST; contains a list that is dynamically generated that contains x number of entries
Here it the script I have been playing with. I know that each item in box F is being put into the array (I use the alert to verify that). I cannot figure out had to pass the contents of the array over to box G.
function displayAll(toListG)
{
// This function is used to move all fields names to from/to <select boxes
var fromListF = document.getElementById('F');
toListG = new Array();
for(i=0; i<fromListF.length; i++)
{
toListG[i] = fromListF.options[i].text;
alert("Number of form elements=" + i + " value=" + toListG[i])
}
}
The values of the F box are copied to the toListG array; however, I cannot figure out how to get the contents of the array to be copied to box G.
My understanding of javascript is flawed because I still cannot see what I am doing wrong in passing the toListG values. I know the array is loaded but the values are not being returned. I started re-reading a javascript manual last night but only got 18 pages in before falling to sleep.
FOCUS 7.3.4 on Z/OS WebFOCUS/EDA 7.1.8 self-service - Win2003 and Z/OS
