need help with auto load of listbox contents without page refresh or button

[angelicdevil]

i have 2 tables 1 is status_type with field name status and other is users with field username and status

now i want that the first listbox lists all status from status type ( this i have achieved with php )

and based on selection of the value in listbox 1 the corresponding data in table users be loaded in listbox 2 .

i have achieved this by using a button in php but i want tht it operate without submit button and no page refreshing

something like whats shown in http://www.plus2net.com/php_tutorial/dd.php i donno javascript so cant figure out wat and where to make the changes

here is my code which works with a submit button in php...plz help me out

 
<?php
//------------------------------------------------------------
// Part 1: Choosing a Status
//============================================================
 
// Initializes a list of acceptable statuses
$status_list = array();
 
$query_status = " SELECT status_type.status from status_type ";
 
       $result_status = mysql_query($query_status);
        confirm_query($result_status);
 
 
 
        $status_list[]=" ";
  while ($record = mysql_fetch_assoc($result_status)) {
          $status_list[] = $record['status'] ;
 
        }
$status = $_GET['status'];
 
 
 
// A form for choosing the status
?>
<form method="get" action="<?php echo $_SERVER['SCRIPT_NAME']; ?>">
    <input type="submit" value="Search for status:" />
    <select name="status" >
        <?php
 
        // Loops through the $status_list array
         foreach ($status_list as $value => $option)
        {
            // Sets an attribute to show the chosen status as selected
            $selected = ($status == $value) ? ' selected="selected"' : '';
           //$status = (isset($_get['status'])) ? $_get['status'] : "";
 
            // Builds an option for each acceptable status
           echo '<option value="'.$value.'"'.$selected.'>'.$option.'</option>';
           // echo '<option value="'.$value.'"'.$status.'>'.$option.'</option>';
        }
        ?>
    </select>
</form>
 
<?php
//------------------------------------------------------------
// Part 2: Using the Chosen Status to Search the Database
//============================================================
 
// Initializes an empty array of usernames
$usernames = array();
 
// Builds a query to get the names of users with a certain status
$query = "SELECT username FROM users WHERE users.status = '{$status_list[$status]}'";
 
// Executes the query and stores the returned resource in $result
$result = mysql_query($query);
 
// If $result is a resource instead of FALSE...
if ($result)
{
    // Fetches a row until there are no more rows to fetch
    while ($row = mysql_fetch_assoc($result))
    {
        // Stores the username from the fetched row in the $usernames array
        $usernames[] = $row['username'];
    }
}
 
 
//------------------------------------------------------------
// Part 5: Building a List of Usernames
//============================================================
 
// If there are some usernames in the array...
if (count($usernames) > 0)
{
    ?>
 
    <ul>
    <td><select name="users" maxlength="23" >
        <?php
        // Loops through the list of usernames
        foreach ($usernames as $name )
        {
            // Builds a list item for each username
            echo '<option>'.$name.'</option>';
        }
        ?>
 
        </select> </td>
 
    </ul>
    <?php
}
else
{
    ?>
    <td><select name="users" maxlength="23" type="multiple">
               <?
               echo '<option>'." ".'</option>'; ?>
 
 
    <?php
}
?>
 

[acoder]

There's at least two ways in which you could do this:
1. Loading all the data on page load (using PHP to generate JavaScript code) and then using JavaScript to populate the list box.
2. Using Ajax- call a PHP script which returns the options and set the select to that.

Which do you prefer?

[angelicdevil]

the first one sounds like wat i mentioned

[acoder]

So, using PHP, generate something like this (assuming status type is a number):

var status = [];
status[0] = ['joe','ann','user','and so on'];
status[1] = ['some','more','users'];

then onchange (first select), empty the list box and then loop over the corresponding array to populate the contents, e.g.

selObj.options[i] = new Option(status[currStatus][i], status[currStatus][i]);

where currStatus is the currently selected status.

[angelicdevil]

acoder i m a newbie in this and hence slightly lost when u said tht part abt onchange....btw the status is not nos. its variable like ban pending ....so what shud my code line be exactly ? and where shud i put it in?

[angelicdevil]

u want me to put the onchange in select for users or select for status?

