Show/Hide Div Select

[dfowler]

Hey guys, I'm having a little trouble with showing and hiding divs.  What I would like is when a user picks a certain option the corresponding div shows, and all the rest hide.  I can't seem to get it to work at all.  Currently the divs aren't being created, and if I hardcode the divs in, the javascript isn't working.  Here is what I have so far:

 

<?php
include 'system.php';

$query = "select * from screening_vars";
$result = mysql_query($query);
$i = 0;
?>

<script type="text/javascript">
var last = null;

function showContent(id) {
var new = document.getElementById(id);
last.style.display = "none";
new.style.display = "block";
last = new;

}
</script>
<form action="add2.php" method="POST">
<div>
<select name="field" onchange="showContent(this.value)">
	<?php while ($i < mysql_num_fields($result)) {
			$names = mysql_fetch_field($result);
				if ($names->name == 'id') {
					echo "";
				} else {
					echo "<option value='$names->name'>$names->name</option>\n";
				}
			$i++;
		}
	?>
</select>
</div>
<?php while ($i < mysql_num_fields($result)) {
			$names = mysql_fetch_field($result);
				if ($names->name == 'id') {
					echo "";
				} else {
					echo "<div id='$names->name' style='display:none;'>\n
							$names->name:  <input type='text' name='$names->name' />\n
						</div>\n";
				}
			$i++;
		}
	?>
	<input type="submit" value="Submit" class="meal-submit" />
	<input type="reset" value="Clear" class="meal-clear" />
</form>

[rhodesa]

I think looping through mysql_fetch_field twice is causing the problem. Try this:

 

<?php
include 'system.php';

$query = "select * from screening_vars";
$result = mysql_query($query);
$options = "";
$divs = "";

while($field = mysql_fetch_field($result)){
  if($field->name == 'id') continue;
  $options .= "<option value=\"{$field->name}\">{$field->name}</option>\n";
  $divs .= "<div id=\"{$field->name}\" style=\"display:none;\">{$field->name}:  <input type=\"text\" name=\"{$names->name}\" /></div>\n";
}
?>

<script type="text/javascript">
var last = null;

function showContent(id) {
var new = document.getElementById(id);
last.style.display = "none";
new.style.display = "block";
last = new;

}
</script>
<form action="add2.php" method="POST">
<div>
<select name="field" onchange="showContent(this.value)">
<?php echo $options; ?>
</select>
</div>
<?php echo $divs; ?>
<input type="submit" value="Submit" class="meal-submit" />
<input type="reset" value="Clear" class="meal-clear" />
</form>

[dfowler]

Hehe, I was just about to post that I figured out the div part.  Here is the solution I came up with.

 

<?php
include 'system.php';

$query = "select * from screening_vars";
$result = mysql_query($query);
$names2 = array();
$i = 0;
?>

<script type="text/javascript">
var last = null;

function showContent(id) {
var new = document.getElementById(id);
last.style.display = "none";
new.style.display = "block";
last = new;

}
</script>
<form action="add2.php" method="POST">
<div>
<select name="field" onchange="showContent(this.value)">
	<?php while ($i < mysql_num_fields($result)) {
			$names = mysql_fetch_field($result);
				if ($names->name == 'id') {
					echo "";
				} else {
					echo "<option value='$names->name'>$names->name</option>\n";
				$names2[] = $names->name;
				}
			$i++;
		}
	?>
</select>
</div>
<?php foreach($names2 as $n) {
		echo "<div id='$n' style='display:none'>\n
			$n:  <input type='text' name='$n' />\n
		</div>\n";
	} 
?>
	<input type="submit" value="Submit" class="meal-submit" />
	<input type="reset" value="Clear" class="meal-clear" />
</form>

 

Problem is, the javascript still isn't working

[rhodesa]

that will work too...mine only uses one loop though

[rhodesa]

What part of the javascript isn't working? Are you getting any javascript errors in your browser you can post?

[dfowler]

Yeah, I suppose only one loop is better.   As for my javascript, I'm not getting any errors.  It just isn't working.  If I modify the script to this:

<script type="text/javascript">
function showContent(id) {
document.getElementById(id).style.display = "block";
}
</script>

 

It will display the hidden divs no problem. However, since my goal is to have it only display 1 div at a time.  This doesn't help much.

[rhodesa]

try using:

 

<script type="text/javascript">
var last = '';
function showContent(id) {
  //Hide old div
  if(last.length)
    document.getElementById(last).style.display = 'none';
  //Show new div
  document.getElementById(id).style.display = 'block';
  last = id;
}
</script>

[dfowler]

Amazing, once again you fix something I break.  Thanks for your help, works perfectly!  Still not sure what was wrong with my initial script though, as it looks like it should have worked.

[dfowler]

And now I found another problem.  The thing about this form is that it is dynamic.  How do I $_POST or $_GET the values on the next page?

[dfowler]

Ok, I found a simple solution that I hope continues to work.

 

$field = $_POST['field'];
$field2 = $_POST[$field];