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'>&nbsp;</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.