Web Analytics Made Easy -
StatCounter Display Div based on selection in a drop down - CodingForum

Announcement

Collapse
No announcement yet.

Display Div based on selection in a drop down

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • Display Div based on selection in a drop down

    All,

    I have a mixture of Javascript, PHP and HTML here. The content of the drop down is pulled from the database, and upon selecting one of these options, more information will be displayed below this drop down in a div. Right now what I have is not working, I do not have any errors, the div is visible on page load and simply displays the last selection form the drop down.

    Here is the javascript in the head, note that at one point this was in the body and I was passing an id into it. I have since moved this to the head and commented out the php part, but its there for reference anyway:

    Code:
                    <script>
        function filterContent() {
        var user = document.getElementById("stat_id").value;
        var contentA = document.getElementById("contentA");
        // if(user=="<?php //$statid;  ?>") {
            contentA.style.display="block";
      //  }  
        </script>
    Here is the php/html part:

    Code:
      $result_stat_query = ("SELECT statid, stat_name FROM stats ORDER BY statid");
       
            $result_stat = $DB_con->query($result_stat_query);
    
    if(!$result_stat)
                    {
                        $DB_con->debug_mode('query', 'error', '#Query Failed<br/>'.$DB_con->error);
                        return false;
                    }       
     
        echo "<select name='stat_id' onchange='filterContent();'>";
    
        while ($row_stat = $result_stat->fetch()) {
    
                      unset($statid, $stat_name);
                      $statid = $row_stat['statid'];
                      $stat_name = $row_stat['stat_name']; 
                      //declared variables now to set the javascript so that the content only appears for each selected drop down item
                      ?>
           
                      <?php
                      //now grab each id and stat name and display in the drop down
                      echo '<option value="'.$statid.'">'.$stat_name.'</option>';
    }
    
        echo "</select>";
    
    ?> 
         
    <div id="contentA">
       <?php echo "<p>Stat name= $stat_name</p>";  ?>
    </div>
    Any help you can give would be appreciated.

    Thanks,

    G

  • #2
    1. JavaScript belongs just before the </body> tag - you can count the exceptions on your thumbs.
    2. We need to see what the generated HTML looks like in order to determine how the JavaScript will interact with it.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

    Comment


    • #3
      ok thanks for the pointers. I have moved the Javascript. The html was posted at the bottom of the code I posted, here it is again:

      Code:
      <div id="contentA">
         <?php echo "<p>Stat name= $stat_name</p>";  ?>
      </div>
      Here is all of this section again:

      Code:
      $result_stat_query = ("SELECT statid, stat_name FROM stats ORDER BY statid");
         
              $result_stat = $DB_con->query($result_stat_query);
      
      if(!$result_stat)
                      {
                          $DB_con->debug_mode('query', 'error', '#Query Failed<br/>'.$DB_con->error);
                          return false;
                      }       
       
          echo "<select name='stat_id' onchange='filterContent();'>";
      
          while ($row_stat = $result_stat->fetch()) {
      
                        unset($statid, $stat_name);
                        $statid = $row_stat['statid'];
                        $stat_name = $row_stat['stat_name']; 
                        
                        ?>
             
                        <?php
                        //now grab each id and stat name and display in the drop down
                        echo '<option value="'.$statid.'">'.$stat_name.'</option>';
      }
      
          echo "</select>";
      
      ?> 
           
      <div id="contentA">
         <?php echo "<p>Stat name= $stat_name</p>";  ?>
      </div>
      Thanks, G

      Comment


      • #4
        You still haven't posted the HTML - PHP is not HTML.
        Stephen
        Learn Modern JavaScript - http://javascriptexample.net/
        Helping others to solve their computer problem at http://www.felgall.com/

        Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

        Comment


        • #5
          Ok I assume you mean as much of the surrounding html to go with this div, so here is what I have - based off bootstrap of course:

          Code:
          <!DOCTYPE html>
          <html lang="en">
            <head>
              <meta charset="utf-8">
              <meta http-equiv="X-UA-Compatible" content="IE=edge">
              <meta name="viewport" content="width=device-width, initial-scale=1">
              <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
              <meta name="description" content="">
              <meta name="author" content="">
              <link rel="icon" href="../../favicon.ico"> 
          
              <title></title>
          
              <!-- Bootstrap core CSS -->
              <link href="../css/bootstrap.min.css" rel="stylesheet">
              <!-- Bootstrap theme -->
              <link href="../css/bootstrap-theme.min.css" rel="stylesheet">
          
              <!-- Custom styles for this template -->
              <link href="../css/theme.css" rel="stylesheet">
          
              <!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
              <!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
              <script src="../js/ie-emulation-modes-warning.js"></script>
              <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
              <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
              <link href="../css/grid.css" rel="stylesheet">
              <link href="../css/default.css" rel="stylesheet" type="text/css" />
          
          </head>
          <?php //require_once '../../includes/header.php'; ?>  
          <body role="document">
          <div class="container theme-showcase" role="main">
              <div class="container">
                  <div class="jumbotron">
                                <div class="row"> 
          <div class="col-sm-5 col-sm-offset-2 col-md-6 col-md-offset-0"> 
          
          <div class="form-group">
                      <input type="text" class="form-control" name="character_name" placeholder="Character Name" 
                             value="<?php if (isset($character_name)) { 
                                 echo $character_name;                   
                             }
                             ?>"/>
                      </div><div class="form-group">
                      <input type="text" class="form-control" name="name" placeholder="Name" 
                             value="<?php if (isset($name)) { 
                                 echo $name;                   
                             }
                             ?>"/>
                      </div>
          Now for the php output followed by the div:

          Code:
          <?php
           //this section contains the stat types for the characters
              $result_stat_query = ("SELECT statid, stat_name FROM stats ORDER BY statid");
             
                  $result_stat = $DB_con->query($result_stat_query);
          
          if(!$result_stat)
                          {
                              $DB_con->debug_mode('query', 'error', '#Query Failed<br/>'.$DB_con->error);
                              return false;
                          }       
           
              echo "<select name='stat_id' onchange='filterContent();'>";
          
              while ($row_stat = $result_stat->fetch()) {
          
                            unset($statid, $stat_name);
                            $statid = $row_stat['statid'];
                            $stat_name = $row_stat['stat_name']; 
                            //declared variables now to set the javascript so that the content only appears for each selected drop down item
                            ?>
                 
                            <?php
                            //now grab each id and stat name and display in the drop down
                            echo '<option value="'.$statid.'">'.$stat_name.'</option>';
          }
          
              echo "</select>";
          
          ?> 
               
          <div id="contentA">
             <?php echo "<p>Stat name= $stat_name</p>";  ?>
          </div>
          
          Closing divs etc..
          Thanks,

          G

          Comment


          • #6
            To post HTML bring up the page in your browser and select View Source then copy and past what that displays - it will not have any PHP in it.
            Stephen
            Learn Modern JavaScript - http://javascriptexample.net/
            Helping others to solve their computer problem at http://www.felgall.com/

            Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

            Comment


            • #7
              Ok here is the source:

              Code:
              <!DOCTYPE html>
              <html lang="en">
                <head>
                  <meta charset="utf-8">
                  <meta http-equiv="X-UA-Compatible" content="IE=edge">
                  <meta name="viewport" content="width=device-width, initial-scale=1">
                  <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
                  <meta name="description" content="">
                  <meta name="author" content="">
                  <link rel="icon" href="../../favicon.ico"> 
              
                  <title>Test</title>
              
                  <!-- Bootstrap core CSS -->
                  <link href="../css/bootstrap.min.css" rel="stylesheet">
                  <!-- Bootstrap theme -->
                  <link href="../css/bootstrap-theme.min.css" rel="stylesheet">
              
                  <!-- Custom styles for this template -->
                  <link href="../css/theme.css" rel="stylesheet">
              
                  <!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
                  <!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
                  <script src="../js/ie-emulation-modes-warning.js"></script>
                  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
                  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
                  <link href="../css/grid.css" rel="stylesheet">
                  <link href="../css/default.css" rel="stylesheet" type="text/css" />
              
              </head>
                
              <body role="document">
              <div class="container theme-showcase" role="main">
                  <div class="container">
                      <div class="jumbotron">
                                    <div class="row"> 
              <div class="col-sm-5 col-sm-offset-2 col-md-6 col-md-offset-0"> 
                   
              <form class="form-ride" method="post" form action="#">
              
              
              
                        <p></p>
                        
              
                          <div class="form-group">
                          <input type="text" class="form-control" name="name" placeholder="Name" 
                                 value=""/>
                          </div>
              
                        <p>Select a Gender:</p>
              <select name="gender">
                 
              <li><option  value="male">Male</option>
              </li>
              <li><option  value="female">Female</option>
              </li>
              </select>   
                        <br/><br/>
                        
              
              <select name='stat_id' onchange='filterContent();'>       
                                <option value="1">Please Select An Option</option>       
                                <option value="2">Test 1</option>       
                                <option value="3">Test 2</option>       
                                <option value="4">Test 3</option></select> 
                   
              <div id="contentA">
                 <p>Stat name= Test 3</p></div>
              
               
                          <div class="clearfix"></div><hr />
                          <div class="form-group">
                             
                               <button type="submit" class="btn btn-block btn-primary" name="btn-create">
                               <i class="glyphicon glyphicon-plus"></i>&nbsp;Create</button></form>                
                          </div>
                          <br />
                     </div>
              </div>
                          </div>
                  </div>
              
                              <script>
                  function filterContent() {
                  var user = document.getElementById("stat_id").value;
                  var contentA = document.getElementById("contentA");
                  </script>
              
              </body>
              </html>
              Thanks,

              G

              Comment


              • #8
                I would propose the following code:
                Code:
                <div class="content" id="content2">Your content for option 2</div>
                <div class="content" id="content3">Your content for option 3</div>
                <div class="content" id="content4$>Your content for option 4</div>
                <script>
                    function filterContent() {
                    var user = document.getElementById("stat_id").value;
                    var cont = document.getElementsByClassName("content");
                    for (var i = 0; i < cont.length; i++) {
                        if (cont[i].id == "content" + user) cont[i].style.display = "block"; else cont[i].style.display = none;
                    }
                </script>
                Last edited by Sempervivum; Sep 7, 2016, 04:43 PM.

                Comment


                • #9
                  Thanks, I took what you had and incorporated my php to bring the variables in like so but it is still not working, it is just displaying the last row from the DB:

                  Code:
                      echo "<select name='stat_id' onchange='filterContent();'>";
                  
                      while ($row_stat = $result_stat->fetch()) {
                  
                                    unset($statid, $stat_name);
                                    $statid = $row_stat['statid'];
                                    $stat_name = $row_stat['stat_name']; 
                                    //declared variables now to set the javascript so that the content only appears for each selected drop down item
                                    ?>
                         
                                    <?php
                                    //now grab each id and stat name and display in the drop down
                                    echo '<option value="'.$statid.'">'.$stat_name.'</option>';
                  }
                  
                      echo "</select>";
                  
                  ?> 
                            <div class="content" id="<?php echo $statid; ?>"><?php echo $stat_name; ?></div>
                  the javascript at the bottom of the page:

                  Code:
                  <script>
                      function filterContent() {
                      var user = document.getElementById("id").value;
                      var cont = document.getElementsByClassName("content");
                      for (var i = 0; i < cont.length; i++) {
                          if (cont[i].id == "content" + user) cont[i].style.display = "block"; else cont[i].style.display = none;
                      }
                  </script>
                  Thanks again for your help, I hope I am close?

                  G

                  Comment


                  • #10
                    Originally posted by genista View Post
                    Thanks, I took what you had and incorporated my php to bring the variables in like so but it is still not working, it is just displaying the last row from the DB:
                    So now you have identified that you have a PHP problem or possibly an SQL problem - so to solve this we'd need to see all the PHP that is doing the retrieval from the database.

                    Perhaps a moderator might move the thread to the PHP forum where more PHP experts will be able to see it.
                    Stephen
                    Learn Modern JavaScript - http://javascriptexample.net/
                    Helping others to solve their computer problem at http://www.felgall.com/

                    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

                    Comment


                    • #11
                      You output the div .content only one time. You have to rewind the pointer and loop through the result a second time and output one div .content three times.
                      php - How to go through mysql result twice? - Stack Overflow

                      Comment


                      • #12
                        Thanks, I will pursue the php route, I have managed to run an equivalent to seek, but having issues so will post this in the php forum.

                        G

                        Comment

                        Working...
                        X