[omerbutt]

@angelicdevil
the onchange property in the select menu will let you call a javascript function which will be making an ajax call to a php script which will browse all the users from the data base regarding the status or whatever you are tying to view
did you get that or not ?
regards,
omer aslam

[acoder]

Based on what you've said earlier, it'd be status:

<select id="status" onchange="changeUsers()">

where changeUsers is the function that changes the second select (users).

[angelicdevil]

thanx acoder but what is changeUser() function...what is tht code ?

[acoder]

That was just an example function name. You can name the function whatever you want.

[angelicdevil]

no i m asking wat shud be there in tht function ... its code

[acoder]

As I mentioned earlier (quoted for reference) @acoder
you need to empty the list box (select) element (the users one). You can set the length of options to 0 or null. Then use a loop (e.g. for) to loop over the array for the correct status. See what you can manage from that.

[angelicdevil]

this is wat i did still not working and giving parse error at 122

 
<?php require_once("d:/wamp/www/php_lucky/includes/session.php"); ?>
<?php require_once("d:/wamp/www/php_lucky/includes/connection.php"); ?>
<?php require_once("d:/wamp/www/php_lucky/includes/functions.php"); ?>
<?php require_once("d:/wamp/www/php_lucky/includes/form_functions.php"); ?>
 
<?php
//------------------------------------------------------------
// Part 1: Choosing a Status
//============================================================
 
// Initializes a list of acceptable statuses
$status_list = array();
 
$query_status = " SELECT status_type.status from status_type ";
 
       $result_status = mysql_query($query_status);
        confirm_query($result_status);
 
 
 
        $status_list[]=" ";
  while ($record = mysql_fetch_assoc($result_status)) {
          $status_list[] = $record['status'] ;
 
        }
$status = $_GET['status'];
 
 
 
// A form for choosing the status
?>
<form method="get" action="<?php echo $_SERVER['SCRIPT_NAME']; ?>">
 
    <select name="status" onchange="changeUsers()">
        <?php
 
        // Loops through the $status_list array
         foreach ($status_list as $value => $option)
        {
            // Sets an attribute to show the chosen status as selected
            $selected = ($status == $value) ? ' selected="selected"' : '';
 
 
            // Builds an option for each acceptable status
           echo '<option value="'.$value.'"'.$selected.'>'.$option.'</option>';
 
        }
 
 
 
        ?>
    </select>
 
 
</form>
 
<?php
//------------------------------------------------------------
// Part 2: Using the Chosen Status to Search the Database
//============================================================
 
// Initializes an empty array of usernames
$usernames = array();
 
// Builds a query to get the names of users with a certain status
$query = "SELECT username FROM users WHERE users.status = '{$status_list[$status]}'";
 
// Executes the query and stores the returned resource in $result
$result = mysql_query($query);
 
// If $result is a resource instead of FALSE...
if ($result)
{
    // Fetches a row until there are no more rows to fetch
    while ($row = mysql_fetch_assoc($result))
    {
        // Stores the username from the fetched row in the $usernames array
        $usernames[] = $row['username'];
    }
}
 
 
//------------------------------------------------------------
// Part 5: Building a List of Usernames
//============================================================
 
// If there are some usernames in the array...
if (count($usernames) > 0)
{
    ?>
 
    <ul>
    <td><select name="users" maxlength="23" >
        <?php
        // Loops through the list of usernames
        foreach ($usernames as $name )
        {
            // Builds a list item for each username
            echo '<option>'.$name.'</option>';
        }
        ?>
 
        </select> </td>
 
    </ul>
    <?php
}
else
{
    ?>
    <td><select name="users" maxlength="23" type="multiple">
               <?
               echo '<option>'." ".'</option>'; ?>
 
 
}
 
<? 
function changeUsers(){
selObj.options[i] = new Option(status[currStatus][i], status[currStatus][i]);
}
?>
 
 

[acoder]

That's because you haven't defined selObj and the status array, etc.

Before you do sort that out, you need to define a data structure to hold the data. An array would be easiest for you. Use PHP to generate it, e.g.

var status = [];
// generated by PHP
status["astatus"] = ["some","user","names"];

[acoder]

