Forms

ZeroShade · February 24, 2007

I have a form with a select of thee options for "computer" and another select for three options for "speed". I have it written like this for example:

echo "<option value='c1'>", $pc, "</option>";

How can I say if the user clicks on one of the three options (lets say the first one), that in the second select the three options change to match that of the first selection?

Lulzim · February 24, 2007

It is better to do this using javascript, because values in second select box change without reloading the page.Since you requested in php forum, here is an example in php.

<html><body><form action='' method='get'>Computer: <select name='selectbox1' id='selectbox1' onchange="document.getElementById('selectbox2').selectedIndex='0';"><option value='c1'>Computer 1</option><option value='c2'>Computer 2</option><option value='c3'>Computer 3</option></select>    Speed: <select name='selectbox2' id='selectbox2'><?if (isset($_GET["selectbox1"])){	echo "<option value=''>Select speed</option>";	switch ($_GET["selectbox1"])	{		case 'c1':			echo "<option value='c1speed1'>C1 S1</option>";			echo "<option value='c1speed2'>C1 S2</option>";			echo "<option value='c1speed3'>C1 S3</option>";			break;		case 'c2':			echo "<option value='c2speed1'>C2 S1</option>";			echo "<option value='c2speed2'>C2 S2</option>";			echo "<option value='c2speed3'>C2 S3</option>";			break;		case 'c3':			echo "<option value='c3speed1'>C3 S1</option>";			echo "<option value='c3speed2'>C3 S2</option>";			echo "<option value='c3speed3'>C3 S3</option>";			break;	}}?></select>   <input type='submit' value='submit' ></form><br><?if (isset($_GET["selectbox1"]) && isset($_GET["selectbox2"]) && $_GET["selectbox2"]!=""){	echo "Computer: ".$_GET["selectbox1"]."<br>";	echo "Speed: ".$_GET["selectbox2"];}?></body></html>

ZeroShade · February 25, 2007

It is better to do this using javascript, because values in second select box change without reloading the page.Since you requested in php forum, here is an example in php.

<html><body><form action='' method='get'>Computer: <select name='selectbox1' id='selectbox1' onchange="document.getElementById('selectbox2').selectedIndex='0';"><option value='c1'>Computer 1</option><option value='c2'>Computer 2</option><option value='c3'>Computer 3</option></select>    Speed: <select name='selectbox2' id='selectbox2'><?if (isset($_GET["selectbox1"])){	echo "<option value=''>Select speed</option>";	switch ($_GET["selectbox1"])	{		case 'c1':			echo "<option value='c1speed1'>C1 S1</option>";			echo "<option value='c1speed2'>C1 S2</option>";			echo "<option value='c1speed3'>C1 S3</option>";			break;		case 'c2':			echo "<option value='c2speed1'>C2 S1</option>";			echo "<option value='c2speed2'>C2 S2</option>";			echo "<option value='c2speed3'>C2 S3</option>";			break;		case 'c3':			echo "<option value='c3speed1'>C3 S1</option>";			echo "<option value='c3speed2'>C3 S2</option>";			echo "<option value='c3speed3'>C3 S3</option>";			break;	}}?></select>   <input type='submit' value='submit' ></form><br><?if (isset($_GET["selectbox1"]) && isset($_GET["selectbox2"]) && $_GET["selectbox2"]!=""){	echo "Computer: ".$_GET["selectbox1"]."<br>";	echo "Speed: ".$_GET["selectbox2"];}?></body></html>

Thanks... this helps a lot. I prefer php over javascript... renders a lot faster!

ZeroShade · February 26, 2007

