lasse48 Posted March 28, 2011 Share Posted 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 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 Link to comment https://forums.phpfreaks.com/topic/231954-javascript-showhide-div-with-form-option-help-request/ Share on other sites More sharing options...
cssfreakie Posted March 28, 2011 Share Posted 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 Link to comment https://forums.phpfreaks.com/topic/231954-javascript-showhide-div-with-form-option-help-request/#findComment-1193271 Share on other sites More sharing options...
lasse48 Posted March 28, 2011 Author Share Posted 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> Link to comment https://forums.phpfreaks.com/topic/231954-javascript-showhide-div-with-form-option-help-request/#findComment-1193344 Share on other sites More sharing options...
lasse48 Posted March 28, 2011 Author Share Posted 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> Link to comment https://forums.phpfreaks.com/topic/231954-javascript-showhide-div-with-form-option-help-request/#findComment-1193347 Share on other sites More sharing options...
cssfreakie Posted March 28, 2011 Share Posted 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. Link to comment https://forums.phpfreaks.com/topic/231954-javascript-showhide-div-with-form-option-help-request/#findComment-1193350 Share on other sites More sharing options...
lasse48 Posted March 28, 2011 Author Share Posted March 28, 2011 well thanks anyway for your help Link to comment https://forums.phpfreaks.com/topic/231954-javascript-showhide-div-with-form-option-help-request/#findComment-1193356 Share on other sites More sharing options...
cssfreakie Posted March 28, 2011 Share Posted 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 Link to comment https://forums.phpfreaks.com/topic/231954-javascript-showhide-div-with-form-option-help-request/#findComment-1193357 Share on other sites More sharing options...
lasse48 Posted March 28, 2011 Author Share Posted 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 Link to comment https://forums.phpfreaks.com/topic/231954-javascript-showhide-div-with-form-option-help-request/#findComment-1193359 Share on other sites More sharing options...
Adam Posted March 28, 2011 Share Posted March 28, 2011 Does it not matter which option they select, you just want to show the next select box? Link to comment https://forums.phpfreaks.com/topic/231954-javascript-showhide-div-with-form-option-help-request/#findComment-1193366 Share on other sites More sharing options...
lasse48 Posted March 28, 2011 Author Share Posted March 28, 2011 It does matter which option they select Link to comment https://forums.phpfreaks.com/topic/231954-javascript-showhide-div-with-form-option-help-request/#findComment-1193368 Share on other sites More sharing options...
Adam Posted March 28, 2011 Share Posted March 28, 2011 Ah okay. What's the logic behind which you show, in English? Link to comment https://forums.phpfreaks.com/topic/231954-javascript-showhide-div-with-form-option-help-request/#findComment-1193372 Share on other sites More sharing options...
lasse48 Posted March 28, 2011 Author Share Posted 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 Link to comment https://forums.phpfreaks.com/topic/231954-javascript-showhide-div-with-form-option-help-request/#findComment-1193383 Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.