Just to add (to make things easier), the steps that you need to take to get a working solution:
1. Set up a data structure containing all the data (see previous post - an array should work well).
2. Define a function to be called onchange - done.
3. In that function, access the users list box and remove all options.
4. Then get the selected option value from the status list box.
5. Use that to get the corresponding array (values) in the status array.
6. Finally, use a loop to loop over the array and add options one by one (the line you have in changeUsers currently).

[angelicdevil]

but i need the users list to populate other fields so wont i need the option value for users?

also the status has been defined in the status_list ...its being populated with data from database

[acoder]

...which is why you populate it again with the new options (point 6).

[angelicdevil]

i m feeling lost ...guess i'll try again.

[acoder]

@angelicdevil
But that's a PHP variable - JavaScript can't see it. You need to generate JavaScript using PHP code, e.g.

<script type="text/javascript">
var status = [];
<?php
  while (...) {
      echo "status['".$status[$i]."'] = [...];";
  }
?>

[acoder]

@angelicdevil
Which part do you not understand?

[angelicdevil]

u mean the select options for users and status should be populated in javascript itself?

[angelicdevil]

ok this is wat i did still not orking....can u make the changes and post it....i cant seem to figure it out.

<?php
// Choosing a Status
    $status_list = array();
 
    $query_status = " SELECT status_type.status from status_type ";
 
        $result_status = mysql_query($query_status);
        confirm_query($result_status);
 
 
        $status_list[]=" ";
        while ($record = mysql_fetch_assoc($result_status)) {
        $status_list[] = $record['status'] ;
 
        }
$status = $_GET['status'];
 
?>
 
<form method="get" action="<?php echo $_SERVER['SCRIPT_NAME']; ?>">
 
    <select name="status" onchange="changeUsers()">
<script type="text/javascript">
<?php
 
// displaying status
foreach ($status_list as $value => $option)
        {
$selected = ($status == $value) ? ' selected="selected"' : '';
 echo '<option value="'.$value.'"'.$selected.'>'.$option.'</option>';
 }
 
?>
  </select>
 
</form>
 
<?php
// Part 2: Using the Chosen Status to Search the Database
$usernames = array();
$query = "SELECT username FROM users WHERE users.status = '{$status_list[$status]}'";
$result = mysql_query($query);
if ($result)
{
    // Fetches a row until there are no more rows to fetch
    while ($row = mysql_fetch_assoc($result))
    {
        // Stores the username from the fetched row in the $usernames array
        $usernames[] = $row['username'];
    }
}
if (count($usernames) > 0)
{
    ?>
 
    <ul>
    <td><select name="users" maxlength="23" >
        <?php
        // Loops through the list of usernames
        foreach ($usernames as $name )
        {
            // Builds a list item for each username
            echo '<option>'.$name.'</option>';
        }
        ?>
 
        </select> </td>
 
    </ul>
    <?php
}
else
{
    ?>
    <td><select name="users" maxlength="23" type="multiple">
               <?
               echo '<option>'." ".'</option>'; ?>
 
 
}
 
<? 
function changeUsers(){
selObj.options[i] = new Option(status_list[currStatus][i], status_list[currStatus][i]);
}
?>
 

[acoder]

@angelicdevil
Initially, the default options would be populated using PHP and subsequent options (for users) would be populated using JavaScript.

[acoder]

@angelicdevil
On line 23, remove the script tag. The function changeUser needs to be within script tags. You still haven't added PHP code to generate the JavaScript array to store the data. For that, you will need a query which lists the users by status.

[angelicdevil]

damn i m just not able to get it to work!!!!! acoder please cud u make the neccessary changes and post it so i know where the hell i m messing it up big time.

thanx in advance

[acoder]

Well, I could have done that in the very first reply, but that wouldn't really help. I've been trying to show you the steps, so that I can help you figure it out.

However, this calls for a simple example:

<html>
<head>
<script type="text/javascript">
var statuses = [];
statuses[0] = ["some","user","names"];
statuses[1] = ["some2","user2","names2"];
statuses[2] = ["some3","user3","names3"];
function changeUsers() {
  var users = document.getElementById("users");
  var status = document.getElementById("status").selectedIndex;
  users.options.length = 0;
  userArr = statuses[status];
  for (i = 0; i < userArr.length; i++) {
    users.options[i] = new Option(userArr[i],userArr[i]);
  }
}
</script>
</head>
<body>
<form>
<select id="status" onchange="changeUsers()">
 <option value="0">test</option>
 <option value="1">test2</option>
 <option value="2">test3</option>
</select>
<select id="users">
</select>
</form>
</body>
</html>

Now you just need to adapt this to your requirements.

[angelicdevil]

ok this is wat i did but now i m getting parse error. on line 128

<script type="text/javascript">
 
 
$status_list = array();
 
$query_status = " SELECT status_type.status from status_type ";
 
       $result_status = mysql_query($query_status);
        confirm_query($result_status);
 
 
 
        $status_list[]=" ";
  while ($record = mysql_fetch_assoc($result_status)) {
          $status_list[] = $record['status'] ;
 
        }
function changeUsers() {
  var users = document.getElementById("users");
  var status = document.getElementById("status").selectedIndex;
  users.options.length = 0;
  userArr = status_list[status];
  for (i = 0; i < userArr.length; i++) {
    users.options[i] = new Option(userArr[i],userArr[i]);
  }
}
</script>
<body>
<?php
//------------------------------------------------------------
// Part 1: Choosing a Status
//============================================================
 
// Initializes a list of acceptable status_list
 
$status = $_GET['status'];
 
 
 
// A form for choosing the status
?>
<form method="get" action="<?php echo $_SERVER['SCRIPT_NAME']; ?>">
 
    <select name="status" onchange="changeUsers()">
        <?php
 
        // Loops through the $status_list array
         foreach ($status_list as $value => $option)
        {
            // Sets an attribute to show the chosen status as selected
            $selected = ($status == $value) ? ' selected="selected"' : '';
 
 
            // Builds an option for each acceptable status
           echo '<option value="'.$value.'"'.$selected.'>'.$option.'</option>';
 
        }
 
 
 
        ?>
    </select>
 
 
</form>
 
<?php
//------------------------------------------------------------
// Part 2: Using the Chosen Status to Search the Database
//============================================================
 
// Initializes an empty array of usernames
$usernames = array();
 
// Builds a query to get the names of users with a certain status
$query = "SELECT username FROM users WHERE users.status = '{$status_list[$status]}'";
 
// Executes the query and stores the returned resource in $result
$result = mysql_query($query);
 
// If $result is a resource instead of FALSE...
if ($result)
{
    // Fetches a row until there are no more rows to fetch
    while ($row = mysql_fetch_assoc($result))
    {
        // Stores the username from the fetched row in the $usernames array
        $usernames[] = $row['username'];
    }
}
 
 
//------------------------------------------------------------
// Part 5: Building a List of Usernames
//============================================================
 
// If there are some usernames in the array...
if (count($usernames) > 0)
{
    ?>
 
    <ul>
    <td><select name="users" maxlength="23" >
        <?php
        // Loops through the list of usernames
        foreach ($usernames as $name )
        {
            // Builds a list item for each username
            echo '<option>'.$name.'</option>';
        }
        ?>
 
        </select> </td>
 
    </ul>
  <?
}
else
{
    ?>
    <td><select name="users" maxlength="23" type="multiple">
               <?php
               echo '<option>'." ".'</option>'; ?>
 
<?   
}
?>
 
</body>
 

[angelicdevil]

i checked again and again cant seem o get it to work...please see if i have coded it right and can correct it too?

[Dormilich]

if you don't have short tags enabled, replace <? by <?php (lines 116, 125)

[acoder]

The code that you have from lines 4 to 17 is PHP code, but it's not within PHP tags. I think you meant to create the JavaScript arrays, but you need to echo it out onto the page. The syntax needs to be correct too. Look at the example. Did you try it out? Now the PHP code (when you check the source on the client) should produce something similar.

[angelicdevil]

hi i found a code on net which does wat i want ...i tried to modify it to fit my needs but its not working as i want it to ....could be please check....

dd.php

<?php
 
