Version: 1.1
Type: Sample Code (HOWTO)
Category: HTML
License: GNU General Public License
Description: When a value in a drop-down box is changed, a window will open showing the user the selection. Useful for showing the effect of a selection before the form submits data to the database.
<head>
<script language="JavaScript">
//this finds the value currently selected in the drop-down box
function processFormE1(form) {
var titlebgcolorChoice = form1.titlebgcolor.options[document.form1.titlebgcolor.selectedIndex].value;
//processes the string to be inserted in the url because of special characters like #
titlebgcolorChoice = escape(titlebgcolorChoice);
//constructs the url by adding the variable to the page string
var goTo = "preview.php3" + "?titlebgcolorChoice=" + titlebgcolorChoice;
//opens the constructed url in a new browser window
window.open(goTo);
}
</script>
</head>
<body>
<form name="form1" method="post" action="adtemplate.php3">
<table width="90%" border="1" cellpadding="0" bordercolor="#000000">
<tr>
<td width="27%" height="48"><font face="Arial, Helvetica, sans-serif" size="2">Choose
Background Color</font></td>
<td width="73%" height="48">
<select name="titlebgcolor" size="1" onChange="processFormE1(this.form);">
<option value="#000000">Black</option>
<option value="#FFFFFF">White</option>
<option value="#CC3333">Red</option>
<option value="#993333">Deep Red</option>
<option value="#CC99CC" selected>Light Purple</option>
<option value="#996699">Purple</option>
<option value="#663366">Deep Purple</option>
<option value="#FF00CC">Light Pink</option>
<option value="#CC0099">Pink</option>
<option value="#990066">Deep Pink</option>
<option value="#0066CC">Light Blue</option>
<option value="#003399">Blue</option>
<option value="#003366">Deep Blue</option>
<option value="#00CC66">Light Green</option>
<option value="#009966">Green</option>
<option value="#006633">Deep Green</option>
<option value="#FFFF99">Light Yellow</option>
<option value="#FFFF66">Yellow</option>
<option value="#FFFF33">Deep Yellow</option>
</select>
</td>
</tr>
</table>
Then a new file called preview.php3:
<body>
<?php
if ($titlebgcolorChoice)
{
echo "<table width='50'><tr><td bgcolor='$titlebgcolorChoice'> </td></tr></table>";
}
else
{
echo "Error";
}
?>
</body>
you can use this with multiple form elements and use an elseif statement in preview.php3 to print the other possible variables that may be passed by the javascript functions.
