PDA

View Full Version : Forms through Java arrays

j-man
10-30-2002, 07:36 PM
I have three form drop-down menus which the choices in the first and second are dependent on the selection made in the previous menu, The problem lies when the form is submited, it actually returns the array positions instead of the choices in the menu.

Here a sample of my code

<html>
<head>
<SCRIPT LANGUAGE="JavaScript">

<!-- Begin

var arrItems1 = new Array();

var arrItemsGrp1 = new Array();

arrItems1[3] = "Bubble Jet";
arrItemsGrp1[3] = 1;
arrItems1[4] = "Laser";
arrItemsGrp1[4] = 1;
arrItems1[5] = "Dot Matrix";
arrItemsGrp1[5] = 1;

arrItems1[6] = "Stylus Inkjet";
arrItemsGrp1[6] = 2;
arrItems1[7] = "Stylus Laser";
arrItemsGrp1[7] = 2;

arrItems1[0] = "Desk Jet";
arrItemsGrp1[0] = 3;
arrItems1[1] = "Laser Jet";
arrItemsGrp1[1] = 3;
arrItems1[2] = "Dot Matrix";
arrItemsGrp1[2] = 3;

arrItems1[8] = "All-In-One";
arrItemsGrp1[8] = 4;
arrItems1[9] = "Color InkJet";
arrItemsGrp1[9] = 4;

var arrItems2 = new Array();
var arrItemsGrp2 = new Array();

arrItems2[400] = "Desk Jet";
arrItemsGrp2[400] = 0
arrItems2[401] = "Desk Jet/Plus";
arrItemsGrp2[401] = 0
arrItems2[402] = "Portable";
arrItemsGrp2[402] = 0
arrItems2[403] = "310/320/340";
arrItemsGrp2[403] = 0
arrItems2[404] = "340/CBI";
arrItemsGrp2[404] = 0
arrItems2[405] = "340CM/340CV";
arrItemsGrp2[405] = 0
arrItems2[406] = "350C/350CBI";
arrItemsGrp2[406] = 0
arrItems2[407] = "400/400L/420C";
arrItemsGrp2[407] = 0
arrItems2[408] = "500/500C";
arrItemsGrp2[408] = 0
arrItems2[409] = "510/520";
arrItemsGrp2[409] = 0
arrItems2[410] = "540"
arrItemsGrp2[410] = 0

arrItems2[31] = " ";
arrItemsGrp2[31] = 1
arrItems2[34] = " ";
arrItemsGrp2[34] = 1

arrItems2[35] = " ";
arrItemsGrp2[35] = 2

arrItems2[99] = " ";
arrItemsGrp2[99] = 5
arrItems2[100] = " ";
arrItemsGrp2[100] = 5
arrItems2[57] = " ";
arrItemsGrp2[57] = 5

arrItems2[ 101] = "BJ-5";
arrItemsGrp2[101] = 3
arrItems2[102] = "BJ-10/10e/10ex";
arrItemsGrp2[102] = 3
arrItems2[112] = "BJ-10SX"
arrItemsGrp2[112] = 3
arrItems2[113] = "BJ-20"
arrItemsGrp2[113] = 3
arrItems2[114] = "BJ-30"
arrItemsGrp2[114] = 3
arrItems2[115] = "BJ-100"
arrItemsGrp2[115] = 3
arrItems2[116] = "BJ-130/130e"
arrItemsGrp2[116] = 3
arrItems2[117] = "BJ-200"
arrItemsGrp2[117] = 3
arrItems2[118] = "BJ-200e"
arrItemsGrp2[118] = 3
arrItems2[119] = "BJ-200ex"
arrItemsGrp2[119] = 3
arrItems2[120] = "BJ-230"
arrItemsGrp2[120] = 3
arrItems2[121] = "BJ-300"
arrItemsGrp2[121] = 3
arrItems2[122] = "BJ-330"
arrItemsGrp2[122] = 3

arrItems2[103] = " ";
arrItemsGrp2[103] = 4
arrItems2[104] = " ";
arrItemsGrp2[104] = 4

arrItems2[105] = " ";
arrItemsGrp2[105] = 6
arrItems2[106] = " ";
arrItemsGrp2[106] = 6

arrItems2[200] = " ";
arrItemsGrp2[200] = 7
arrItems2[201] = " ";
arrItemsGrp2[201] = 7
arrItems2[203] = " ";
arrItemsGrp2[203] = 7

arrItems2[300] = "A900";
arrItemsGrp2[300] = 8
arrItems2[301] = "A1000";
arrItemsGrp2[301] = 8
arrItems2[302] = "A1500";
arrItemsGrp2[302] = 8
arrItems2[303] = "A3000";
arrItemsGrp2[303] = 8
arrItems2[304] = "A4000";
arrItemsGrp2[304] = 8