Hmm... I can't seem to get the information to appear in the second box. Any suggestions?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">		<head>				<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />				<title>CompuDeal</title>		</head>		<body>				<h1>CompuDeal</h1>				<p />Welcome to CompuDeal! Please fill out the form below to order a computer product. Our form is simple and fool proof to use.				<form action='mailto:martin.vanputten@gmail.com' method='POST'>						<p />Computer:						<select name="selectbox1" id="selectbox1" onchange="document.getElementById('selectbox2').selectedIndex='0'">								<option value='c1'>PC</option>								<option value='c2'>Notebook</option>								<option value='c3'>Workstation</option>						</select>						<p />Speed:						<select name='selectbox2' id='selectbox2'>								<?php										$a188 = 'AMD Athlon 1.88GHz';										$a200 = 'AMD Athlon 2.00GHz';										$t220 = 'AMD Turion 2.20GHz';										$o188 = 'AMD Opteron 1.88GHz';										$o200 = 'AMD Opteron 2.00GHz';										if (isset($_GET["selectbox1"]))										{												echo "<option value=''>Speed:</option>";												switch ($_GET["selectbox1"])												{														case 'c1':																echo "<option value='c1speed1'>", $a188, "</option>";																echo "<option value='c1speed2'>", $a200, "</option>";																echo "<option value='c1speed3'>", $t220, "</option>";														break;														case 'c2':																echo "<option value='c2speed1'>", $t220, "</option>";																echo "<option value='c2speed2'>", $o188, "</option>";																echo "<option value='c2speed3'>", $o200, "</option>";														break;														case 'c3':																echo "<option value='c3speed1'>", $t220, "</option>";																echo "<option value='c3speed2'>", $t220, "</option>";																echo "<option value='c3speed3'>", $t220, "</option>";														break;												}										}																				echo "<p />Memory:";										echo "<select name='memory'>";												echo "<option value='m1'>512MB</option>";												echo "<option value='m2'>1GB</option>";												echo "<option value='m3'>2GB</option>";										echo "</select>";										echo "<p />Space:";										echo "<select name='space'>";												echo "<option value='h1'>80GB</option>";												echo "<option value='h2'>160GB</option>";												echo "<option value='h3'>320GB</option>";										echo "</select>";										echo "<p />All computers are fully loaded and have NVIDIA 7900 GS 256MB graphic cards.";								?>						</select>				</form>		</body></html>

Lulzim · February 26, 2007

a <select> cannot contain another <select>, they can contain only <option>and in every form, there should be something to click in order to submit the data, usually a submit buttonhere is a good tutorial for html forms http://www.w3schools.com/html/html_forms.asphere is the same script, but this time with javascript

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">        <head>                <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />                <title>CompuDeal</title>								<script type='text/javascript'>				var speeds = new Array();				speeds[0] = new Array ("AMD Athlon 1.88GHz", "AMD Athlon 2.00GHz", "AMD Turion 2.20GHz")				speeds[1] = new Array ("AMD Turion 2.20GHz", "AMD Opteron 1.88GHz", "AMD Opteron 2.00GHz")				speeds[2] = new Array ("AMD Turion 2.20GHz", "AMD Turion 2.20GHz", "AMD Turion 2.20GHz")									function change(selection) 					{								var speed = document.getElementById("computerspeed");							speed.length = 0;							for (var i = 0 ; i < speeds[selection].length ; i++) 							{								var opt = new Option(speeds[selection][i],speeds[selection][i]); 								speed[speed.length] = opt;							}											}				</script>									        </head>        <body onload="change(0);">                <h1>CompuDeal</h1>                <p />Welcome to CompuDeal! Please fill out the form below to order a computer product. Our form is simple and fool proof to use.                <form action='mailto:martin.vanputten@gmail.com' method='POST'>                        <p />Computer:                        <select name="computer" id="computer" onchange="change(this.selectedIndex);">                                <option value='PC'>PC</option>                                <option value='Notebook'>Notebook</option>                                <option value='Workstation'>Workstation</option>                        </select>						                        <p />Speed:                        <select name='computerspeed' id='computerspeed'>						</select>                        <select name='memory'>                        <option value='512MB'>512MB</option>                        <option value='1GB'>1GB</option>                        <option value='5GB'>2GB</option>                        </select>                        <p />Space:                        <select name='space'>                        <option value='80'>80GB</option>                        <option value='160'>160GB</option>                        <option value='320'>320GB</option>                        </select>                        <p />All computers are fully loaded and have NVIDIA 7900 GS 256MB graphic cards.                        </select><br>						<input type='submit' value='Submit' >                </form>        </body></html>

ZeroShade · February 26, 2007

I want to stay away from javascript because i am learning php right now. My mistake for putting the multiple selects inside each other... I should know better. But I don't think the onchange is working properly because there isn't anything inside the selectbox2. Any suggestions?

Lulzim · February 26, 2007

But I don't think the onchange is working properly because there isn't anything inside the selectbox2. Any suggestions?

it works fine here :Ssecond select box doesn't have any options in it, but this code below creates new options inside second <select> based on the value selected in selectbox1

for (var i = 0; i < speeds[selection].length; i++){var opt = new Option(speeds[selection][i],speeds[selection][i]);speed[speed.length] = opt;}

ZeroShade · February 27, 2007

