Chaining dynamic Select/Option boxes together

Hi,

I have a directory with several databases each containing multiple tables. I am trying to create a program where Select/Options boxes are utilized to 1. Pick one database from several options. 2. Pick one table from several options produced from the selection in 1. and 3. Send the final database and table to the Server via AJAX in order to query the database.

To implement 1. I use PHP to select databases from a directory. I dynamically create a form containing the first Select/Options box. This works fine. 2. I select a database and send it to the server via AJAX this works fine. I get the Tables returned and a Select/Options box is created ONLY if I don't try and enclose the S/O box with <form> tags. Everything goes to hell if I do that. How do I pick an option from the second Select/Option box?

Here is my code:<?php

error_reporting (E_ALL ^ E_NOTICE);
ini_set("display_errors", true);
error_reporting (E_ALL ^ E_NOTICE);
include("../myPhpFunctions.inc");          // contains lf();   sp(); myprint; check_input();
                                           // shows   break   space   print_r on browser
$orgdir=getcwd();
$dir="/home/rick/DB-sql/";
$rows=$files=array();

// =====================================================
// change to working directory where the databases are and get the *.db files
// =====================================================

chdir($dir);

// get the available db file names

if (is_dir($dir)){
if ($dh = opendir($dir)){                        // open dir and read contents
    while (($file = readdir($dh)) !== false){
           if(substr($file, -2)=="db") {
               $files[]=$file;
           }
       }
   }
}
    closedir($dh);
// ==================== HTML =================================
?>

<!DOCTYPE HTML>

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />

<title> Renovation and Maintenance Log 03Jan2010</title>



<link rel="stylesheet " type="text/css" href="../css/renoAZID.css" />



   <script type="text/javascript" src="../jquery-2.1.4.js"></script>

</head>



<body>

<div class="header">
      <h3><img src="../images/AmericanFlag2.png" alt="Company logo" height="90px" /> Renovation &amp Maintainance Log
      <h4>Choose a Database and Table to Query</h4></h3>
      <p><b>Choose a Database</b></p>
</div>

<div class="dbForm">
<form name="dbForm" id="dbForm" action="" method="post">


<select id="database" name="database" size="5">

<?php
   foreach($files as $file) {
       echo "<option value=".$file.">".$file."</option>".lf();
   } // foreach
?>

</select>

<p><input type="submit" id="sub" name="submit" value="Choose Database" /></p>
</form>
<br />
</div>

<div class="results" id="result" >

</div>

<script type="text/javascript" >
$(document).ready(function(){

var table="";
var database="";

    $('#dbForm').submit(function (e) {
           database=$("#database option:selected").text();
         e.preventDefault();

var request = $.ajax({
    url: "getTblInfo.php",
    type: "POST",
    data: {"database":database},
    dataType: "json"
});

     request.done(getAvailableTable );
     request.fail(showError);

   <form name="tblForm" id="tblForm" action="" method="post"> // This doesn't work MSG:             //   "Sending request to XXX"   flashes on the screen and disappears from view leaving    //    blank screen. If <form> tags not used the Select/Option box is created fine but then there //   is no way to pick and Option!!!

            function getAvailableTable(data) {

               $("div.results").append('<p><b>Choose a Database Table</b></p>');
               $("div.results").append('<select id="tblbx" name="tables" size="5">');
                 $.each(data, function (index, value) {
                     $.each(value, function (a, b) {
                           if (b=='sqlite_sequence') {
                               return false;
                           }
                        $("#tblbx").append('<option value='+b+'>'+b+'</option><br />');
                       });
               $("div.results").append("</select>");

                   });

            } // getAvail
       <p><input type="submit" id="sub2" name="sub2" value="Choose Table" /></p>
</form>
          function showError( jqXHR, textStatus ) {
                console.log('An error occurred Idiot.');
                alert(textStatus);
                //console.log(data);
            }

     }); // frm.submit

/*
    $('#tblForm').submit(function (e) {
       table=$("#tblbx option:selected").text();
        e.preventDefault();

              getRenovationData(database, table );
     })
*/

}) //ready
</script>

<script type="text/javascript" >

$(document).ready(function(){

   function getRenovationData(dbase, tbl) {

      alert("database and table chosen "+dbase+"&nbsp:&nbsp"+tbl);



   }

});

</script>

</body>
</html>

<?php

chdir($orgdir);

?>

Topic Participants
pizzipie
jakecigar

Chaining dynamic Select/Option boxes together

Chaining dynamic Select/Option boxes together

Topic Participants

pizzipie

jakecigar