Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    Regular Coder
    Join Date
    Mar 2005
    Posts
    735
    Thanks
    4
    Thanked 1 Time in 1 Post

    using php/ javascript to repopulate listbox

    I have a combo of 3 listboxes which I would like to repopulate ( the 2nd and the 3rd listboxes ) after the selection of the 1st listbox. I don't understand how the page should refresh itself once selected.

    PHP Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <html>
        <head>
            <title></title>
            <script language="JavaScript" type="text/javascript">
            <!--
                function go(action) {
                
                // set variables pointing to the two forms we need
                var theForm = document.forms["myForm"];
                var otherForm = window.parent.document.forms["myForm"];
                
                // construct the "search" part of the URL from all the elements
                var query = "?Book=" + theForm.Book.options[theForm.Book.selectedIndex].value;
                query += "&Chapter=" + theForm.Chapter.options[theForm.Chapter.selectedIndex].value;
                
                // test to see if a verse has been selected, if not we won't pass the values
                if( theForm.verse.selectedIndex != -1 ) {
                    for( var i=0; i < theForm.verse.options.length; i++ ) {
                        if( theForm.verse.options[i].selected ) {
                            query += "&Verse=" + theForm.verse.options[i].value;
                        }
                    }
                }
                
                query += "&Keyword=" + escape(otherForm.Keyword.value);
                query += "&Keywordb=" + escape(otherForm.Keywordb.value);
                query += "&Keywordc=" + escape(otherForm.Keywordc.value);
                query += "&Keywordd=" + escape(otherForm.Keywordd.value);
                query += "&Keyworde=" + escape(otherForm.Keyworde.value);
                query += "&Keywordf=" + escape(otherForm.Keywordf.value);
                query += "&";
                
                // either redirect this page or the child frame depending on which select was changed
                if(action == "refresh") {
                    location.href = "showbook.php" + query;
                } else {
                    ifrVerse.location.href = "showverse.php" + query;
                }
                
                }
            //-->
            </script>
        </head>
        <body>
            <table border="0" bgcolor="#FFFCDC">
                <td>
                    <form name="myForm" id="myForm" action="showverse.php" method="get" target="ifrVerse">
                        <table border="0" bgcolor="#FFFCDC">
                            <tr>
                                <th align="center" color="white">
                            </tr>
                             <tr>
                                 <th colspan="1" align="center">book</th>
                                 <th colspan="1" align="center">chapter</th>
                             </tr>
                            <tr>
                                <td>
                                     <?php
                                         
    require_once('mysql.php');
    ?>
                        
                        <input type="hidden" name="Keyword" value="" />
                        <input type="hidden" name="Keywordb" value="" />
                        <input type="hidden" name="Keywordc" value="" />
                        <input type="hidden" name="Keywordd" value="" />
                        <input type="hidden" name="Keyworde" value="" />
                        <input type="hidden" name="Keywordf" value="" />

    <?php
                                        $result 
    mysql_query("SELECT DISTINCT book_title, book FROM bible");
                                        
                                        echo 
    "<a name='bcv'><select name='Book' id='Book' size='5' style='width:150px;' onChange=\"go('refresh');\"></a>"."\n";
                                        while(
    $row mysql_fetch_array($result))
                                          {
                                          
                                          echo 
    "<option value='" $row['book'] . "'>";
                                          echo 
    $row['book_title'];
                                          echo 
    "</option>"."\n";
                                          
                                          }
                                        echo 
    "</select>"."\n";
    ?>
                                </td>
                                <td colspan="1" align="center">

    <?php
                                        $book 
    $_GET["Book"];
                                        
    $result mysql_query("SELECT DISTINCT chapter, book FROM bible WHERE book = '" $book "'");
                                        
                                        echo 
    "<select name='Chapter' id='Chapter' size='5' style='width:150px;' onChange=\"go('refresh');\">"."\n";
                                        while(
    $row mysql_fetch_array($result))
                                          {
                                          
                                          echo 
    "<option value='" $row['chapter'] . "'>";
                                          echo 
    $row['chapter'];
                                          echo 
    "</option>"."\n";
                                          
                                          }
                                        echo 
    "</select>"."\n";
                                        
    mysql_close($con);                                    
    ?>
                                </td>
                                </tr>
                                <td colspan="2" align="center">
                                </td>
                        
                        
                            </tr>
                            <tr colspan="2" align="center">
                                <th colspan="3" align="center" color="black">
                                    verse
                                </th>
                            </tr>
                                <td colspan="2" align="center">
                                
                                        <select multiple name="verse" size="5" style="width:120;" onChange="go('update');"> 
                                </td>
                            <tr>
                                <td align="center" colspan="2">
                                    <iframe name="ifrVerse" id="ifrVerse" src="blank.php" style="height:800px; width:250px;border:0;"></iframe>
                                </td>
                            </tr>
                        </table>
                    </form>
                </td>
            </table>
        </body>
    </html>

  • #2
    God Emperor Fou-Lu's Avatar
    Join Date
    Sep 2002
    Location
    Saskatoon, Saskatchewan
    Posts
    16,987
    Thanks
    4
    Thanked 2,660 Times in 2,629 Posts
    This seems like an ajax sort of task.
    There are millions of tutorials on the net for how to implement ajax requests, and you can probably get a lot of information from the js forum here. Essentially the ajax sends a request to the server requesting specific information (in your case, the data to display within the other list boxes), and using javascript you can populate the information into the correct locations.
    Check into ajax, and post back if you need help with it at all, its really simple when you get the hang of it. The best part of it is, a lot of the code you currently have is compatible with the ajax requests, all you need to do is use an ajax send() instead of a window.location! The downside is, you need to capture the results and do something with them.
    Oh, and on a quick sidenote, you can send arrays of data through the uri querystring, you don't need to refer to them as keyword[a...d], you can extract them one at a time if you would like.

    Hope that helps to point you in the right direction!
    PHP Code:
    header('HTTP/1.1 420 Enhance Your Calm'); 

  • #3
    Regular Coder
    Join Date
    Mar 2005
    Posts
    735
    Thanks
    4
    Thanked 1 Time in 1 Post
    Well what I have in mind is to populate a listbox from the database table. I'm using AJAX with php.
    Attached Files Attached Files

  • #4
    Master Coder
    Join Date
    Dec 2007
    Posts
    6,682
    Thanks
    436
    Thanked 890 Times in 879 Posts
    this is a short tutorial about some ajax basic things, I don't know if you need it but just in case.

    http://www.xul.fr/en-xml-ajax.html

    about your question:
    you can use the onchange attribute for the first list to trigger a request to populate the second listbox with a html select generated by a php file where you use your mysql query.
    you can do the same thing for the second listbox but this time you trigger the last listbox.

    I hope this help and I don't confuze you., anyway post your question here.

    best regards
    Last edited by oesxyl; 12-27-2007 at 02:17 AM.

  • #5
    Regular Coder
    Join Date
    Apr 2003
    Location
    Matewan, WV
    Posts
    201
    Thanks
    0
    Thanked 1 Time in 1 Post
    I think he might be talking about something like this?
    http://dynamicdrive.com/dynamicindex...dependency.htm

    If not, apologies.
    <3 CF

  • #6
    Master Coder
    Join Date
    Dec 2007
    Posts
    6,682
    Thanks
    436
    Thanked 890 Times in 879 Posts
    Quote Originally Posted by Meltdown View Post
    I think he might be talking about something like this?
    http://dynamicdrive.com/dynamicindex...dependency.htm
    me too,

    I think that this make somehow clear how can be done:

    in your html file or in a js file you have:
    Code:
       <script type="text/javascript">
        function create_request(){
            var req = false;
            try {
              req = new ActiveXObject('Msxml2.XMLHTTP');
            } catch (e2) {
              try {
                req = new ActiveXObject('Microsoft.XMLHTTP');
              } catch (e3) {
                try {
                  req = new XMLHttpRequest();
                } catch (e1) {
                  req = false;
                }
              }
            }
    	return req;
          }
    
          function first_trigger(){
    
    	req = create_request();
            req.onreadystatechange = function(){
              var c = document.getElementById('cl1');
              if(req.readyState){
                if(req.readyState == 4){
                  if(req.status == 200){
                    c.innerHTML = req.responseText;
                  }
                }
              }
            }
    
    	 var o = document.getElementById('l1');
    	 req.open('POST',"firstfile.php",true);
    	 req.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
    	 req.send('fsv=' + o.value);
          }
    
          function second_trigger(){
    	req = create_request();
    
            req.onreadystatechange = function(){
              var c = document.getElementById('cl2');
              if(req.readyState){
                if(req.readyState == 4){
                  if(req.status == 200){
                    c.innerHTML = req.responseText;
                  }
                }
              }
            }
    
    	 var o = document.getElementById('l2');
    	 req.open('POST',"secondfile.php",true);
    	 req.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
    	 req.send('ssv=' + o.value);
          }
        </script>
    this part in the same html file:
    Code:
        <p>
          <select id="l1" onchange="first_trigger();">
            <option value="1">First of 1st</option>
            <option value="2">Second of 1st</option>
          </select>
        </p>
        <p id="cl1"></p>
        <p id="cl2"></p>
    and this is the content of firstfile.php:
    PHP Code:
    <?php
    // used to trace $_POST values
    // print_r($_POST);

    /* - process the paramaters passed in $_POST
     * - query data form mysql for the second listbox
     * - generate the html select
     *
     * id must be 'l2" see javascript function first_trigger
     * onchange must be "second_trigger();"
     */
    print '<select id="l2" onchange="second_trigger();">
            <option value="1">First of 2st</option>
            <option value="2">Second of 2st</option>
          </select>'
    ;

    ?>
    I hope this is more clear as my english,

    sorry about identation

    best regards
    Last edited by oesxyl; 12-27-2007 at 05:20 AM.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •