Changing selection options based on earlier selection

[BunkMoreland]

Hey all!

What I'm trying to do is alter the second selection's options (finishing) based on the option chosen in the first (material).

Ideally I would like to have it so that by changing the material selection, the options available in the second select (finishing) are completely different. However for now I'll settle for the 'finishing' drop down box being greyed out or commented out if another option than the first one (vinyl banner) is chosen; eventually though I'd like different finishing options for each material.

I'm a newbie so I'm not really sure which would be easier, or if php is even capable of something like this.

Would the page have to be reloaded or can this be done on the fly?

Any help would be greatly appreciated 😃

	<form action="<?php bloginfo('url');?>/?page_id=22" method="POST" id="icq" enctype="multipart/form-data">

		 <span class="material">

			<label for="material">Material:</label>

				<select name="material" class="material">	

					<option value="Vinyl Banner" <? echo( $_POST['material'] == 'Vinyl Banner' ? 'selected="true"' : '' ); ?> >Vinyl Banner</option>

					<option value="Canvas" <? echo( $_POST['material'] == 'Canvas' ? 'selected="true"' : '' ); ?> >Canvas</option>

					<option value="Poster" <? echo( $_POST['material'] == 'Poster' ? 'selected="true"' : '' ); ?> >Poster</option>

				</select>


		</span>



		<span class="finishing">

			<label for="finishing">Finishing:</label>

				<select name="finishing" class="finishing">

					<option value="Plain Cut ($2.00 / sq ft)" <? echo( $_POST['finishing'] == 'Plain Cut ($2.00 / sq ft)' ? 'selected="true"' : '' ); ?> >Plain Cut ($2.00 / sq ft)</option>

					<option value="Hemming ($2.50 / sq ft)" <? echo( $_POST['finishing'] == 'Hemming ($2.50 / sq ft)' ? 'selected="true"' : '' ); ?> >Hemming ($2.50 / sq ft)</option>

					<option value="Pole Pockets ($2.75 / sq ft)" <? echo( $_POST['finishing'] == 'Pole Pockets ($2.75 / sq ft)' ? 'selected="true"' : '' ); ?> >Pole Pockets ($2.75 / sq ft)</option>

				</select>



		</span>

[sneakyimp]

This is entirely possible and can be done using PHP or using javascript.

In either case, it would be easier if your select values are not long fancy strings like "Plain Cut ($2.00 / sq ft)" but rather numbers. It would also be easier if you defined your data options in arrays -- this would reduce the need to type long and involved stuff over and over again.

For example:

<?php

$material_options = array(
  1 => 'Vinyl Banner',
  2 => 'Canvas',
  3 => 'Poster'
);

# you can define your finishing options depending on what value is chosen for material
# NOTE that I'm using the array indexes from above rather than the long textual name
switch $_POST['material'] {
  case 1:
    # Vinyl Banner
    $finishing_options = array(
      1 -> 'Plain Cut ($2.00 / sq ft)',
      2 -> 'Hemming ($2.50 / sq ft)',
      3 -> 'Pole Pockets ($2.75 / sq ft)'
    );
    break;
  case 2:
    # Canvas
    $finishing_options = array(
      4 -> 'Option 4',
      5 -> 'Option 5',
      6 -> 'Option 6'
    );
    break;
  case 3:
    # Poster
    $finishing_options = array(
      7 -> 'Option 7',
      8 -> 'Option 8',
      9 -> 'Option 9'
    );
    break;
  default:
    # if nothing selected...you could also set a var here which might
    # disable the finishing select entirely
    $finishing_options = array(
      10 -> 'Option 10',
      11 -> 'Option 11',
      12 -> 'Option 12'
    );

}

?>
<select name="material" class="material">
<?
foreach($material_options as $key => $opt) {
  echo '  <option value="' . $key . '"';
  if ($_POST['material'] == $key) {
    echo ' selected="true"';
  }
  echo '>' . $opt . "</option>\n";
} // foreach material option
?>
</select>

<select name="finishing" class="finishing">
<?
foreach($finishing_options as $key => $opt) {
  echo '  <option value="' . $key . '"';
  if ($_POST['finishing'] == $key) {
    echo ' selected="true"';
  }
  echo '>' . $opt . "</option>\n";
} // foreach finishing option
?>
</select>

EDIT: corrected some typos

[BunkMoreland]

thank you so much!

I'll try playing around with that now 😃

[BunkMoreland]

Any idea why I'm getting Parse error: parse error, expecting `')' using the code provided by sneakyimp?

Its saying line 45; which is the one containing 1 -> 'Plain Cut ($2.00 / sq ft)'

