Go Back   CodingForums.com > :: Client side development > JavaScript programming > Ajax and Design

Before you post, read our: Rules & Posting Guidelines

Reply
 
Thread Tools Rate Thread
Enjoy an ad free experience by logging in. Not a member yet? Register.
Old 10-07-2008, 12:10 AM   PM User | #1
CoolAsCarlito
Regular Coder

 
Join Date: Jun 2008
Posts: 679
Thanks: 114
Thanked 2 Times in 2 Posts
CoolAsCarlito can only hope to improve
Muliple Select Boxes

One a user selects an option out of the first select box I want it to take that type back to the database and match it with all the show names with that type and then place all show names in that second select box. How is this done? And is my coding right so far?

PHP Code:
<?php

/* setupshow.php */

/* This form after submission takes the results of the form and makes a new show ready for adding matches. */

require ('database.php');

echo 
'<form action="setupshow.php" method="post">';

echo 
'<fieldset>';
echo 
'<legend>Enter the following information to setup a show:</legend>';
echo 
'<p>Weekly Show or Pay-Per View:<select name="type"><option value="">Select a Show Type</option>';
                  
$query 'SELECT type FROM shows';
                
$result mysql_query($query);
            while (
$row mysql_fetch_assoc($result)){
                    echo 
"<option value=\"{$row['type']}\">{$row['type']}</option>\r";
                }            
echo 
'</select></p>';
echo 
'<p>Show Name:<select name="showname"><option value="">Select a Show Name</option>';
$query2 'SELECT showname FROM shows';
                
$result2 mysql_query($query2);
            while (
$row mysql_fetch_assoc($result)){
                    echo 
"<option value=\"{$row['showname']}\">{$row['showname']}</option>\r";
                }            
echo 
'</select></p>';
echo 
'<p>Show Label:<input name="showlabel" type="text" readonly="true" size="5"></p>';
echo 
'<p>Location:<input name="location" type="text"></p>';
echo 
'<p>Arena:<input name="arena" type="text"></p>';
echo 
'<div align="center"><input name="submit" type="submit"><input name="sumbitted" type="hidden" value="TRUE"></div>';
echo 
'</fieldset>';

echo 
'</form>';

?>
CoolAsCarlito is offline   Reply With Quote
Old 10-07-2008, 03:50 PM   PM User | #2
ohgod
Regular Coder

 
ohgod's Avatar
 
Join Date: Jun 2008
Location: Ohio
Posts: 579
Thanks: 6
Thanked 69 Times in 69 Posts
ohgod is on a distinguished road
in your first dropdown you'll want an onChange event to fire an ajax request to take the result from the first dropdown and query for the second, returning with it.


i don't see anything in your code to even start with that.
ohgod is offline   Reply With Quote
Old 10-07-2008, 08:59 PM   PM User | #3
CoolAsCarlito
Regular Coder

 
Join Date: Jun 2008
Posts: 679
Thanks: 114
Thanked 2 Times in 2 Posts
CoolAsCarlito can only hope to improve
What do you mean you dn't see anything in my code to even start with that?

Quote:
Originally Posted by ohgod View Post
in your first dropdown you'll want an onChange event to fire an ajax request to take the result from the first dropdown and query for the second, returning with it.


i don't see anything in your code to even start with that.
CoolAsCarlito is offline   Reply With Quote
Old 10-07-2008, 09:08 PM   PM User | #4
ohgod
Regular Coder

 
ohgod's Avatar
 
Join Date: Jun 2008
Location: Ohio
Posts: 579
Thanks: 6
Thanked 69 Times in 69 Posts
ohgod is on a distinguished road
show me an onChange in that code or the base for an ajax request


unless somehow i've misinterpreted what you're actually looking for i'm saying all you have right there is a php page.
ohgod is offline   Reply With Quote
Old 10-07-2008, 09:24 PM   PM User | #5
CoolAsCarlito
Regular Coder

 
Join Date: Jun 2008
Posts: 679
Thanks: 114
Thanked 2 Times in 2 Posts
CoolAsCarlito can only hope to improve
Oh I"m sorry I don't have it on there I didn't know what I needed to do to my page to achieve the results I wanted.

Quote:
Originally Posted by ohgod View Post
show me an onChange in that code or the base for an ajax request


