PDA

View Full Version : help - passing variable into a textbox



geoff2005
Jul 22nd, 2005, 01:57 PM
Hello everybody!

I have a form that will cut and paste the value of listbox1 to listbox2, i want also the email variable to be copied to email textbox when the value of listbox1 are passed to listbox2, i tried this code to paased the email variable, but it doesn't work:


var emps = [];
var ops = document.theFORM.list1.options;
for( var i=0; i < ops.length; i++ ) {
if( ops[i].selected ) {
document.theFORM.list1.NewOption(ops[i].text);

for( var j=0; j < users.length; j++ ) {

if( ops[i].value == users[j][0] ) {
emps[emps.length] = users[j][2];
}
}
}

var old_users = document.theFORM.email.value;
if(old_users != "") {
old_users += ";";
}
document.theFORM.email.value = old_users + concat_arr(emps);
}

below is the entire code of the form:


<HTML>
<HEAD>

<script language="javascript">

function move(fbox, tbox) {
var arrFbox = new Array();
var arrTbox = new Array();
var arrLookup = new Array();
var i;
for(i=0; i<tbox.options.length; i++) {
arrLookup[tbox.options[i].text] = tbox.options[i].value;
arrTbox[i] = tbox.options[i].text;
}
var fLength = 0;
var tLength = arrTbox.length
for(i=0; i<fbox.options.length; i++) {
arrLookup[fbox.options[i].text] = fbox.options[i].value;
if(fbox.options[i].selected && fbox.options[i].value != "") {
arrTbox[tLength] = fbox.options[i].text;
tLength++;
} else {
arrFbox[fLength] = fbox.options[i].text;
fLength++;
}
}
arrFbox.sort();
arrTbox.sort();
fbox.length = 0;
tbox.length = 0;
var c;
for(c=0; c<arrFbox.length; c++) {
var no = new Option();
no.value = arrLookup[arrFbox[c]];
no.text = arrFbox[c];
fbox[c] = no;
}
for(c=0; c<arrTbox.length; c++) {
var no = new Option();
no.value = arrLookup[arrTbox[c]];
no.text = arrTbox[c];
tbox[c] = no;
}
}

function selectAll(box) {
for(var i=0; i<box.length; i++) {
box[i].selected = true;
}
}

function concat_arr(arr) {
var ret_str = "";
var i;
for(i=0; i<arr.length; i++) {
if(i > 0) {
ret_str += ";";
}
ret_str += arr[i];
}
return ret_str;
}

var users = [

["01", "user01", "[email protected]"],
["02", "user02", "[email protected]"],
["03", "user03", "[email protected]"],
["04", "user04", "[email protected]"],
["05", "user05", "[email protected]"],
["06", "user06", "[email protected]"],
["07", "user07", "[email protected]"],
["08", "user08", "[email protected]"],
["09", "user09", "[email protected]"],
["10", "user10", "[email protected]"]
];

var emps = [];

var ops = document.theFORM.list1.options;
for( var i=0; i < ops.length; i++ ) {
if( ops[i].selected ) {
document.theFORM.list1.NewOption(ops[i].text);

for( var j=0; j < users.length; j++ ) {

if( ops[i].value == users[j][0] ) {
emps[emps.length] = users[j][2];
}
}
}

var old_users = document.theFORM.email.value;
if(old_users != "") {
old_users += ";";
}
document.theFORM.email.value = old_users + concat_arr(emps);
}

</SCRIPT>

</HEAD>
<BODY>
<CENTER>
<TABLE CELLPADDING="7" CELLSPACING="0" BORDER = "1" WIDTH="560" bgcolor="#F0F8FF">
<FORM NAME="theFORM">
<TABLE WIDTH="100%" CELLPADDING="0" CELLSPACING="0" BORDER="0">
<TR><TD width="28%">&nbsp;<p>
&nbsp;</TD>
<TD width="43%"><p align="center"><b>Recipient's E-Mail</b></p><p align="center"><input type="text" name="email" size="30"></TD>
<TD>&nbsp;</TD></TR></TABLE>