I got a similar message for the line containing switch $POST['material'] { but the problem was fixed when I put parenthesis around the $POST. I cant figure out why it would be giving me this new error- the array code looks exactly the same as the $material_options defined earlier. :queasy:

[bradgrafelman]

More typos; he started using "->" in the array definitions instead of "=>".

EDIT: I've also un-marked this thread as resolved for you.

[bradgrafelman]

Thread unlocked. Sorry about that!

My iPod doesn't always get along with my fat fingers... 🙁

[sneakyimp]

I didn't bother testing my code. Sorry about that. This should be better:

<?php

$material_options = array(
  1 => 'Vinyl Banner',
  2 => 'Canvas',
  3 => 'Poster'
);

# you can define your finishing options depending on what value is chosen for material
# NOTE that I'm using the array indexes from above rather than the long textual name
switch ($_POST['material']) {
  case 1:
    # Vinyl Banner
    $finishing_options = array(
      1 => 'Plain Cut ($2.00 / sq ft)',
      2 => 'Hemming ($2.50 / sq ft)',
      3 => 'Pole Pockets ($2.75 / sq ft)'
    );
    break;
  case 2:
    # Canvas
    $finishing_options = array(
      4 => 'Option 4',
      5 => 'Option 5',
      6 => 'Option 6'
    );
    break;
  case 3:
    # Poster
    $finishing_options = array(
      7 => 'Option 7',
      8 => 'Option 8',
      9 => 'Option 9'
    );
    break;
  default:
    # if nothing selected...you could also set a var here which might
    # disable the finishing select entirely
    $finishing_options = array(
      10 => 'Option 10',
      11 => 'Option 11',
      12 => 'Option 12'
    );

}

?>
<select name="material" class="material">
<?
foreach($material_options as $key => $opt) {
  echo '  <option value="' . $key . '"';
  if ($_POST['material'] == $key) {
    echo ' selected="true"';
  }
  echo '>' . $opt . "</option>\n";
} // foreach material option
?>
</select>

<select name="finishing" class="finishing">
<?
foreach($finishing_options as $key => $opt) {
  echo '  <option value="' . $key . '"';
  if ($_POST['finishing'] == $key) {
    echo ' selected="true"';
  }
  echo '>' . $opt . "</option>\n";
} // foreach finishing option
?>
</select>

[dmac]

Hi, sneakyimp. I have been trying to implement your code here, but I can't get it to work properly even though I have copied it verbatim. The first drop down list populates as it should, but the second drop down list won't change from the default when I make my selection in the first list. In my PHP error log I receive error messages for undefined indexes for "material" and "finishing," but I'm not sure how important those are. Any help would be greatly appreciated. Thanks in advance.

[sneakyimp]

The code I posted is a bit incomplete. You would still need to add a <form> tag with method=post and a a submit button, etc.

The code will only change the options in the second select if you have chosen something in the first select and hit 'submit'. It will only set the value of the second select if you have previously made a selection in the second select box that actually appears in the second select box.

As for the error notices, you should probably set error_reporting to something a little less whiny. Maybe try this:

<?php

error_reporting(E_ALL ^ E_NOTICE);

$material_options = array(
  1 => 'Vinyl Banner',
  2 => 'Canvas',
  3 => 'Poster'
);

# you can define your finishing options depending on what value is chosen for material
# NOTE that I'm using the array indexes from above rather than the long textual name
switch ($_POST['material']) {
  case 1:
    # Vinyl Banner
    $finishing_options = array(
      1 => 'Plain Cut ($2.00 / sq ft)',
      2 => 'Hemming ($2.50 / sq ft)',
      3 => 'Pole Pockets ($2.75 / sq ft)'
    );
    break;
  case 2:
    # Canvas
    $finishing_options = array(
      4 => 'Option 4',
      5 => 'Option 5',
      6 => 'Option 6'
    );
    break;
  case 3:
    # Poster
    $finishing_options = array(
      7 => 'Option 7',
      8 => 'Option 8',
      9 => 'Option 9'
    );
    break;
  default:
    # if nothing selected...you could also set a var here which might
    # disable the finishing select entirely
    $finishing_options = array(
      10 => 'Option 10',
      11 => 'Option 11',
      12 => 'Option 12'
    );

}

?>
<form method="post" action="">
<select name="material" class="material">
  <option value="">--Please select a material--</option>
<?
foreach($material_options as $key => $opt) {
  echo '  <option value="' . $key . '"';
  if ($_POST['material'] == $key) {
    echo ' selected="true"';
  }
  echo '>' . $opt . "</option>\n";
} // foreach material option
?>
</select><br>

<select name="finishing" class="finishing">
  <option value="">--Please select finishing--</option>
<?
foreach($finishing_options as $key => $opt) {
  echo '  <option value="' . $key . '"';
  if ($_POST['finishing'] == $key) {
    echo ' selected="true"';
  }
  echo '>' . $opt . "</option>\n";
} // foreach finishing option
?>
</select><br>
<input type="submit" name="submit" value="submit">
</form>

[dmac]

That works perfectly! Thanks so much!