...

View Full Version : Dynamic forms help



Carbine
08-30-2006, 07:14 PM
I've got this script to automatically update the values in a <select> field. I didn't write the script myself so I do not know how to go about making it so I can have more than one of them on my site. Here is what I currently have:

In head:

<script type="text/javascript">
var store = new Array();

store[0] = new Array(
'1 (Screen Print)',
'1',
'2 (Spot Color)',
'2',
'3 (Spot Color)',
'3',
'4 (Spot Color)',
'4');

store[1] = new Array(
'1 (Screen Print)',
'1',
'2 (Spot Color)',
'2',
'3 (Spot Color)',
'3');

store[2] = new Array(
'1 (Screen Print)',
'1');

function init()
{
optionTest = true;
lgth = document.forms['form1'].colors.options.length - 0;
document.forms['form1'].colors.options[lgth] = null;
if (document.forms['form1'].colors.options[lgth]) optionTest = false;
}


function populate()
{
if (!optionTest) return;
var box = document.forms['form1'].location;
var number = box.options[box.selectedIndex].value;
if (!number) return;
var list = store[number];
var box2 = document.forms['form1'].colors;
box2.options.length = 0;
for(i=0;i<list.length;i+=2)
{
box2.options[i/2] = new Option(list[i],list[i+1]);
}
}
</script>

In body tag:

onLoad="init()"

In body:

<form method='post' name='form1' action='<? echo $_SERVER['PHP_SELF']; ?>' >
<input type='hidden' name='size' value='<? echo $size; ?>' />
<input type='hidden' name='submitted' value='1' />
<table>
<tr>
<td>Cup Size:</td>
<td>
<select name='size' onchange='populate2()'>
<option value='0' selected>12oz.</option>
<option value='1'>16oz.</option>
<option value='2'>22oz.</option>
<option value='3'>32oz.</option>
</select>
</td>
</tr>
<tr>
<td>Cup Style:</td>
<td>
<select name='style'>
<option value='0' selected>Smooth</option>
<option value='1'>Fluted</option>
</select>
</td>
</tr>
<tr>
<td>QTY:</td><td><input type='text' name='number' /></td>
</tr>
<tr>
<td>Printing Locations:</td>
<td>
<select name='location' width='200' onchange='populate()'>
<option value='0' selected>1 Side Printing</option>
<option value='1'>2 Sided Printing</option>
<option value='2'>Wrap Printing</option>
</select>
</td>
</tr>
<tr>
<td>Colors:</td>
<td>
<select name='colors'>
<option value='1'>1 (Screen Print)</option>
<option value='2'>2 (Spot Color)</option>
<option value='3'>3 (Spot Color)</option>
<option value='4'>4 (Spot Color)</option>
</select>
</td>
</tr>
</table>
<input type='submit' value='Get Free Quote!' />
</form>
I've gotten the 'location' field to update the 'colors' field, now I wish to get the 'size' field to update the 'style' field.. Could someone help me out with this?

vwphillips
08-30-2006, 07:54 PM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>
<title></title>
<script type="text/javascript">
var store = new Array();

store[0] = new Array('1 (Screen Print)','1','2 (Spot Color)','2','3 (Spot Color)','3','4 (Spot Color)', '4');

store[1] = new Array('1 (Screen Print)','1','2 (Spot Color)','2','3 (Spot Color)','3');

store[2] = new Array('1 (Screen Print)','1');

var styleary = new Array();

styleary[0] = new Array('1 (Size Print)','1','2 (Size Color)','2','3 (Size Color)','3','4 (Size Color)', '4');

styleary[1] = new Array('1 (Size Print)','1','2 (Size Color)','2','3 (Size Color)','3');

styleary[2] = new Array('1 (Size Print)','1');

styleary[3] = new Array('1 (Size Print)','1');

function init(){
optionTest = true;
lgth = document.forms['form1'].colors.options.length - 0;
document.forms['form1'].colors.options[lgth] = null;
if (document.forms['form1'].colors.options[lgth]){ optionTest = false; }
}


function populate(obj,ary,sel){
if (!optionTest) return;
var number = obj.value;
var list = ary[number];
var obj2 = obj.form[sel];
obj2.options.length = 0;
for(i=0;i<list.length;i+=2) {
obj2.options[i/2] = new Option(list[i],list[i+1],true,true);
}
}
</script></head>

<body onLoad="init()">

<form method='post' name='form1' >
<input type='hidden' name='size' />
<input type='hidden' name='submitted' value='1' />
<table>
<tr>
<td>Cup Size:</td>
<td>
<select name='size' onchange="populate(this,styleary,'style');">
<option value='0' selected>12oz.</option>
<option value='1'>16oz.</option>
<option value='2'>22oz.</option>
<option value='3'>32oz.</option>
</select>
</td>
</tr>
<tr>
<td>Cup Style:</td>
<td>
<select name='style'>
<option value='0' selected>Smooth</option>
<option value='1'>Fluted</option>
</select>
</td>
</tr>
<tr>
<td>QTY:</td><td><input type='text' name='number' /></td>
</tr>
<tr>
<td>Printing Locations:</td>
<td>
<select name='location' width='200' onchange="populate(this,store,'colors')">
<option value='0' selected>1 Side Printing</option>
<option value='1'>2 Sided Printing</option>
<option value='2'>Wrap Printing</option>
</select>
</td>
</tr>
<tr>
<td>Colors:</td>
<td>
<select name='colors'>
<option value='1'>1 (Screen Print)</option>
<option value='2'>2 (Spot Color)</option>
<option value='3'>3 (Spot Color)</option>
<option value='4'>4 (Spot Color)</option>
</select>
</td>
</tr>
</table>
<input type='submit' value='Get Free Quote!' />
</form></body>

</html>

Carbine
08-30-2006, 08:03 PM
This works wonderfully. Thanks much!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum