Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Dec 2005
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Dynamic forms help

    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:
    Code:
    <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:
    Code:
    onLoad="init()"
    In body:
    Code:
    	<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?

  • #2
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,519
    Thanks
    3
    Thanked 507 Times in 494 Posts
    Code:
    <!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>
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #3
    New to the CF scene
    Join Date
    Dec 2005
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    This works wonderfully. Thanks much!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •