[BenignDesign]

I have a multi-page form which will (once it is functional and prettied up) be added to our site to allow prospective students to calculate their estimated cost of attending.

Everything works beautifully except the Room and Board area. The code:

<?php
if (isset($_POST['submit'])) {
  $errors=0;
  //Room and Board primaries
     if ($_POST['housing_plans']!='') {
       $housing_plans=$_POST['housing_plans'];
     } else {
       $errors++;
     }
     //Room and Board secondaries
     if ($_POST['housing_option']!='') {
       $housing_option=$_POST['housing_option'];
     } else {
       $errors++;
     }
     if ($_POST['meal_option']!='') {
       $meal_option=$_POST['meal_option'];
     } else {
       $errors++;
     }
     echo "1".$housing_plans." 2".$housing_option." 3".$meal_option."<br />";
  //Error check
  if ($errors!=0) {
     echo "All fields are required.  Please fill in all fields and try again.<br />";
  } else {
     echo "<meta http-equiv='refresh' content='0;url=new_calc_final.php' />";
  }
}
	
?>

<h2>Cost of Attending Calculator</h2>
<h4><em>All fields are required.</em></h4>
<form action='<?php echo $_SERVER['PHP_SELF']; ?>' method='post'>
<div>
<h3>Room &amp; Board</h3>
  <strong>Housing plans:</strong>
  <select onchange="show('targetDIV',this.value)" name="housing_plans">
     <option value="">Select one...</option>
     <option value="Off-Campus">Off-Campus</option>
     <option value="Garrett Hall">On-Campus: Garrett Hall</option>
     <option value="Laker Hall">On-Campus: Laker Hall</option>
  </select>
  <div id="targetDIV" style="display:none;"></div>
     <div id="Off-Campus" style="display:none;">
       <input type='hidden' name='housing_option' value='None' />
       <input type='hidden' name='meal_option' value='None' />
       <hr />
       <em>Due to extreme variances in off-campus housing costs, these figures will not be calculated.</em>
     </div>
     <div id="Garrett Hall" style="display:none;">
       <input type='hidden' name='housing_option' value='Double room' />
       Select meal plan: <select name='meal_option'>
          <option value=''>Select one...</option>
          <option value='10 meal plan'>10 meal plan</option>
          <option value='12 meal plan'>12 meal plan</option>
          <option value='16 meal plan'>16 meal plan</option>
       </select>
     </div>
     <div id='Laker Hall' style='display:none;'>
       Housing options: <select name='housing_option'>
          <option value=''>Select one...</option>
          <option value='Single room'>Single room</option>
          <option value='Double room'>Double room</option>
       </select>
       <br />
       Select meal plan: <select name='meal_option'>
          <option value=''>Select one...</option>
          <option value='10 meal plan'>10 meal plan</option>
          <option value='12 meal plan'>12 meal plan</option>
          <option value='16 meal plan'>16 meal plan</option>
          <option value='None'>No meal plan</option>
       </select>
     </div>
  </div>
  <div>
     <input type='submit' name='submit' value='Submit' />
  </div>
	
<script language="javascript">
  function show(target,src) {
      var targetContainer = document.getElementById(target);
      var sourceContainer = document.getElementById(src);
      if(sourceContainer != null && targetContainer != null) {
        targetContainer.innerHTML = sourceContainer.innerHTML;
        targetContainer.style.display = "block";
	  }
	  else {
	    targetContainer.style.display = "none";
	  }
      //return false;
  }
</script>
</form>

The Javascript portion works fine. The items display only when they are supposed to. However, the form fields within the Javascript affected areas are not passing values to the PHP form handling on submit.

I used this exact same piece of Javascript on another page of the form and it works perfectly. I even tried to copy and paste the code from the other page into this one and modify the content to no avail.

I am hoping I am missing something simple and stupid. Any help you can provide will be GREATLY appreciated!!

Thanks, guys!

[CTphpnwb]

It looks like you want the selections to change based on prior choices. I would create the options as empty..

Select meal plan: <select name='meal_option'>
          <option value=''>...</option>
</select>

and then use javascript to populate them.

This is really more of a Javascript question, so I'll move it there.

[BenignDesign]

The options need to change based on the current choice.

If the student will be living on-campus in Laker Hall, they have the following options:
Single room/Double room and Meal plan/No meal plan (ie, Laker Hall rooms are apartment-style with kitchens)

If the student will be living on-campus in Garrett Hall, they have meal plan choices only. These rooms are traditional dorm-style where you get a roommate and no kitchen, so a meal plan is required.

targetDIV needs to be populated based on the housing option selected. Which it is. I.E., the Javascript is functioning properly. All the Javascript does is show/hide targetDIV based on the living arrangements selected.