<TABLE WIDTH="44%" CELLPADDING="0" CELLSPACING="0" BORDER="0">
<TR><TD><TABLE WIDTH="92%" CELLPADDING="0" CELLSPACING="0" BORDER="0">
<TR><TD WIDTH="9%" height="18" align="center"></TD>
<TD WIDTH="15%" height="18" align="center"></TD></TR>

<TR><TD WIDTH="29%" height="18" align="center" bgColor=#eaefff>
<p align="center" bgColor=#eaefff><b>Selected Recipient(s)</b></TD>
<TD WIDTH="15%" height="18" align="center" bgColor=#eaefff></TD>
<TD WIDTH="38%" height="18" align="center" bgColor=#eaefff>
<b>Recipient List</b></FONT></TD></TR>
<TR>

<TD width="29%" valign="top"><p align="center"><SELECT NAME="list2" SIZE="9" MULTIPLE style="width: 187; height: 150"></SELECT></TD>

<TD width="15%"><TABLE CELLPADDING="0" CELLSPACING="0" ALIGN="center" BORDER="0" id="table1" width="58">
<TR><TD ALIGN="center" height="26"><INPUT TYPE="button" VALUE="&lt;&lt;" NAME="AddRecipient" onClick="move(this.form.list1,this.form.list2)"></TD></TR>
<TR><TD><p align="center"><INPUT TYPE="button" VALUE="&gt;&gt;" NAME="RemoveRecipient" onClick="move(this.form.list2,this.form.list1)" ></TD></TR></TABLE>

<TD width="38%"><p align="right"><SELECT NAME="list1" SIZE="9" MULTIPLE style="width: 187; height: 153">
<option value="01">user01</option>
<option value="02">user02</option>
<option value="03">user03</option>
<option value="04">user04</option>
<option value="05">user05</option>
<option value="06">user06</option>
<option value="07">user07</option>
<option value="08">user08</option>
<option value="09">user09</option>
<option value="10">user10</option>
</SELECT></TABLE></TD></TR></CENTER></FORM>
</BODY>
</HTML>

any help would be appreciated. thank you.

shyam
Jul 22nd, 2005, 02:36 PM
function fillEmail() {
var selectedRecipients = document.theFORM.list2;
var txtContent = "";
for ( i = 0; i < selectedRecipients.length; i++ ) {
txtContent += selectedRecipients[i].value + ";";
}
document.theFORM.email.value = txtContent;
}

calling this function in each of these functions just before u return/exit should do the trick
DoAddRecipient()
DoClearRecipients()
DoRemoveRecipient()

but frankly i don't follow the logic u've employed here :S

shyam

