SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Enthusiast ndtoan13's Avatar
    Join Date
    Dec 2004
    Location
    VietNam
    Posts
    43
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Dynamic dropdown

    I have a dynamic dropdowm after ask php forum and get answer here http://www.sitepoint.com/forums/showthread.php?t=527636

    This is my page dropdown.php:
    Code:
    <script language="Javascript">
    var xmlHttp
    var FirstSelectBox = 'textfield'; //change this to the ID of your second select box
    var SecondSelectBox = 'army'; //change this to the ID of your second select box
    var ScriptName = 'game.php'; //change this to the name of the PHP file from before, remember that file must ONLY output the raw data, no HTML
    function changeSelect(){
        var firstvalue = document.getElementById(FirstSelectBox).value;
    	if(firstvalue.length > 0){
            xmlHttp = GetXmlHttpObject();
            if (xmlHttp==null){
                alert("Your browser doesn't support AJAX, which is required to use this site to it's full functionality");
                return;
            }
            xmlHttp.onreadystatechange=stateChanged;
            var url = ScriptName+'?game='+firstvalue+'&sid='+Math.random();
            xmlHttp.open('GET', url, true);
            xmlHttp.send(null);
        }
    }
     
    function stateChanged(){
        if (xmlHttp.readyState==4){
    		var response = xmlHttp.responseText;
            var dataArray = response.split("\n");
            var currentData;
            document.getElementById(SecondSelectBox).options.length = 0;
            for(var i = 0; i < dataArray.length; i++){
                currentData = dataArray[i].split(",");
                currentLength = document.getElementById(SecondSelectBox).options.length;
                document.getElementById(SecondSelectBox).options[currentLength] = new Option(currentData[0], currentData[1]);
            }
        }
    }
     
    function GetXmlHttpObject(){
        var xmlHttp=null;
        try{
            xmlHttp=new XMLHttpRequest();
        }catch (e){
            try{
                xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
            }catch (e){
                xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
            }
        }
        return xmlHttp;
    }
    </script>
    <?php
    // Connecting, selecting database
    $link = mysql_connect('localhost', 'root', '')
        or die('Could not connect: ' . mysql_error());
    echo 'Connected successfully';
    mysql_select_db('game') or die('Could not select database');
    
    
    //Start Battle Stats Editor
        if (!isset($_POST["battle_stats"])) {
            echo "<form name='battle_stats' method='post' action='dropdown.php'>
    
            <table border='0' cellspacing='0' cellpadding='5'>
              <tr>
                <td colspan='2'><select onChange='changeSelect()' name='game' id='textfield'>
                  <option value='0' selected>Game System &gt;&gt;</option>";
                $sql = mysql_query ("select * from game where store_id=1")or die();
                while ($row = mysql_fetch_object($sql))
                {
                  echo "<option value='".$row->id."'>".$row->name."</option>";
                }
            echo "
                </select></td>
                <td>
                    <input name='date' type='text' size='40' id='textfield' value='".$today."'>
                </td>
              </tr>
              <tr>
                <td>
          <select name='army' id='army'>
            <option value='0' selected>Your army</option>
                </select>        
            </td>
                <th>VS</th>
              </tr>
              <tr>
                <td colspan='3'><input type='reset' name='Reset' value='Reset'>
                  <input type='submit' name='battle_stats' value='Submit'></td>
              </tr>
            </table>
            
            </form>";    
        }    
    //End Battle Stats Editor 
    ?>
    And here is for ajax load data, game.php
    Code:
    if($_GET['game']>0 and $_GET['game']<52){
    	$link = mysql_connect('localhost', 'root', '')
    	    or die('Could not connect: ' . mysql_error());
    	mysql_select_db('game') or die('Could not select database');
    	//---database connection/include here ---
    	$query = "SELECT name FROM armor WHERE store_id=".$_GET['game'];
    	$sql = mysql_query ($query);
    	$data = array();
    	while ($row = mysql_fetch_object($sql)){
    	    $data[] = $row->name;
    	}
    	echo implode("\n", $data);
    }
    It works fine.

    My problem is: after I change select 1 named game (select 2 named army changed data), and i select any thing in select 2 army then press submit button, the result when i print_r($_POST):

    Code:
    Array ( [game] => 1 [date] => [army] => undefined [battle_stats] => Submit )
    How to get the select 2 - army value.

    Thank you.

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,701
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    Nothing appears wrong with what you've posted here.
    Please provide a test page and further answers can be provided.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Enthusiast ndtoan13's Avatar
    Join Date
    Dec 2004
    Location
    VietNam
    Posts
    43
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    OK.

    I uploaded the script into http://truyenthongso.com.vn/test/dropdown.php

    Let select the list1 (Select your ship) e.g Light Fighter
    Then the list2 auto change its data (by ajax call above file game.php) Let select 1 value. E.g Shielding Technology

    Then press submit button.
    The result is :
    Array ( [game] => 1 [army] => undefined [battle_stats] => Submit )
    What I want is to take out army value which now undefinded
    [army] => undefined

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,701
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    When you select Light Fighter, here is what the second dropdown becomes.

    Code HTML4Strict:
    <select name="army" id="army">
        <option value="undefined"></option>
        <option value="undefined">Shielding Technology</option>
        <option value="undefined">Armour Technology</option>
    </select>
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  5. #5
    SitePoint Enthusiast ndtoan13's Avatar
    Join Date
    Dec 2004
    Location
    VietNam
    Posts
    43
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Great thanks, I got it now.

  6. #6
    SitePoint Enthusiast ndtoan13's Avatar
    Join Date
    Dec 2004
    Location
    VietNam
    Posts
    43
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I have another question, could it possible to limit user from the number of selection.

    When i add <select name="army" multiple> user can select as many as they want.

    Could I limit user from select 3 option only? How to do that?

    Thank you.

  7. #7
    SitePoint Enthusiast ndtoan13's Avatar
    Join Date
    Dec 2004
    Location
    VietNam
    Posts
    43
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Since no one help, i try to write the script myselft, and it's done, I post here and hope that could help someone:

    Code:
            var obj = document.battle_stats.elements["armys[]"];
    	var selected = new Array();
    	var countselect = 0;
    	if(obj.options.length > 0){
            for (var i = 0; i < obj.options.length; i++){
    			if (obj.options[i].selected){
    				if(countselect>2){
    					obj.options[i].selected = false;
    					alert("Maximum selection reach!");
    				}
    				countselect++;
    			}
    		}
        }
    This code will limit user from select 2 option only.
    But It is not a good solution because I can not remember 3 last selection, just scan from min value to max value.

    Hope that some one could improve it (return 3 last selection)

  8. #8
    SitePoint Member
    Join Date
    Feb 2008
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    hi

    Hi
    I have some code that is much shorter but uses javascript, php and mysql.
    Check it and help me understand it.
    http://www.sitepoint.com/forums/showthread.php?t=530217

    thanks
    luis

  9. #9
    SitePoint Enthusiast ndtoan13's Avatar
    Join Date
    Dec 2004
    Location
    VietNam
    Posts
    43
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    what happens when someone chooses an option in the first menuor in other words Which line is executed after the
    onChange="this.form.submit();">
    onChange event to submit the form (same effect as press submit button):
    $cate = $_POST['cate'];
    echo '<option>'; echo "$cate";
    This is to detects that an option has been chosen in the first menu.


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
  •