$dbservertype='mysql';
$servername='localhost';
// username and password to log onto db server
$dbusername='lucky';
$dbpassword='lucky';
// name of database
$dbname='stockphotos';
 
 
////// DO NOT EDIT BELOW  /////////
 
connecttodb($servername,$dbname,$dbusername,$dbpassword);
function connecttodb($servername,$dbname,$dbuser,$dbpassword)
{
global $link;
$link=mysql_connect ("$servername","$dbuser","$dbpassword");
if(!$link){die("Could not connect to MySQL");}
mysql_select_db("$dbname",$link) or die ("could not open db".mysql_error());
}
//////// End of connecting to database ////////
?>
 
 
 
<html>
 
<head>
<title>Multiple drop down list box </title>
<SCRIPT language=JavaScript>
function reload(form)
{
var val=form.cat.options[form.cat.options.selectedIndex].value;
self.location='dd.php?cat=' + val ;
}
 
</script>
</head>
 
<body>
<?
 
@$cat=$_GET['cat']; // Use this line or below line if register_global is off
if(!is_numeric($cat)){ // to check if $cat is numeric data or not. 
echo "Data Error";
exit;
}
 
// Getting the data from Mysql table for first list box//////////
$query_usernamey_status=mysql_query("SELECT status,status_name FROM status_type "); 
// End of query for first list box////////////
 
// for second drop down list we will check if category is selected else we will display all the subcategory///// 
if(isset($cat) and strlen($cat) > 0){
$query_username=mysql_query("SELECT username FROM users WHERE status=$cat "); 
} 
// end of query for second subcategory drop down list box ///////////////////////////
 
echo "<form method=post name=f1 action='dd-check.php'>";
// Add your form processing page address to action in above line. Example  action=dd-check.php////
 
//        Starting of first drop downlist /////////
echo "<select name='cat' onchange=\"reload(this.form)\"><option value=''>Select one</option>";
while($record1 = mysql_fetch_array($query_usernamey_status)) { 
if($record1['status']==@$cat){echo "<option selected value='$record1[status]'>$record1[status_name]</option>"."<BR>";}
else{echo  "<option value='$record1[status]'>$record1[status_name]</option>";}
}
echo "</select>";
//  This will end the first drop down list ///////////
 
 
//        Starting of second drop downlist /////////
echo "<select name='subcat'><option value=''>Select one</option>";
while($record2 = mysql_fetch_array($query_username)) { 
echo  "<option value='$record2[username]'>$record2[username]</option>";
}
echo "</select>";
//  This will end the second drop down list ///////////
 
// Add your other form fields as needed here/////
echo "<input type=submit value=Submit>";
echo "</form>";
?>
<center></center> 
</body>
 
</html>
 

dd-check.php

 
<html>
 
<head>
<title> Multiple drop down list box </title>
<meta name="GENERATOR" content="Arachnophilia 4.0">
<meta name="FORMATTER" content="Arachnophilia 4.0">
</head>
 
<body>
<?
$cat=$_POST['cat'];
$subcat=$_POST['subcat'];
 
echo "Value of \$cat = $cat <br>Value of \$subcat = $subcat ";
 
 
?>
<center>
 
</center> 
</body>
 
</html>
 

plz help

[acoder]

The line:

self.location='dd.php?cat=' + val ;

reloads the page to change the options. I thought you wanted to avoid that. With the code you've posted, the whole approach changes which means you're effectively back to square one.

[angelicdevil]

i m fine with it as long as it loads the values based on selection ...

[angelicdevil]

can u figure out wats going wrong in this new one?

[acoder]

The problem from a cursory glance seems to be in your PHP code, e.g. $record1[status] should be $record['status']. Do you not see any errors?

[angelicdevil]

yes i m getting the error below

0){ $quer=mysql_query("SELECT username FROM users WHERE status=$cat "); } // end of query for second subcategory drop down list box /////////////////////////// echo "
"; // Add your form processing page address to action in above line. Example action=dd-check.php//// // Starting of first drop downlist ///////// echo ""; // This will end the first drop down list /////////// // Starting of second drop downlist ///////// echo ""; // This will end the second drop down list /////////// // Add your other form fields as needed here///// echo ""; echo "
"; ?>