unless somehow i've misinterpreted what you're actually looking for i'm saying all you have right there is a php page.
CoolAsCarlito is offline   Reply With Quote
Old 10-08-2008, 01:01 AM   PM User | #6
CoolAsCarlito
Regular Coder

 
Join Date: Jun 2008
Posts: 679
Thanks: 114
Thanked 2 Times in 2 Posts
CoolAsCarlito can only hope to improve
Okay so I've done some modification. Can you tell me why its not loading the show names.

This is my updated php script.
PHP Code:
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
try
{
if (window.XMLHttpRequest) // firefox
reqsend = new XMLHttpRequest(); // create object for ff and other browsers
else // IE 5.0+
reqsend = new ActiveXObject("Microsoft.XMLHTTP");
}
catch(e){};

function getNames(typed)
{
  var created = "option";
  var i = 0;
try
{
  reqsend.open("POST", "getNames.php", true);
  var stuff = "type=" + typed;
  reqsend.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); // need for POST
  reqsend.setRequestHeader("Content-Length", stuff.length);
  reqsend.send(stuff); // actual send

  reqsend.onreadystatechange = function()
  {
    if (reqsend.readyState == 4 && reqsend.status == 200)
    {
      var name = reqsend.responseXML.getElementsByTagName("name");
      for(i=0; i<name.length; i++)
      {
        var opts = document.getElementById('names');
        var newopt = document.createElement(created);
        opts.appendChild(newopt);
        newopt.innerHTML = name[i].childNodes[0].nodeValue;
      }
    }
  };
}
catch(e){};
}
</script>
</head>

<body>
<?php

/* setupshow.php */

/* This form after submission takes the results of the form and makes a new show ready for adding matches. */

require ('database.php');

echo 
'<form action="setupshow.php" method="post">';

echo 
'<fieldset>';
echo 
'<legend>Enter the following information to setup a show:</legend>';
echo 
'<p>Weekly Show or Pay-Per View:<select name="type"><option value="">Select a Show Type</option>';
                  
$query 'SELECT type FROM shows';
                
$result mysql_query($query);
            while (
$row mysql_fetch_assoc($result)){
                    echo 
"<option value=\"{$row['type']}\">{$row['type']}</option>\r";
                }            
echo 
'</select></p>';
echo 
"<select id=\"names\"</select>";
echo 
'<p>Show Label:<input name="showlabel" type="text" readonly="true" size="5"></p>';
echo 
'<p>Location:<input name="location" type="text"></p>';
echo 
'<p>Arena:<input name="arena" type="text"></p>';
echo 
'<div align="center"><input name="submit" type="submit" value="Submit"><input name="sumbitted" type="hidden" value="TRUE"></div>';
echo 
'</fieldset>';

echo 
'</form>';

?> 
</body>
</html>
This is the getNames.php script.
PHP Code:
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<body>
<?php
if(isset($_POST['type']) && !empty($_POST['type']))
{
require (
'database.php');

$type mysql_real_escape_string($_POST['type']);

$sql "SELECT * FROM shows WHERE type='$type'";
$result mysql_query($sql);


header("Content-Type: text/xml");
echo 
"<all>";
while( 
$data mysql_fetch_assoc($result))
{
echo 
$data['showname'];
}
echo 
"</all>";

mysql_close();
}
?>
</body>
</html>
CoolAsCarlito is offline   Reply With Quote
Old 10-08-2008, 04:31 PM   PM User | #7
ohgod
Regular Coder

 
ohgod's Avatar
 
Join Date: Jun 2008
Location: Ohio
Posts: 579
Thanks: 6
Thanked 69 Times in 69 Posts
ohgod is on a distinguished road
let's back up a bit and look at the flow you'll want.

you're going to end up with 2 pages, a display php page and a processor php page. on the display page your dropdowns and all other information will live. on the proc page there will be nothing but a database call and an echo or return of some sort.

so, your first dropdown will have a javascript onchange event in it. it will call your ajax function on your display page. upon it being called you should basically set it up to pull the selected value and send it to the proc page. the proc page will take that value, run a query based on that condition, build the contents of the next dropdown and send it back. the ajax function on your display page will catch what the proc sends. from there it's a matter of inserting that code into your page with js.

it sounds like you need to get a better feel for the flow of ajax before trying to code it. i'm not trying to sound condescending, lord knows i'm no pro. heck, as often as not i go the lazy route and use a framework because it has updater functions pre built.
ohgod is offline   Reply With Quote
Reply

Bookmarks

Jump To Top of Thread


Thread Tools
Rate This Thread
Rate This Thread:

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT +1. The time now is 12:19 AM.


Advertisement
Log in to turn off these ads.