Hmm... I'm not understand... this is what I have:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">		<head>				<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />				<title>CompuDeal</title>		</head>		<body>				<h1>CompuDeal</h1>				<p />Welcome to CompuDeal! Please fill out the form below to order a computer product. Our form is simple and fool proof to use.				<form action='mailto:martin.vanputten@gmail.com' method='POST'>						<p />Computer:						<select name="selectbox1" id="selectbox1" onchange="document.getElementById('selectbox2').selectedIndex='0'">								<option value='c1'>PC</option>								<option value='c2'>Notebook</option>								<option value='c3'>Workstation</option>						</select>						<p />Speed:						<select name='selectbox2' id='selectbox2'>								<?php										$a188 = 'AMD Athlon 1.88GHz';										$a200 = 'AMD Athlon 2.00GHz';										$t220 = 'AMD Turion 2.20GHz';										$o188 = 'AMD Opteron 1.88GHz';										$o200 = 'AMD Opteron 2.00GHz';										if(isset($_GET["selectbox1"]))										{												echo "<option value=''>Speed:</option>";												switch ($_GET["selectbox1"])												{														case 'c1':																echo "<option value='c1speed1'>", $a188, "</option>";																echo "<option value='c1speed2'>", $a200, "</option>";																echo "<option value='c1speed3'>", $t220, "</option>";														break;														case 'c2':																echo "<option value='c2speed1'>", $t220, "</option>";																echo "<option value='c2speed2'>", $o188, "</option>";																echo "<option value='c2speed3'>", $o200, "</option>";														break;														case 'c3':																echo "<option value='c3speed1'>", $t220, "</option>";																echo "<option value='c3speed2'>", $t220, "</option>";																echo "<option value='c3speed3'>", $t220, "</option>";														break;												}										}								?>						</select>						<p />Memory:						<select name='memory'>";								<option value='m1'>512MB</option>								<option value='m2'>1GB</option>								<option value='m3'>2GB</option>						</select>						<p />Space:						<select name='space'>								<option value='h1'>80GB</option>								<option value='h2'>160GB</option>								<option value='h3'>320GB</option>						</select>						<p />All computers are fully loaded and have NVIDIA 7900 GS 256MB graphic cards.				</form>		</body></html>

Lulzim · February 27, 2007

to change the values on the second select box using php you should submit the data to a php script, not with mailto:also you forgot to put the submit button here is how it works:first select the computer and click 'select speed' buttonthen choose other parts and click 'submit order' button

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">        <head>                <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />                <title>CompuDeal</title>        </head>        <body>                <h1>CompuDeal</h1>                <p />Welcome to CompuDeal! Please fill out the form below to order a computer product. Our form is simple and fool proof to use.                <form <?				if ($_POST["selectbox1"] != "")					echo "action='mailto:martin.vanputten@gmail.com'";				else					echo "action='".$_SERVER['PHP_SELF']."'";				?> method='POST'>                        <p />Computer:                        <select name="selectbox1" id="selectbox1" onchange="document.getElementById('selectbox2').selectedIndex='0'">                                <option value='c1'>PC</option>                                <option value='c2'>Notebook</option>                                <option value='c3'>Workstation</option>                        </select>                        <p />Speed:                        <select name='selectbox2' id='selectbox2'>                                <?php                                        $a188 = 'AMD Athlon 1.88GHz';                                        $a200 = 'AMD Athlon 2.00GHz';                                        $t220 = 'AMD Turion 2.20GHz';                                        $o188 = 'AMD Opteron 1.88GHz';                                        $o200 = 'AMD Opteron 2.00GHz';                                        if(isset($_POST["selectbox1"]))                                        {                                                echo "<option value=''>Speed:</option>";                                                switch ($_POST["selectbox1"])                                                {                                                        case 'c1':                                                                echo "<option value='c1speed1'>", $a188, "</option>";                                                                echo "<option value='c1speed2'>", $a200, "</option>";                                                                echo "<option value='c1speed3'>", $t220, "</option>";                                                        break;                                                        case 'c2':                                                                echo "<option value='c2speed1'>", $t220, "</option>";                                                                echo "<option value='c2speed2'>", $o188, "</option>";                                                                echo "<option value='c2speed3'>", $o200, "</option>";                                                        break;                                                        case 'c3':                                                                echo "<option value='c3speed1'>", $t220, "</option>";                                                                echo "<option value='c3speed2'>", $t220, "</option>";                                                                echo "<option value='c3speed3'>", $t220, "</option>";                                                        break;                                                }                                        }                                ?>                        </select>                        <p />Memory:                        <select name='memory'>";                                <option value='m1'>512MB</option>                                <option value='m2'>1GB</option>                                <option value='m3'>2GB</option>                        </select>                        <p />Space:                        <select name='space'>                                <option value='h1'>80GB</option>                                <option value='h2'>160GB</option>                                <option value='h3'>320GB</option>                        </select>                        <p>All computers are fully loaded and have NVIDIA 7900 GS 256MB graphic cards.</p>						<input type='submit' value='<? if(!isset($_POST["selectbox1"])) echo "Select speed"; else echo "Submit order"; ?>'>                </form>        </body></html>