[angelicdevil]

with record or record1 the error is same

[acoder]

That's not an error message: it's code. Maybe the problem is that you're using short tags <? instead of the full PHP opening tag <?php on line 42.

[angelicdevil]

changed it to full tags still same issue

[acoder]

I suggest you post a new thread in the PHP forum because the problem relates to PHP and is no longer relevant to this thread.

[angelicdevil]

wat abt the previous script where i modified as u said.....any thing can be done to make tht work?

[acoder]

Yes, of course. Did you make the changes as suggested in posts #29/30?

[angelicdevil]

yes still they r not working

[acoder]

Let me see the latest version, so we know what we're working off.

[angelicdevil]

<script type="text/javascript">
var statuses = [];
$status_list = array();
<?php
$query_status = " SELECT status_type.status from status_type ";
 
       $result_status = mysql_query($query_status);
        confirm_query($result_status);
 
 
 
        $status_list[]=" ";
  while ($record = mysql_fetch_assoc($result_status)) {
          $status_list[] = $record['status'] ;
 
        }
?>
function changeUsers() {
  var users = document.getElementById("users");
  var status = document.getElementById("status").selectedIndex;
  users.options.length = 0;
  userArr = statuses[status];
  for (i = 0; i < userArr.length; i++) {
    users.options[i] = new Option(userArr[i],userArr[i]);
  }
}
</script>
<?php
//------------------------------------------------------------
// Part 1: Choosing a Status
//============================================================
 
// Initializes a list of acceptable statuses
 
$status = $_GET['status'];
 
 
 
// A form for choosing the status
?>
<form method="get" action="<?php echo $_SERVER['SCRIPT_NAME']; ?>">
 
    <select name="status" onchange="changeUsers()">
        <?php
 
        // Loops through the $status_list array
         foreach ($status_list as $value => $option)
        {
            // Sets an attribute to show the chosen status as selected
            $selected = ($status == $value) ? ' selected="selected"' : '';
 
 
            // Builds an option for each acceptable status
           echo '<option value="'.$value.'"'.$selected.'>'.$option.'</option>';
 
        }
 
 
 
        ?>
    </select>
 
 
</form>
 
<?php
//------------------------------------------------------------
// Part 2: Using the Chosen Status to Search the Database
//============================================================
 
// Initializes an empty array of usernames
$usernames = array();
 
// Builds a query to get the names of users with a certain status
$query = "SELECT username FROM users WHERE users.status = '{$status_list[$status]}'";
 
// Executes the query and stores the returned resource in $result
$result = mysql_query($query);
 
// If $result is a resource instead of FALSE...
if ($result)
{
    // Fetches a row until there are no more rows to fetch
    while ($row = mysql_fetch_assoc($result))
    {
        // Stores the username from the fetched row in the $usernames array
        $usernames[] = $row['username'];
    }
}
 
 
//------------------------------------------------------------
// Part 5: Building a List of Usernames
//============================================================
 
// If there are some usernames in the array...
if (count($usernames) > 0)
{
    ?>
 
    <ul>
    <td><select name="users" maxlength="23" >
        <?php
        // Loops through the list of usernames
        foreach ($usernames as $name )
        {
            // Builds a list item for each username
            echo '<option>'.$name.'</option>';
        }
        ?>
 
        </select> </td>
 
    </ul>
 
}
else
{
 
    <td><select name="users" maxlength="23" type="multiple">
               <?
               echo '<option>'." ".'</option>'; ?>
 
 
}
 
 

[acoder]

Put line 3 inside the PHP tags. Your PHP code at the beginning doesn't actually produce any output. It needs to echo out some data. For that, you will need a second query which gets the user names based on each status (see original PHP code). As an example:

while ($record = mysql_fetch_assoc($result_status)) {
    $status_list[] = $record['status'] ;
    $query = "SELECT username FROM users WHERE users.status = '{$record['status']}'";
    $result = mysql_query($query);
    echo "statuses[$i] = [";
    while ($row = mysql_fetch_assoc($result))
    {
        echo $row['username'].",";
    }
    echo "];";
}

I haven't tested this code, but based it on code you already have just to give you an idea.