Drop-down boxes, lots of help needed. |
Drop-down boxes, lots of help needed. |
TheHeist |
Jan 5 2011, 03:04 PM
Post
#1
|
Member Group: Members Posts: 32 Joined: 1-September 10 Member No.: 12,636 |
I want it so that when the page is loaded the proper selection from the drop-down box is selected. Each time you goto the form, you can select a different drop down item, then when you click submit it saves it, I got that working, but when the page loads I can't figure out how to make it show what was saved from before.
Then I would like to know how to: Select item in dropdown box and then the text and form below changes depending on which item is selected. I have googled and searched this site and others and can't seem to find anything like this. Any help if appreciated. Thanks, The Heist |
Christian J |
Jan 5 2011, 03:31 PM
Post
#2
|
. Group: WDG Moderators Posts: 9,661 Joined: 10-August 06 Member No.: 7 |
I want it so that when the page is loaded the proper selection from the drop-down box is selected. Add the SELECTED attribute to the OPTION element. QUOTE Then I would like to know how to: Select item in dropdown box and then the text and form below changes depending on which item is selected. Doing that on the same page requires javascript. Make sure the form is still useable if JS is not available. |
TheHeist |
Jan 5 2011, 03:39 PM
Post
#3
|
Member Group: Members Posts: 32 Joined: 1-September 10 Member No.: 12,636 |
I want it so that when the page is loaded the proper selection from the drop-down box is selected. Add the SELECTED attribute to the OPTION element. I want it to change depending on which was selected previously. I am unfamiliar with Ajax but I found this page: http://www.w3schools.com/php/php_ajax_database.asp But when I put it on my site and change it to my sql database it doesn't load anything... Thanks The Heist |
TheHeist |
Jan 6 2011, 03:38 PM
Post
#4
|
Member Group: Members Posts: 32 Joined: 1-September 10 Member No.: 12,636 |
This below works, but when the page loads and reads from the mysql database the value of numflowers, I'm not sure how to make it so it not only has the dropdown on the proper selection but also shows the proper div.
At top it uses php to load this, which works: if($numflowers == '1'){$numflowers1 = 'selected="selected"';} And makes the dropdown box display correct selection, but the divColor1 doesnt show unless you click dropdown and manually select it. Any ideas? -The Heist CODE <html> <head> <title>Flower Order Form</title> <script> function ShowMenu(num, menu, max) { //num is selected value, menu is the name of the div, max is the number of divs for(i = 1; i <= max; i++){ //add number onto end of menu var menu_div = menu + i; //if current show if(i == num) { document.getElementById(menu_div).style.display = 'block'; } else { //if not, hide document.getElementById(menu_div).style.display = 'none'; } } } </script> </head> <body> <h3>Flower Order Form</h3> <form action="processorder.php" method="post"> Select how many flowers you would like: <select id='numflowers' onChange="java script: ShowMenu(document.getElementById('numflowers').value,'divColor', 6);"> <option value='0'>Number of Flowers <option value='1' <?php echo $numflowers1; ?>>1 <option value='2'>2 <option value='3'>3 <option value='4'>4 <option value='5'>5 <option value='5'>6 </select> <div id='divColor1' style="display: none;"> Choose type of flower 1:<br><br> <input type="radio" name="color1" value="red">Red<br> <input type="radio" name="color1" value="white">White<br> <input type="radio" name="color1" value="yellow">Yellow<br> </div> <div id='divColor2' style="display: none;"> Choose type of flower 2:<br><br> <input type="radio" name="color2" value="red">Red<br> <input type="radio" name="color2" value="white">White<br> <input type="radio" name="color2" value="yellow">Yellow<br> </div> <div id='divColor3' style="display: none;"> Choose type of flower 3:<br><br> <input type="radio" name="color3" value="red">Red<br> <input type="radio" name="color3" value="white">White<br> <input type="radio" name="color3" value="yellow">Yellow<br> </div> <div id='divColor4' style="display: none;"> Choose type of flower 4:<br><br> <input type="radio" name="color4" value="red">Red<br> <input type="radio" name="color4" value="white">White<br> <input type="radio" name="color4" value="yellow">Yellow<br> </div> <div id='divColor5' style="display: none;"> Choose type of flower 5:<br><br> <input type="radio" name="color5" value="red">Red<br> <input type="radio" name="color5" value="white">White<br> <input type="radio" name="color5" value="yellow">Yellow<br> </div> <div id='divColor6' style="display: none;"> Choose type of flower 6:<br><br> <input type="radio" name="color6" value="red">Red<br> <input type="radio" name="color6" value="white">White<br> <input type="radio" name="color6" value="yellow">Yellow<br> </div> <br> <input type="submit" value="Next Step"> </form> </body> </html> |
Christian J |
Jan 6 2011, 05:28 PM
Post
#5
|
. Group: WDG Moderators Posts: 9,661 Joined: 10-August 06 Member No.: 7 |
the divColor1 doesnt show unless you click dropdown and manually select it. I rewrote it a little, so that all DIVs are open by default if javascript is not used: CODE <script type="text/javascript"> function ShowMenu(current_value) { var numflowers=document.getElementById('numflowers'); for(var i=0; i<numflowers.options.length; i++) { document.getElementById('menu'+i).style.display='none'; } document.getElementById('menu'+current_value).style.display='block'; } </script> <select id="numflowers" onChange="ShowMenu(this.value);"> <option value="0">0</option> <option value="1" selected="selected">1</option> <option value="2">2</option> </select> <div id="menu0">0</div> <div id="menu1">1</div> <div id="menu2">2</div> <script type="text/javascript"> ShowMenu(1); // hide all DIVs except this one when page loads </script> What will happen with the PHP script if a user manages to check radio buttons from two DIVs? Make sure it can handle such cases. |
TheHeist |
Jan 6 2011, 08:59 PM
Post
#6
|
Member Group: Members Posts: 32 Joined: 1-September 10 Member No.: 12,636 |
I guess i didn't explain myself correctly, I don't want the first div to load always, but the one that was selected (and saved before), it is saved to mysql and then the dropdown box displays it when the page is loaded, just the hidden part isnt.....
And the divs contain different info (not in the dummy test script). Thanks, Heist EDIT!!!!!! MAybe your script does what i meant, i will try it and see. Thanks!!! This post has been edited by TheHeist: Jan 6 2011, 09:00 PM |
TheHeist |
Jan 6 2011, 10:09 PM
Post
#7
|
Member Group: Members Posts: 32 Joined: 1-September 10 Member No.: 12,636 |
So that script don't work. Can you explain how to implement it?
|
TheHeist |
Jan 6 2011, 11:37 PM
Post
#8
|
Member Group: Members Posts: 32 Joined: 1-September 10 Member No.: 12,636 |
THE FULL CODE:
Maybe now it can be seen what I am trying. Sorry about my poor communication skills. I tried your suggestion but couldn't get it to do anything. CODE <?php session_start(); include_once "admin_check.php"; ?> <?php $pid = ereg_replace("[^0-9]", "", $_POST['pid']); // filter everything but numbers for security // Query the body section for the proper page include_once "../scripts/connect_to_mysql.php"; $sqlCommand = "SELECT pagetitle, linklabel, pagebody, keywords, pageorder, pagetype, pagedropdown, showing FROM pages WHERE id='$pid' LIMIT 1"; $query = mysqli_query($myConnection, $sqlCommand) or die (mysqli_error()); while ($row = mysqli_fetch_array($query)) { $pagetitle = $row["pagetitle"]; $linklabel = $row["linklabel"]; $pagebody = $row["pagebody"]; $pagebody = str_replace("<br />", "", $pagebody); $keywords = $row["keywords"]; $showing = $row["showing"]; $pageorder = $row["pageorder"]; $pagetype = $row["pagetype"]; $pagedropdown = $row["pagedropdown"]; } //Show which checkbox is selected for if menu item $showing1 = 'unchecked'; $showing2 = 'unchecked'; if($showing == '1'){$showing1 = 'checked';} else if($showing == '0'){$showing2 = 'checked';} //Show dropdown selection for page type selection $regularpagetype = ""; $blogpagetype = ""; $gallerypagetype = ""; $contactpagetype = ""; $linkspagetype = ""; if($pagetype == '1'){$regularpagetype = 'selected="selected"';} else if($pagetype == 'blog'){$blogpagetype = 'selected="selected"';} else if($pagetype == 'gallery'){$gallerypagetype = 'selected="selected"';} else if($pagetype == 'links'){$linkspagetype = 'selected="selected"';} else if($pagetype == 'contact'){$contactpagetype = 'selected="selected"';} ////////////// mysqli_free_result($query); ?> <!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>Editing Page</title> <script type="text/javascript"> function validate_form ( ) { valid = true; if ( document.form.pagetitle.value == "" ) { alert ( "Please enter the page title." ); valid = false; } else if ( document.form.linklabel.value == "" ) { alert ( "Please enter info for the link label." ); valid = false; } return valid; } </script> <script> function ShowMenu(num, menu, max) { //num is selected value, menu is the name of the div, max is the number of divs for(i = 1; i <= max; i++){ //add number onto end of menu var menu_div = menu + i; //if current show if(i == num) { document.getElementById(menu_div).style.display = 'block'; } else { //if not, hide document.getElementById(menu_div).style.display = 'none'; } } } </script> <style type="text/css"> body { font-family:"Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif; font-size:12px; } p, h1, form, button { border:0; margin:0; padding:0; } #content { border:solid 2px #b7ddf2; background:#ebf4fb; margin:0 auto; width:600px; padding:10px; } h1 { font-size:14px; font-weight:bold; margin-bottom:8px; } p { font-size:12px; color:#666666; margin-bottom:10px; border-bottom:solid 1px #b7ddf2; padding-bottom:10px; } label { display:block; font-weight:bold; } input { font-size:12px; padding:4px 2px; border:solid 1px #aacfe4; margin:2px 0 20px 10px; } textarea { font-size:12px; padding:4px 2px; border:solid 1px #aacfe4; margin:2px 0 20px 10px; } select { font-size:12px; padding:4px 2px; border:solid 1px #aacfe4; margin:2px 0 20px 10px; } #submitbutton { } #submitbutton input { margin:2px 0 0px 10px; width:125px; height:30px; text-align:center; line-height:30px; background: #aacfe4; color:#000000; font-size:12px; font-weight:bold; } #radio { font-size:12px; color:#666666; margin-bottom:0px; padding-bottom:0px; } #radio input { font-size:12px; padding:4px 2px; margin:2px 0 20px 10px; border: none; } </style> </head> <body> <div id="content"> <form id="form" name="form" method="post" action="page_edit_parse.php" onsubmit="return validate_form ( );"> <h1>Edit <a href="index.php">Back</a></h1> <p>Make sure all needed fields are filled in. Also make sure to select PAGETYPE each time you edit a page, it doesn't stay set.<br /><br />* mark required items.</p> <label>Page Title*</label> <input name="pagetitle" type="text" id="pagetitle" size="64" maxlength="64" value="<?php echo $pagetitle; ?>" /> <label>Menu Title*</label> <input name="linklabel" type="text" id="linklabel" size="24" maxlength="24" value="<?php echo $linklabel; ?>" /> <label>Keywords (Hidden, used only be search engines, seperate with commas)</label> <input name="keywords" type="text" id="keywords" size="64" maxlength="128" value="<?php echo $keywords; ?>" /> <label>Menu Item:*</label> <div id="radio"> <input type="radio" name="showing" value="1" <?PHP print $showing1; ?>/> Yes <input type="radio" name="showing" value="0" <?PHP print $showing2; ?>/> No </div> <label>Page Order (Only for Menu Items)</label> <input name="pageorder" type="text" id="pageorder" maxlength="10" size="10" value="<?php echo $pageorder; ?>" /> <label>Page dropdown (IGNORE)</label> <input name="pagedropdown" type="text" id="pagedropdown" maxlength="10" size="10" value="<?php echo $pagedropdown; ?>" /> <label>Pagetype</label> <select name="pagetype" id='pagetype' onChange="java script: ShowMenu(document.getElementById('pagetype').value,'divType', 6);" > <option value='0'>Pagetype</option> <option value='1' <?php echo $regularpagetype;?>>Regular</option> <------------------this is how i make it select correct one, if there is a better way i would like to know, this doesn't affect the onchange like i need it to... <option value='2'>Blog/News</option> <option value='3'>Gallery</option> <option value='4'>Contact</option> <option value='5'>Links</option> </select> <div id='divType1' style="display: none;"> <label>Page Content</label> <textarea name="pagebody" id="pagebody" cols="78" rows="16"><?php echo $pagebody; ?></textarea> </div> <div id='divType2' style="display: none;"> <label>Not implemented yet.</label> </div> <div id='divType3' style="display: none;"> <label>Not implemented yet.</label> </div> <div id='divType4' style="display: none;"> <label>Not implemented yet.</label> </div> <div id='divType5' style="display: none;"> <label>Not implemented yet.</label> </div> <input name="pid" type="hidden" value="<?php echo $pid; ?>" /><label></label> <div align="center"><div id="submitbutton"> <input type="submit" name="button" id="button" value="Update Page" /> </div></div> </form> </div> </body> </html> |
Christian J |
Jan 7 2011, 07:42 AM
Post
#9
|
. Group: WDG Moderators Posts: 9,661 Joined: 10-August 06 Member No.: 7 |
Seems I gave the DIVs the IDs "menu0", "menu1" and so on, while you use "divColor1" etc (starting with 1) in your first example and "divType1" in the second.
|
Lo-Fi Version | Time is now: 26th April 2024 - 08:01 PM |