The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
 Reply to this topicStart new topic
> Drop-down boxes, lots of help needed.
TheHeist
post 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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Jan 5 2011, 03:31 PM
Post #2


.
********

Group: WDG Moderators
Posts: 9,653
Joined: 10-August 06
Member No.: 7
QUOTE(TheHeist @ Jan 5 2011, 09:04 PM) *

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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
TheHeist
post Jan 5 2011, 03:39 PM
Post #3


Member
***

Group: Members
Posts: 32
Joined: 1-September 10
Member No.: 12,636
QUOTE(Christian J @ Jan 5 2011, 03:31 PM) *

QUOTE(TheHeist @ Jan 5 2011, 09:04 PM) *

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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
TheHeist
post 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>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Jan 6 2011, 05:28 PM
Post #5


.
********

Group: WDG Moderators
Posts: 9,653
Joined: 10-August 06
Member No.: 7
QUOTE(TheHeist @ Jan 6 2011, 09:38 PM) *

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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
TheHeist
post 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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
TheHeist
post 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?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
TheHeist
post 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>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Jan 7 2011, 07:42 AM
Post #9


.
********

Group: WDG Moderators
Posts: 9,653
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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
« Next Oldest · Server-side Scripting · Next Newest »
 

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 

Display Mode: Standard · Switch to: Linear+ · Switch to: Outline

Track this topic · Email this topic · Print this topic · Subscribe to this forum

- Lo-Fi Version Time is now: 19th April 2024 - 10:09 PM
Invision Power Board © 2024  IPS, Inc.
Licensed to: HTMLHelp.com, LLC