javascript show/hide div with form option (Help REQUEST)

lasse48 · March 28, 2011

hello

I am have been trying to make a Quick buy box, with php, html and javascript. But java has never been my strong side, dont know anything about jave :shrug:

okai i have the first form option , where i get it out from mysql, and i want it to do so when i select a option it will show a div with the same id as the option value:

<form action="quick_test_finish.php" method="post">
<center>
<select id="step_1" name="step_1" onchange="toggle('hidden');" AUTOCOMPLETE=OFF style="width:165px;">
    <option value="none">Select Your Number</option>						
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
</select>
</center>

when i have selected a option in step_1 it will display a div like this one with a new option (step 2)

<!-- step 2 start --><div id="1" style="display:none;">
<select id="step_2" name="step_2" onchange="toggle('hidden');" AUTOCOMPLETE=OFF style="width:165px;">
    <option value="none">Select Your Number</option>						
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</select>
<!-- step 2 end --></div>

and then when a option in step 2 has been pick it will display a new one like this:

<!-- step 3 start --><div id="1" style="display:none;">
<select id="step_3" name="step_3" onchange="toggle('hidden');" AUTOCOMPLETE=OFF style="width:165px;">
    <option value="none">Select Your Number</option>						
    <option value="1">1</option>
</select>
<!-- step 3 end --></div>

and then if a option in step 3 has been pick it will display the final step 4:

<!-- step 4 start --><div id="1" style="display:none;">
<input type="submit" value="Submit">
<!-- step 4 end --></div>
</form>

I have been looking for days to find a way to do this but i allways end in errors, with jave

cssfreakie · March 28, 2011

just a thing Java is not javascript.

Anyways i think you might be interested in looking in to the Jquery library. It's a nice javascript library that offers I think exactly what you need in a simple way.

have a look here: http://api.jquery.com/show/ down the page is a demo, of the show() function.

I think you will need to set all elements you want to hide to display:none; with css or javascript. and show them depending on the situation.

hope this helps

lasse48 · March 28, 2011

thanks for the fast reply

I have tryed to fix php java and html to gettor , and i got this: its nearlig working only problem is that, with step 2 it only works with the first option and first show div, all the others dont work , cant see what i miss :-* any ideas you like to share ?


<?php
// Define your server login details in here, host can be left as localhost
$host = "localhost";
$user = "root";
$pass = "";
$database = "show_hide";
// Connecting to MySQL server now...
mysql_connect("$host","$user","$pass") or die (mysql_error());
// Select database
mysql_select_db ("$database") or die (mysql_error());

$add_to_quick_buy = 1;
$status = 1;

?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<script type="text/javascript">

function toggle_select()
{
	var selectedOption = document.getElementById('cate').value;
	<?php
	$query_quick_buy_box2 = "SELECT * FROM product WHERE add_to_quick_buy = '$add_to_quick_buy' AND status = '$status' order by sort asc" or die(mysql_error());
	$result_quick_buy_box2 = mysql_query($query_quick_buy_box2) or die(mysql_error());

	while($row_quick_buy_box2 = mysql_fetch_array($result_quick_buy_box2))
	{
	$cate_name2 = $row_quick_buy_box2['name'];
	?>
	if( selectedOption == '<?php echo $cate_name2 ; ?>' )
	{
		document.getElementById('<?php echo $cate_name2 ; ?>').style.display = 'block';
	}
	else
	{
		document.getElementById('<?php echo $cate_name2 ; ?>').style.display = 'none';
	}

	<?php
	}
	?>
	}
	function toggle_step()
	{
	var selectedOption = document.getElementById('catosub').value;
		<?php
		$query_quick_buy_box3 = "SELECT * FROM product WHERE add_to_quick_buy = '$add_to_quick_buy' AND status = '$status' order by sort asc" or die(mysql_error());
		$result_quick_buy_box3 = mysql_query($query_quick_buy_box3) or die(mysql_error());

		while($row_quick_buy_box3 = mysql_fetch_array($result_quick_buy_box3))
		{
		$cate_name3 = $row_quick_buy_box3['name'];
		?>
		if( selectedOption == 'gamecurrency_<?php echo $row_quick_buy_box3['id']; ?>' )
		{
			document.getElementById('gamecurrency_div_<?php echo $row_quick_buy_box3['id']; ?>').style.display = 'block';
		}
		else
		{
			document.getElementById('gamecurrency_div_<?php echo $row_quick_buy_box3['id']; ?>').style.display = 'none';
		}
		<?php
		}
		?>

}

</script>

</head>