Once inside targetDIV, the user will select the values for single room/double room and meal plan (in some cases these items are set for the user in the form of hidden fields). These values need to post to the PHP form handling and are not passing.

The problem may be the Javascript, but it is not in the method of option population.

This post has been edited by BenignDesign: 05 October 2010 - 10:39 AM

[CTphpnwb]

It is javascript. Or maybe html, depending on how you look at it. When you copy html from one container to another something is getting lost. I got around it using the brute force method below, but it requires different names for the select options or the last one will overwrite the previous ones. I did a quick and dirty hack on the php to account for the different names. It could all use some cleaning up, but it works.

<?php
var_dump($_POST);
echo "<br>";
if (isset($_POST['submit'])) {
  $errors=0;
  //Room and Board primaries
  $housing_plans ='';
	if ($_POST['housing_plans']!='') {
		$housing_plans=$_POST['housing_plans'];
	} else {
		$errors++;
	}
     //Room and Board secondaries
$Quarters = array("O","G","L");
foreach($Quarters as $k)
{
	$E = 0;
	$key = 'housing_option'.$k;
     if ($_POST[$key] != '') {
       $housing_option=$_POST[$key];
     } else {
     	$E++;
     }
}
	if($E == 3)
	{
		$errors++;
	}

foreach($Quarters as $k)
{
	$E = 0;
	$key = 'meal_option'.$k;
	if ($_POST[$key]!='') {
		$meal_option = $_POST[$key];
	} else {
		$E++;	
	}
	if($E == 3)
	{
		$errors++;
	}
}
	echo "1 ".$housing_plans." 2 ".$housing_option." 3".$meal_option."<br />";
  //Error check
  if ($errors!=0) {
     echo "All fields are required.  Please fill in all fields and try again.<br />";
  } else {
    // echo "<meta http-equiv='refresh' content='0;url=new_calc_final.php' />";
  }
}
	
?>

<h2>Cost of Attending Calculator</h2>
<h4><em>All fields are required.</em></h4>
<form action='<?php echo $_SERVER['PHP_SELF']; ?>' method='post'>
<div>
<h3>Room &amp; Board</h3>
  <strong>Housing plans:</strong>
  <select onchange="show(this.value)" name="housing_plans">
     <option value="">Select one...</option>
     <option value="Off-Campus">Off-Campus</option>
     <option value="Garrett Hall">On-Campus: Garrett Hall</option>
     <option value="Laker Hall">On-Campus: Laker Hall</option>
  </select>
  <div id="targetDIV" style="display:none;"></div>
     <div id="Off-Campus" style="display:none;">
       <input type='hidden' name='housing_optionO' value='None' />
       <input type='hidden' name='meal_optionO' value='None' />
       <hr />
       <em>Due to extreme variances in off-campus housing costs, these figures will not be calculated.</em>
     </div>
     <div id="Garrett Hall" style="display:none;">
       <input type='hidden' name='housing_optionG' value='Double room' />
       Select meal plan: <select name='meal_optionG'>
          <option value=''>Select one...</option>
          <option value='10 meal plan'>10 meal plan</option>
          <option value='12 meal plan'>12 meal plan</option>
          <option value='16 meal plan'>16 meal plan</option>
       </select>
     </div>
     <div id='Laker Hall' style='display:none;'>
       Housing options: <select name='housing_optionL'>
          <option value=''>Select one...</option>
          <option value='Single room'>Single room</option>
          <option value='Double room'>Double room</option>
       </select>
       <br />
       Select meal plan: <select name='meal_optionL'>
          <option value=''>Select one...</option>
          <option value='10 meal plan'>10 meal plan</option>
          <option value='12 meal plan'>12 meal plan</option>
          <option value='16 meal plan'>16 meal plan</option>
          <option value='None'>No meal plan</option>
       </select>
     </div>
  </div>
  <div>
     <input type='submit' name='submit' value='Submit' />
  </div>
	
<script language="javascript">
	
  function show(src) {
	document.getElementById("Off-Campus").style.display = "none";
	document.getElementById("Garrett Hall").style.display= "none";
	document.getElementById("Laker Hall").style.display= "none";
	if(src !='')
	{
		var sourceContainer = document.getElementById(src);
		sourceContainer.style.display = "block";
	}
  }
</script>
</form>

[BenignDesign]

Sweet! Many thanks, señor! I'll post my final solution after I've had a chance to work on it today.

[edit]After the process of implimenting a version of your solution into my original code, it still didn't work. So, I went back to the other page of the form that uses the code without a problem and tried to determine what was so different about the two forms. That's when I realized I used radio buttons on the first form and drop-downs on the second form. I changed the drop-downs to radio button option selections and now it works beautifully. Go figure. Thanks for your help, CT![/edit]

This post has been edited by BenignDesign: 06 October 2010 - 08:43 AM