PHPBuilder - Using Javascript and php to preview form selections

RSS Twitter

Using Javascript and php to preview form selections

by: Jenny Knowles
March 15, 2001

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.

<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;


<form name="form1" method="post" action="adtemplate.php3">
  <table width="90%" border="1" cellpadding="0" bordercolor="#000000">
<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>

Then a new file called preview.php3: 

if ($titlebgcolorChoice)
echo "<table width='50'><tr><td bgcolor='$titlebgcolorChoice'>&nbsp;</td></tr></table>";
echo "Error";

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. 

Comment and Contribute

Your comment has been submitted and is pending approval.

Jenny Knowles



(Maximum characters: 1200). You have characters left.