Focal Point Banner


As of December 1, 2020, Focal Point is retired and repurposed as a reference repository. We value the wealth of knowledge that's been shared here over the years. You'll continue to have access to this treasure trove of knowledge, for search purposes only.

Join the TIBCO Community
TIBCO Community is a collaborative space for users to share knowledge and support one another in making the best use of TIBCO products and services. There are several TIBCO WebFOCUS resources in the community.

  • From the Home page, select Predict: WebFOCUS to view articles, questions, and trending articles.
  • Select Products from the top navigation bar, scroll, and then select the TIBCO WebFOCUS product page to view product overview, articles, and discussions.
  • Request access to the private WebFOCUS User Group (login required) to network with fellow members.

Former myibi community members should have received an email on 8/3/22 to activate their user accounts to join the community. Check your Spam folder for the email. Please get in touch with us at community@tibco.com for further assistance. Reference the community FAQ to learn more about the community.


Focal Point    Focal Point Forums  Hop To Forum Categories  WebFOCUS/FOCUS Forum on Focal Point     [SOLVED] Javascript using inline html to copy text boxes

Read-Only Read-Only Topic
Go
Search
Notify
Tools
[SOLVED] Javascript using inline html to copy text boxes
 Login/Join
 
Harry M Cleveland
Silver Member
posted
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
<select size="10" name="F" id="F" style="width:230;" 
ondblclick="moveItem(document.forms['ezform'].elements['F'],document.forms['ezform'].elements['G']);">!IBI.FIL.HOLDLIST;
</select>



<select size="10" name="G" id="G" style="width:230;" 
ondblClick="moveItem(document.forms['ezform'].elements['G'],document.forms['ezform'].elements['F']);">
</select>



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
 
Posts: 36 | Registered: November 11, 2003Report This Post
Harry M Cleveland
Silver Member
posted Hide Post
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
 
Posts: 36 | Registered: November 11, 2003Report This Post
Francis Mariani
Expert
posted Hide Post
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
 
Posts: 10577 | Location: Toronto, Ontario, Canada | Registered: April 27, 2005Report This Post
Francis Mariani
Expert
posted Hide Post
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
 
Posts: 10577 | Location: Toronto, Ontario, Canada | Registered: April 27, 2005Report This Post
Harry M Cleveland
Silver Member
posted Hide Post
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
 
Posts: 36 | Registered: November 11, 2003Report This Post
Francis Mariani
Expert
posted Hide Post
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
 
Posts: 10577 | Location: Toronto, Ontario, Canada | Registered: April 27, 2005Report This Post
Harry M Cleveland
Silver Member
posted Hide Post
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



<select size="10" name="F" id="F" style="width:230;" 
ondblclick="moveItem(document.forms['ezform'].elements['F'],document.forms['ezform'].elements['G']);">!IBI.FIL.HOLDLIST;
</select>


<select size="10" name="G" id="G" style="width:230;" 
ondblClick="moveItem(document.forms['ezform'].elements['G'],document.forms['ezform'].elements['F']);">
</select>



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
 
Posts: 36 | Registered: November 11, 2003Report This Post
  Powered by Social Strata  

Read-Only Read-Only Topic

Focal Point    Focal Point Forums  Hop To Forum Categories  WebFOCUS/FOCUS Forum on Focal Point     [SOLVED] Javascript using inline html to copy text boxes

Copyright © 1996-2020 Information Builders