atombomb
07-28-2006, 03:38 AM
Hi All,
I got the following script working beautifully, apart from one small challenge :confused:
It is for a poster printing website where the customer uploads their digital picture, selects the paper type and size, and clicks submit and the paper type and size are sent via the HTML form in a POST variable.
The problem is this, the script below works and changes to the drop down correctly, but when I click submit, it doesn't pass the list items across for reading ?
I can't work it out, it's almost like the list box is being changed, but not updating the HTML list item someone so it can be passed across ?
Any pointers appreciated, as I've aged 20 years trying to work this out :rolleyes:
Best Regards,
Paul
Code below ----------------------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script language="javascript">
// This function goes through the options for the given
// drop down box and removes them in preparation for
// a new set of values
function emptyList( box ) {
// Set each option to null thus removing it
while ( box.options.length ) box.options[0] = null;
}
// This function assigns new drop down options to the given
// drop down box from the list of lists specified
function fillList( box, arr ) {
// arr[0] holds the display text
// arr[1] are the values
for ( i = 0; i < arr[0].length; i++ ) {
// Create a new drop down option with the
// display text and value from arr
option = new Option( arr[0][i], arr[1][i] );
// Add to the end of the existing options
box.options[box.length] = option;
}
// Preselect option 0
box.selectedIndex=0;
}
// This function performs a drop down list option change by first
// emptying the existing option list and then assigning a new set
function changeList( box ) {
// Isolate the appropriate list by using the value
// of the currently selected option
list = lists[box.options[box.selectedIndex].value];
// Next empty the slave list
emptyList( box.form.slave );
// Then assign the new list values
fillList( box.form.slave, list );
}
</script>
</head>
<body onload="changeList(document.forms['drops'].master)">
<script language="javascript">
var lists = new Array();
// First set of text and values
lists['papermatt'] = new Array();
lists['papermatt'][0] = new Array(
'A3 Size - £6.00',
'A2 Size - £12.00',
'A1 Size - £20.00',
'A0 Size - £29.00',
'16x12 Inches (410mm x 300mm) - £8.00',
'20x16 Inches (500mm x 410mm) - £9.00',
'24x20 Inches (610mm x 500mm) - £11.00',
'28x39 Inches (700mm x 1000mm) - £18.00',
'30x20 Inches (750mm x 500mm) - £17.00',
'36x24 Inches (914mm x 610mm) - £18.00',
'40x30 Inches (1016mm x 762mm) - £35.00',
'48x36 Inches (1220mm x 914mm) - £38.00',
'72x36 Inches (1828mm x 914mm) - £55.00'
);
lists['papermatt'][1] = new Array(
'Paper Matt'
);
// Second set of text and values
lists['canvas'] = new Array();
lists['canvas'][0] = new Array(
'A3 Size - £36.00',
'A2 Size - £42.00',
'A1 Size - £60.00',
'A0 Size - £80.00',
'16x12 Inches (410mm x 300mm) - £35.00',
'20x16 Inches (500mm x 410mm) - £43.00',
'24x20 Inches (610mm x 500mm) - £54.00',
'28x39 Inches (700mm x 1000mm) - £68.00',
'30x20 Inches (750mm x 500mm) - £57.00',
'36x24 Inches (914mm x 610mm) - £68.00',
'40x30 Inches (1016mm x 762mm) - £75.00',
'48x36 Inches (1220mm x 914mm) - £88.00',
'72x36 Inches (1828mm x 914mm) - £155.00'
);
lists['canvas'][1] = new Array(
'Canvas'
);
lists['photosatin'] = new Array();
lists['photosatin'][0] = new Array(
'A3 Size - £6.00',
'A2 Size - £12.00',
'A1 Size - £20.00',
'A0 Size - £29.00',
'16x12 Inches (410mm x 300mm) - £8.00',
'20x16 Inches (500mm x 410mm) - £9.00',
'24x20 Inches (610mm x 500mm) - £11.00',
'28x39 Inches (700mm x 1000mm) - £18.00',
'30x20 Inches (750mm x 500mm) - £17.00',
'36x24 Inches (914mm x 610mm) - £18.00',
'40x30 Inches (1016mm x 762mm) - £35.00',
'48x36 Inches (1220mm x 914mm) - £38.00',
'72x36 Inches (1828mm x 914mm) - £55.00'
);
lists['photosatin'][1] = new Array(
'Photo Satin'
);
lists['photogloss'] = new Array();
lists['photogloss'][0] = new Array(
'A3 Size - £6.00',
'A2 Size - £12.00',
'A1 Size - £20.00',
'A0 Size - £29.00',
'16x12 Inches (410mm x 300mm) - £8.00',
'20x16 Inches (500mm x 410mm) - £9.00',
'24x20 Inches (610mm x 500mm) - £11.00',
'28x39 Inches (700mm x 1000mm) - £18.00',
'30x20 Inches (750mm x 500mm) - £17.00',
'36x24 Inches (914mm x 610mm) - £18.00',
'40x30 Inches (1016mm x 762mm) - £35.00',
'48x36 Inches (1220mm x 914mm) - £38.00',
'72x36 Inches (1828mm x 914mm) - £55.00'
);
lists['photogloss'][1] = new Array(
'Photo Satin'
);
</script>
<form name="drops" method="get" action="test2.php">
<table border=0 bgcolor="#ffeecc">
<tr>
<td>Select a list</td>
<td><select name="master" size=1 onchange="changeList(this)">
<option value="papermatt">Paper Matt 170gsm
<option value="photosatin">Photosatin 210gsm
<option value="photogloss">Photogloss 210gsm
<option value="canvas">Canvas
</select>
</td>
</tr>
<tr>
<td>Now a specific value</td>
<td>
<select name="slave" size=1>
<option>Please Select Option</option>
</select>
</td>
</tr>
</table>
<input type="submit" name="Submit" value="Submit" />
</form>
</body>
</html>
I got the following script working beautifully, apart from one small challenge :confused:
It is for a poster printing website where the customer uploads their digital picture, selects the paper type and size, and clicks submit and the paper type and size are sent via the HTML form in a POST variable.
The problem is this, the script below works and changes to the drop down correctly, but when I click submit, it doesn't pass the list items across for reading ?
I can't work it out, it's almost like the list box is being changed, but not updating the HTML list item someone so it can be passed across ?
Any pointers appreciated, as I've aged 20 years trying to work this out :rolleyes:
Best Regards,
Paul
Code below ----------------------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script language="javascript">
// This function goes through the options for the given
// drop down box and removes them in preparation for
// a new set of values
function emptyList( box ) {
// Set each option to null thus removing it
while ( box.options.length ) box.options[0] = null;
}
// This function assigns new drop down options to the given
// drop down box from the list of lists specified
function fillList( box, arr ) {
// arr[0] holds the display text
// arr[1] are the values
for ( i = 0; i < arr[0].length; i++ ) {
// Create a new drop down option with the
// display text and value from arr
option = new Option( arr[0][i], arr[1][i] );
// Add to the end of the existing options
box.options[box.length] = option;
}
// Preselect option 0
box.selectedIndex=0;
}
// This function performs a drop down list option change by first
// emptying the existing option list and then assigning a new set
function changeList( box ) {
// Isolate the appropriate list by using the value
// of the currently selected option
list = lists[box.options[box.selectedIndex].value];
// Next empty the slave list
emptyList( box.form.slave );
// Then assign the new list values
fillList( box.form.slave, list );
}
</script>
</head>
<body onload="changeList(document.forms['drops'].master)">
<script language="javascript">
var lists = new Array();
// First set of text and values
lists['papermatt'] = new Array();
lists['papermatt'][0] = new Array(
'A3 Size - £6.00',
'A2 Size - £12.00',
'A1 Size - £20.00',
'A0 Size - £29.00',
'16x12 Inches (410mm x 300mm) - £8.00',
'20x16 Inches (500mm x 410mm) - £9.00',
'24x20 Inches (610mm x 500mm) - £11.00',
'28x39 Inches (700mm x 1000mm) - £18.00',
'30x20 Inches (750mm x 500mm) - £17.00',
'36x24 Inches (914mm x 610mm) - £18.00',
'40x30 Inches (1016mm x 762mm) - £35.00',
'48x36 Inches (1220mm x 914mm) - £38.00',
'72x36 Inches (1828mm x 914mm) - £55.00'
);
lists['papermatt'][1] = new Array(
'Paper Matt'
);
// Second set of text and values
lists['canvas'] = new Array();
lists['canvas'][0] = new Array(
'A3 Size - £36.00',
'A2 Size - £42.00',
'A1 Size - £60.00',
'A0 Size - £80.00',
'16x12 Inches (410mm x 300mm) - £35.00',
'20x16 Inches (500mm x 410mm) - £43.00',
'24x20 Inches (610mm x 500mm) - £54.00',
'28x39 Inches (700mm x 1000mm) - £68.00',
'30x20 Inches (750mm x 500mm) - £57.00',
'36x24 Inches (914mm x 610mm) - £68.00',
'40x30 Inches (1016mm x 762mm) - £75.00',
'48x36 Inches (1220mm x 914mm) - £88.00',
'72x36 Inches (1828mm x 914mm) - £155.00'
);
lists['canvas'][1] = new Array(
'Canvas'
);
lists['photosatin'] = new Array();
lists['photosatin'][0] = new Array(
'A3 Size - £6.00',
'A2 Size - £12.00',
'A1 Size - £20.00',
'A0 Size - £29.00',
'16x12 Inches (410mm x 300mm) - £8.00',
'20x16 Inches (500mm x 410mm) - £9.00',
'24x20 Inches (610mm x 500mm) - £11.00',
'28x39 Inches (700mm x 1000mm) - £18.00',
'30x20 Inches (750mm x 500mm) - £17.00',
'36x24 Inches (914mm x 610mm) - £18.00',
'40x30 Inches (1016mm x 762mm) - £35.00',
'48x36 Inches (1220mm x 914mm) - £38.00',
'72x36 Inches (1828mm x 914mm) - £55.00'
);
lists['photosatin'][1] = new Array(
'Photo Satin'
);
lists['photogloss'] = new Array();
lists['photogloss'][0] = new Array(
'A3 Size - £6.00',
'A2 Size - £12.00',
'A1 Size - £20.00',
'A0 Size - £29.00',
'16x12 Inches (410mm x 300mm) - £8.00',
'20x16 Inches (500mm x 410mm) - £9.00',
'24x20 Inches (610mm x 500mm) - £11.00',
'28x39 Inches (700mm x 1000mm) - £18.00',
'30x20 Inches (750mm x 500mm) - £17.00',
'36x24 Inches (914mm x 610mm) - £18.00',
'40x30 Inches (1016mm x 762mm) - £35.00',
'48x36 Inches (1220mm x 914mm) - £38.00',
'72x36 Inches (1828mm x 914mm) - £55.00'
);
lists['photogloss'][1] = new Array(
'Photo Satin'
);
</script>
<form name="drops" method="get" action="test2.php">
<table border=0 bgcolor="#ffeecc">
<tr>
<td>Select a list</td>
<td><select name="master" size=1 onchange="changeList(this)">
<option value="papermatt">Paper Matt 170gsm
<option value="photosatin">Photosatin 210gsm
<option value="photogloss">Photogloss 210gsm
<option value="canvas">Canvas
</select>
</td>
</tr>
<tr>
<td>Now a specific value</td>
<td>
<select name="slave" size=1>
<option>Please Select Option</option>
</select>
</td>
</tr>
</table>
<input type="submit" name="Submit" value="Submit" />
</form>
</body>
</html>