<body>
<form action="quick_test_finish.php" method="post">
<center>
<select id="cate" name="cate" onchange="javascript:toggle_select();" AUTOCOMPLETE=OFF style="width:165px;">
    <option value="none">Select A Game</option>						
  	<?php
$query_quick_buy_box = "SELECT * FROM product WHERE add_to_quick_buy = '$add_to_quick_buy' AND status = '$status' order by sort asc" or die(mysql_error());
$result_quick_buy_box = mysql_query($query_quick_buy_box) or die(mysql_error());

while($row_quick_buy_box = mysql_fetch_array($result_quick_buy_box))
{
?>
    <option value="<?php echo $row_quick_buy_box['name']; ?>"><?php echo $row_quick_buy_box['name']; ?></option>
<?php
    }
    ?>
</select>
</center>



  	<?php
$query_quick_buy_box1 = "SELECT * FROM product WHERE add_to_quick_buy = '$add_to_quick_buy' AND status = '$status' order by sort asc" or die(mysql_error());
$result_quick_buy_box1 = mysql_query($query_quick_buy_box1) or die(mysql_error());

while($row_quick_buy_box1 = mysql_fetch_array($result_quick_buy_box1))
{
	$game_currency = $row_quick_buy_box1['game_currency'];
	$cd_keys = $row_quick_buy_box1['cd_keys'];
	$Power_leveling = $row_quick_buy_box1['power_leveling'];
?>
    <!-- step 2 start --><div id="<?php echo $row_quick_buy_box1['name']; ?>" style="display:none;">
    <center>
<select id="catosub" name="catosub" onchange="javascript:toggle_step();" AUTOCOMPLETE=OFF style="width:165px;">
    <option value="none">Select A Game Type</option>	
<option value="gamecurrency_<?php echo $row_quick_buy_box1['id']; ?>">Game Currency</option>	
<option value="cdkeys_<?php echo $row_quick_buy_box1['id']; ?>">CD-Keys</option>
<option value="powerleveling_<?php echo $row_quick_buy_box1['id']; ?>">Power-Leveling</option>	
    </select>
    </center>
    
     <!-- gamecurrency start --><div id="gamecurrency_div_<?php echo $row_quick_buy_box1['id']; ?>" style="display:none;">
    <a href="#">Game Currency<?php echo $row_quick_buy_box1['id']; ?></a>
    <!-- gamecurrency end --></div>
    

    
    
<!-- step 2 end --></div>
<?php
    }
    ?>

   



</form>
</body>
</html>

lasse48 · March 28, 2011

btw this is part 2:

<center>
<select id="catosub" name="catosub" onchange="javascript:toggle_step();" AUTOCOMPLETE=OFF style="width:165px;">
    <option value="none">Select A Game Type</option>	
<option value="gamecurrency_<?php echo $row_quick_buy_box1['id']; ?>">Game Currency</option>	
<option value="cdkeys_<?php echo $row_quick_buy_box1['id']; ?>">CD-Keys</option>
<option value="powerleveling_<?php echo $row_quick_buy_box1['id']; ?>">Power-Leveling</option>	
    </select>
    </center>
    
     <!-- gamecurrency start --><div id="gamecurrency_div_<?php echo $row_quick_buy_box1['id']; ?>" style="display:none;">
    <a href="#">Game Currency<?php echo $row_quick_buy_box1['id']; ?></a>
    <!-- gamecurrency end --></div>

cssfreakie · March 28, 2011

sorry i am not a javascript expert i use jquery library for this kind of stuff. But i bet there are some javascript experts here that can help.

lasse48 · March 28, 2011

well thanks anyway for your help

cssfreakie · March 28, 2011

well thanks anyway for your help

no problem, but if you have time left have a look in Jquery, its free and pretty easy to use. In your case the functions hide() and show() might be nice

lasse48 · March 28, 2011

yes indeed, i am reading about it atm, i have used there scripts befor , its were nice systems , did not know they had so much to offer

Adam · March 28, 2011

Does it not matter which option they select, you just want to show the next select box?

lasse48 · March 28, 2011

It does matter which option they select

Adam · March 28, 2011

Ah okay. What's the logic behind which you show, in English?

lasse48 · March 28, 2011

well thanks anyway for your help

no problem, but if you have time left have a look in Jquery, its free and pretty easy to use. In your case the functions hide() and show() might be nice

i tryed your way, and it works 100% Jquery is much better to use , you save my day thanks were much agian

Sign In

javascript show/hide div with form option (Help REQUEST)

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

Join the conversation

Important Information