Mr_CHISOL · February 27, 2007

Hi!Please note that mailto: in an action doesn't always work (i.e. the visitor may use a public computer, or only use webmail and has not configured a mail-client to send mail...), a better solution would be to send it to a php-script that sends the mail instead.Information about the mail function can be found here: http://php.net/manual/en/function.mail.phpThe script that sends the mail could look something like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"><head>	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />	<title>CompuDeal</title></head><body>	<h1>CompuDeal</h1>	<p />Welcome to CompuDeal! Please fill out the form below to order a computer product. Our form is simple and fool proof to use.	<?php		if ($_POST["selectbox1"] != "")			$action = "mailingscript.php'";		else			$action= $_SERVER['PHP_SELF'];	?>	<form action="<?php ehco $action ?> method='POST'>	<br />Computer:	<select name="selectbox1" id="selectbox1" onchange="document.getElementById('selectbox2').selectedIndex='0'">		<option value='c1'>PC</option>		<option value='c2'>Notebook</option>		<option value='c3'>Workstation</option>	</select>	<br />Speed:	<select name='selectbox2' id='selectbox2'>		<?php			$a188 = 'AMD Athlon 1.88GHz';			$a200 = 'AMD Athlon 2.00GHz';			$t220 = 'AMD Turion 2.20GHz';			$o188 = 'AMD Opteron 1.88GHz';			$o200 = 'AMD Opteron 2.00GHz';			if(isset($_POST["selectbox1"])) {				echo "<option value=''>Speed:</option>";				switch ($_POST["selectbox1"]) {					case 'c1':						echo "<option value='c1speed1'>", $a188, "</option>";						echo "<option value='c1speed2'>", $a200, "</option>";						echo "<option value='c1speed3'>", $t220, "</option>";						break;					case 'c2':						echo "<option value='c2speed1'>", $t220, "</option>";						echo "<option value='c2speed2'>", $o188, "</option>";						echo "<option value='c2speed3'>", $o200, "</option>";						break;					case 'c3':						echo "<option value='c3speed1'>", $t220, "</option>";						echo "<option value='c3speed2'>", $t220, "</option>";						echo "<option value='c3speed3'>", $t220, "</option>";						break;				}			}		?>		</select>		<br />Memory:		<select name='memory'>";			<option value='m1'>512MB</option>			<option value='m2'>1GB</option>			<option value='m3'>2GB</option>		</select>		<br />Space:		<select name='space'>			<option value='h1'>80GB</option>			<option value='h2'>160GB</option>			<option value='h3'>320GB</option>		</select><br />		Name:		<input type="text" name="name" /><br />		Email:		<input type="text" name="email" /><br />		Address:		<input type="text" name="address" title="Street Address" /><br />		<input type="text" name="zip" title="Zip/Postal-Code" size="5" maxlength="6" />		<input type="text" name="city" title="City" /><br />		<p>All computers are fully loaded and have NVIDIA 7900 GS 256MB graphic cards.</p>		<input type='submit' value='<? if(!isset($_POST["selectbox1"])) echo "Select speed"; else echo "Submit order"; ?>'>	</form>  </body></html>

Hope that helped (There may be some error in the form-code, but I don't think so).Good Luck and Don't Panic!

ZeroShade · February 27, 2007

Ok... thanks! So in order for the second select to update there has to be a button to basically refresh it... do I understand that?

justsomeguy · February 27, 2007

That's right, you need to submit the form, get the form information that was submitted, and show another form based on whatever was submitted.

Mr_CHISOL · February 27, 2007

But you don't need a button, you can use onchange="document.forms[0].submit()" on the first selection-list (I think that's the right JS..)

ZeroShade · March 1, 2007

But you don't need a button, you can use onchange="document.forms[0].submit()" on the first selection-list (I think that's the right JS..)

I'll try that to... simpler is better!

Forms

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in