Kor
Jul 22nd, 2005, 02:40 PM
if( ops[i].value == users[j][0] ) {

what is that ops[i] object? You have no i indent... shouldn't have been ops[j] ?

geoff2005
Jul 22nd, 2005, 03:38 PM
thanks for the reply guys! actually, im trying to implement this code:


<HTML>
<HEAD>
<TITLE>Address List</TITLE>

<!-- Load the javascript code -->
<script language="javascript">

/*==================================================*
$Id: filterlist.js,v 1.3 2003/10/08 17:13:49 pat Exp $
Copyright 2003 Patrick Fitzgerald
http://www.barelyfitz.com/webdesign/articles/filterlist/
*==================================================*/

function filterlist(selectobj) {

this.selectobj = selectobj;
this.flags = 'i';
this.match_text = true;
this.match_value = false;
this.show_debug = false;

this.init = function() {

if (!this.selectobj) return this.debug('selectobj not defined');
if (!this.selectobj.options) return this.debug('selectobj.options not defined');

this.optionscopy = new Array();
if (this.selectobj && this.selectobj.options) {
for (var i=0; i < this.selectobj.options.length; i++) {

this.optionscopy[i] = new Option();
this.optionscopy[i].text = selectobj.options[i].text;

if (selectobj.options[i].value) {
this.optionscopy[i].value = selectobj.options[i].value;
} else {
this.optionscopy[i].value = selectobj.options[i].text;
}

}
}
}

this.reset = function() {

this.set('');
}

this.set = function(pattern) {

var loop=0, index=0, regexp, e;

if (!this.selectobj) return this.debug('selectobj not defined');
if (!this.selectobj.options) return this.debug('selectobj.options not defined');

this.selectobj.options.length = 0;

try {

regexp = new RegExp(pattern, this.flags);

} catch(e) {

if (typeof this.hook == 'function') {
this.hook();
}

return;
}

for (loop=0; loop < this.optionscopy.length; loop++) {

var option = this.optionscopy[loop];

if ((this.match_text && regexp.test(option.text)) ||
(this.match_value && regexp.test(option.value))) {

this.selectobj.options[index++] =
new Option(option.text, option.value, false);

}
}

if (typeof this.hook == 'function') {
this.hook();
}

}

this.set_ignore_case = function(value) {

if (value) {
this.flags = 'i';
} else {
this.flags = '';
}
}

this.debug = function(msg) {
if (this.show_debug) {
alert('FilterList: ' + msg);
}
}

this.init();
}

function concat_arr(arr) {
var ret_str = "";
var i;
for(i=0; i<arr.length; i++) {
if(i > 0) {
ret_str += ";";
}
ret_str += arr[i];
}
return ret_str;
}

function SendInfo(){

var employees = [
[1, "amanda", "[email protected]"],
[2, "blake", "[email protected]"],
[3, "cynthia", "[email protected]"],
[4, "dave", "[email protected]"],
[5, "david", "[email protected]"],
[6, "john", "[email protected]"],
[7, "josephine", "[email protected]"],
[8, "laura", "laura[email protected]"],
[9, "mathew", "[email protected]"],
[10, "peter", "[email protected]"]
];

var emps = [];
var ops = document.usersform.usersselect.options;
for( var i=0; i < ops.length; i++ ) {
if( ops[i].selected ) {
for( var j=0; j < employees.length; j++ ) {
if( ops[i].value == employees[j][0] ) {
window.opener.NewOption(employees[j][2], employees[j][0]);
emps[emps.length] = employees[j][2];
}
}
}
}
if( emps.length == 0 ) {
alert("error");
} else {
window.opener.document.form.emailbox.value = emps.join(";");
}
}
</SCRIPT>

</HEAD>
<BODY>
<FORM NAME="usersform">
<div align="center">
<table class=rowtable cellpadding="10" cellspacing="1" border="0" width="470">
<TR class=row1 valign=top>
<TH>Users</TH>
<TH>Filter</TH>
</TR>
<TR VALIGN="top">
<TD class=row1 STYLE="width:175px">
<DIV ID="filtertext">&nbsp;</DIV>
<SELECT MULTIPLE SIZE=6 NAME="usersselect" STYLE="width:173; height:96">
<option value="1">amanda</option>
<option value="2">blake</option>
<option value="3">cynthia</option>
<option value="4">dave</option>
<option value="5">david</option>
<option value="6">john</option>
<option value="7">josephine</option>
<option value="8">laura</option>
<option value="9">mathew</option>
<option value="10">peter</option>
</SELECT></p>
<BR>
<INPUT TYPE=submit VALUE="Enter" onclick="SendInfo()">
<TD class=row2>

<SCRIPT TYPE="text/javascript">
<!--
var filter = new filterlist(document.usersform.usersselect);

filter.hook = function() {

if (this.selectobj.options.length) {
this.selectobj.options[0].selected = true;
}

if (document.getElementById) {
var id = document.getElementById("filtertext");
if (typeof id.innerHTML != 'undefined') {
if (this.selectobj.length == this.optionscopy.length) {
id.innerHTML = "&nbsp;";
} else {
id.innerHTML = "Showing " +
this.selectobj.length + " of " +
this.optionscopy.length + " records";

}
}
}
}

function dofilter(regexp) {
document.usersform.regexp.value = regexp;
filter.set(regexp);
}
//-->
</SCRIPT>

<P STYLE="width:200px">
Show users:
<A HREF="javascript:dofilter('')" TITLE="Show all items">All</A><BR>
<A HREF="javascript:dofilter('^A')" TITLE="Show items starting with A">A</A>
<A HREF="javascript:dofilter('^B')" TITLE="Show items starting with B">B</A>
<A HREF="javascript:dofilter('^C')" TITLE="Show items starting with C">C</A>
<A HREF="javascript:dofilter('^D')" TITLE="Show items starting with D">D</A>
<A HREF="javascript:dofilter('^E')" TITLE="Show items starting with E">E</A>
<A HREF="javascript:dofilter('^F')" TITLE="Show items starting with F">F</A>
<A HREF="javascript:dofilter('^G')" TITLE="Show items starting with G">G</A>
<A HREF="javascript:dofilter('^H')" TITLE="Show items starting with H">H</A>
<A HREF="javascript:dofilter('^I')" TITLE="Show items starting with I">I</A>
<A HREF="javascript:dofilter('^J')" TITLE="Show items starting with J">J</A>
<A HREF="javascript:dofilter('^K')" TITLE="Show items starting with K">K</A>
<A HREF="javascript:dofilter('^L')" TITLE="Show items starting with L">L</A>
<A HREF="javascript:dofilter('^M')" TITLE="Show items starting with M">M</A>
<A HREF="javascript:dofilter('^N')" TITLE="Show items starting with N">N</A>
<A HREF="javascript:dofilter('^O')" TITLE="Show items starting with O">O</A>
<A HREF="javascript:dofilter('^P')" TITLE="Show items starting with P">P</A>
<A HREF="javascript:dofilter('^Q')" TITLE="Show items starting with Q">Q</A>
<A HREF="javascript:dofilter('^R')" TITLE="Show items starting with R">R</A>
<A HREF="javascript:dofilter('^S')" TITLE="Show items starting with S">S</A>
<A HREF="javascript:dofilter('^T')" TITLE="Show items starting with T">T</A>
<A HREF="javascript:dofilter('^U')" TITLE="Show items starting with U">U</A>
<A HREF="javascript:dofilter('^V')" TITLE="Show items starting with V">V</A>
<A HREF="javascript:dofilter('^W')" TITLE="Show items starting with W">W</A>
<A HREF="javascript:dofilter('^X')" TITLE="Show items starting with X">X</A>
<A HREF="javascript:dofilter('^Y')" TITLE="Show items starting with Y">Y</A>
<A HREF="javascript:dofilter('^Z')" TITLE="Show items starting with Z">Z</A>

<P>Filter by regular expression:<BR>
<INPUT NAME=regexp onKeyUp="filter.set(this.form.regexp.value)">
<INPUT TYPE=button onClick="filter.set(this.form.regexp.value)" value="Filter">
<INPUT TYPE=button onClick="filter.reset();this.form.regexp.value=''" value="Clear">

<P>
<INPUT TYPE=checkbox NAME="toLowerCase"onClick="filter.set_ignore_case(!this.checked);filter.set(this.form.regexp.value);">
Case-sensitive filtering

</TD>
</TR>
</TABLE>

</div>

</FORM>
</BODY>
</HTML>

i found it somewhere on the net, and it does insert the email address from child window to parent window textbox, for example if i passed the value 'dave', his email wll be inserted as follows:
[email protected]

and if i paseed two values, for example 'dave' and laura' it will be inserted as follows:
[email protected]; [email protected]

geoff2005
Jul 23rd, 2005, 06:50 AM
.....