arrItems2[310] = "1400P";
arrItemsGrp2[310] = 9
arrItems2[311] = "IJ200";
arrItemsGrp2[311] = 9
arrItems2[312] = "IJ300";
arrItemsGrp2[312] = 9
arrItems2[313] = "IJ600";
arrItemsGrp2[313] = 9
arrItems2[314] = "IJ650";
arrItemsGrp2[314] = 9
arrItems2[315] = "IJ700";
arrItemsGrp2[315] = 9
arrItems2[316] = "IJ750";
arrItemsGrp2[316] = 9
arrItems2[317] = "IJ900";
arrItemsGrp2[317] = 9
arrItems2[318] = "IJ1200";
arrItemsGrp2[318] = 9


function selectChange(control, controlToPopulate, ItemArray, GroupArray)
{
var myEle ;
var x ;
// Empty the second drop down box of any choices
for (var q=controlToPopulate.options.length;q>=0;q--) controlToPopulate.options[q]=null;
if (control.name == "firstChoice") {
// Empty the third drop down box of any choices
for (var q=myChoices.thirdChoice.options.length;q>=0;q--) myChoices.thirdChoice.options[q] = null;
}
// ADD Default Choice - in case there are no values
myEle = document.createElement("option") ;
myEle.value = 0 ;
myEle.text = "[Select Printer]" ;
controlToPopulate.add(myEle) ;
// Now loop through the array of individual items
// Any containing the same child id are added to
// the second dropdown box
for ( x = 0 ; x < ItemArray.length ; x++ )
{
if ( GroupArray[x] == control.value )
{
myEle = document.createElement("option") ;
myEle.value = x ;
myEle.text = ItemArray[x] ;
controlToPopulate.add(myEle) ;
}
}
}
// End -->
</script>
</head>

<body>

<form name=myChoices target="_self" action="--WEBBOT-SELF--" method="POST">
<!--webbot bot="SaveResults" startspan U-File="PlaceOrder" S-Format="HTML/BR"
S-Label-Fields="TRUE" B-Reverse-Chronology="FALSE" S-Email-Format="TEXT/PRE"
S-Email-Address="j4h2e@hotmail.com" B-Email-Label-Fields="TRUE"
S-Date-Format="%A, %B %d, %Y" S-Time-Format="%I:%M:%S %p"
S-Builtin-Fields="Date Time" --><input TYPE="hidden" NAME="VTI-GROUP" VALUE="0"><!--webbot
bot="SaveResults" endspan -->

<SELECT id=firstChoice name=firstChoice onchange="selectChange(this, myChoices.secondChoice, arrItems1, arrItemsGrp1);" size="1">
<option value=0 SELECTED>[Select Printer]</option>
<option value=1>Canon</option>
<option value="4">Compaq</option>
<option value=2>Epson</option>
<option value=3>Hewlett Packard</option>
<option>Sony</option>
<option>Xerox</option>
<option>Lexmark</option>
<option>NEC</option>
<option>Texas Instruments</option>
<option>AMT</option>
<option>Brother</option>
</SELECT>
</font>
</b>
</TD><TD width="156" align="center">
<b>
<font face="Times New Roman" size="2" color="#000099">
Select Printer Type&nbsp;<br>
<SELECT id=secondChoice name=secondChoice onchange="selectChange(this, myChoices.thirdChoice, arrItems2, arrItemsGrp2);">
</SELECT>
</font>
</b>
</TD>
<TD width="139" align="center">
<b>
<font face="Times New Roman" size="2" color="#000099">
Select Printer Model<br>
<SELECT id=thirdChoice name=thirdChoice>
</SELECT>
</font>
</b>
</TD>
<TD width="72" align="center">
<font face="Times New Roman" size="2"><b>
<font color="#000099">Quantity</font></b><font color="#000099"><b><br>
<input type="text" name="Quantity" size="2"></b></font>
</font>
</TD>
</TR>
<tr>
<td width="550" align="center" colspan="4">
<font face="Times New Roman" size="2">
<img border="0" src="images/devider.jpg" width="540" height="5">
</font>
</TD>
</TR>
<tr>
<td width="550" align="center" colspan="4">
<font face="Times New Roman" size="2">
<input type="reset" value="Reset" name="B1"> <input type="submit" value="Submit" name="Submit Button">

</font>
</TD>
</TR>
</TABLE>
</form>

Can anyone help?
:thumbsup: :thumbsup:

Thanx
beetle
10-30-2002, 08:44 PM
Ok, so....you told us the problem, but not what you want. The purpose of SELECT objects in forms is so that they only send the option selected.
j-man
10-30-2002, 09:16 PM
Ok.......

When the form is submitted The problem is, it return the array position

(ex)

arrItems2[ 101] = "BJ-5";

would be submited as the # 101, I need it to be "BJ-5"
what can I do different to get it to return what is showing up
in the menu instead of the array position?

Am I making sence because I for one am confused?:confused:

J-man:rolleyes:

Thanks again and any suguestions on an simplified code will be appriciated.........
beetle
10-30-2002, 10:45 PM
Coz right here....myEle = document.createElement("option") ;
myEle.value = x ;
myEle.text = ItemArray[x] ;
controlToPopulate.add(myEle) ; See? The option receives x for it's value, and not ItemArray[x], which holds the "BJ-5" or whatever for that particular index.