SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member
    Join Date
    Jul 2010
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    PHP/Javascript -Selecting a dropdown item should dynamically display another dropdown

    I have code for autosuggestion while typing in a text box written in Javascript and PHP. When I start typing a number I get a list of matching numbers and I'm able to select one of them with the mouse click. Now I have an other text box which should display a list of numbers based on the selection from the first textbox. I have no clue on how to do this. It would be great if you provide me with the sample code for the same. Please help me out.

    Thanks

  2. #2
    SitePoint Member
    Join Date
    Apr 2010
    Posts
    21
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Some more information, and possibly some example code might help us be more useful. Based on your description I would probably try using an onChange event from the first input to trigger behavior for the second input.

  3. #3
    SitePoint Member
    Join Date
    Jul 2010
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by benzittlau View Post
    Some more information, and possibly some example code might help us be more useful. Based on your description I would probably try using an onChange event from the first input to trigger behavior for the second input.

    This is the Html code that I have written and the tech number will be the autosuggest field for which I have used JQUERY.....

    Code HTML4Strict:
    <html xmlns="http://www.w3.org/1999/xhtml">
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
            <title>Closeout Screen</title>
     
    <script type="text/javascript" src="jquery-1.2.1.pack.js"></script>
    <script type="text/javascript">
         function suggest(inputString){
    		if(inputString.length == 0) {
    			$('#suggestions').fadeOut();
    		} else {
    		$('#tech').addClass('load');
    			$.post("rpc.php", {queryString: ""+inputString+""}, function(data){
    				if(data.length >0) {
    					$('#suggestions').fadeIn();
    					$('#suggestionsList').html(data);
    					$('#tech').removeClass('load');
    				}
    			});
    		}
    	}
     
    	function fill(thisValue) {
    		$('#tech').val(thisValue);
                    //$('#suggestions').hide();
    		setTimeout("$('#suggestions').fadeOut();");
    	}
     
    </script>
     
    <style>
    ........
    ........
    </style>
        </head>
     
    <body>
     
    <form action="<?php echo $_SERVER['PHP_SELF'];?>" method="POST">
     
    <table width="300" height="100" border="0" cellpadding="0" cellspacing="0">
        <tr>
            <td>
                <div id="suggest" align="left">Tech ID:
                    <input type="text" size="4" name="tech" id="tech" value="" maxlength="4" onkeyup="suggest(this.value)" onblur="fill()" onchange="jobDropDown(this)" class="" />
                  <div class="suggestionsBox" id="suggestions" style="display: none;">
                  <img src="arrow.png" style="position: relative; top: -12px; left: 30px;" alt="upArrow" />
                    <div class="suggestionList" id="suggestionsList"> </div>
                </div>
                </div></td>
            <td>Job Number: <input type="text" name="Job" id="Job" maxlength="6" value=""/></td>
            <td><input type="submit" name="search" id="search" value="Search"/></td>
        </tr>
    </table>
    </form>
    </body>
    </html>


    The database connection code :

    Code PHP:
    <?php
       $db = new mysqli('localhost', 'root' ,'', 'Technician');
     
    	if(!$db) {
     
    		echo 'Could not connect to the database.';
    	} else {
     
    		if(isset($_POST['queryString'])) {
    			$queryString = $db->real_escape_string($_POST['queryString']);
     
    			if(strlen($queryString) >0) {
     
    				$query = $db->query("SELECT Tech_ID FROM tech WHERE Tech_ID LIKE '$queryString%' LIMIT 10");
    				if($query) {
    				echo '<ul>';
    					while ($result = $query ->fetch_object()) {
    	         			echo '<li onClick="fill(\''.addslashes($result->Tech_ID).'\');">'.$result->Internal_Tech_ID.'</li>';
    	         		}
    				echo '</ul>';
     
    				} else {
    					echo 'OOPS we had a problem :(';
    				}
    			} else {
    				// do nothing
    			}
    		} else {
    			echo 'There should be no direct access to this script!';
    		}
    	}
    ?>

    The above code will fetch you the result from database for the tech number and now need to get the JOB number dropdw to be populated based on the selection from tech field....

    Thanks
    Last edited by ScallioXTX; Jul 15, 2010 at 09:45. Reason: added formatting using bbcodes [html] and [highlight="php"]

  4. #4
    SitePoint Member
    Join Date
    Apr 2010
    Posts
    21
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It looks like what you need to do is to perform a POST operation in your fill function, which will send the selected tech_id to the server, and fetch the available jobs for the given tech_id from the database. It should be fairly similar to the code that you have already performed for autocomplete on the tech_id.

    Is there a certain part of the implementation that you need help with?


Tags for this Thread

Bookmarks

Posting Permissions

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