SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Enthusiast
    Join Date
    Jan 2013
    Posts
    25
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Keep everything in chained dropdown selected after submit

    Hello,

    I'm stuck with this script I'm using:

    index.php

    PHP Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
        <head>
        
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
            <link href="includes/css/style.css" type="text/css" rel="stylesheet" />
            <link href="includes/css/wt-gallery.css" type="text/css" rel="stylesheet" />
            <script type="text/javascript" src="includes/js/jquery-1.7.1.min.js"></script>
            <script type="text/javascript" src="includes/js/configuratie.js"></script>
            <script type="text/javascript" src="includes/js/jquery.wt-gallery.min.js"></script>
            <script type="text/javascript">
    $(document).ready(function() {
        $('#wait_1').hide();
        $('#drop_1').change(function(){
          $('#wait_1').show();
          $('#result_1').hide();
          $.get("func.php", {
            func: "drop_1",
            drop_var: $('#drop_1').val()
          }, function(response){
            $('#result_1').fadeOut();
            setTimeout("finishAjax('result_1', '"+escape(response)+"')", 400);
          });
            return false;
        });
        $('#wait_2').hide();
        $('#drop_2').change(function(){
          $('#wait_2').show();
          $('#result_2').hide();
          $.get("func.php", {
            func: "drop_2",
            drop_var: $('#drop_2').val()
          }, function(response){
            $('#result_2').fadeOut();
            setTimeout("finishAjax2('result_2', '"+escape(response)+"')", 400);
          });
            return false;
        });
        $('#wait_3').hide();
        $('#drop_3').change(function(){
          $('#wait_3').show();
          $('#result_3').hide();
          $.get("func.php", {
            func: "drop_3",
            drop_var: $('#drop_3').val()
          }, function(response){
            $('#result_3').fadeOut();
            setTimeout("finishAjax3('result_3', '"+escape(response)+"')", 400);
          });
            return false;
        });
    });

    function finishAjax(id, response) {
      $('#wait_1').hide();
      $('#'+id).html(unescape(response));
      $('#'+id).fadeIn();
    }
    function finishAjax2(id, response) {
      $('#wait_2').hide();
      $('#'+id).html(unescape(response));
      $('#'+id).fadeIn();
    }
    function finishAjax3(id, response) {
      $('#wait_3').hide();
      $('#'+id).html(unescape(response));
      $('#'+id).fadeIn();
    }

    function finishAjax_tier_three(id, response) {
      $('#wait_2').hide();
      $('#'+id).html(unescape(response));
      $('#'+id).fadeIn();
    }
    function finishAjax_tier_four(id, response) {
      $('#wait_3').hide();
      $('#'+id).html(unescape(response));
      $('#'+id).fadeIn();
    }
    function finishAjax_tier_five(id, response) {
      $('#wait_4').hide();
      $('#'+id).html(unescape(response));
      $('#'+id).fadeIn();
    }
    </script>
            </head>
    <?php
    $website 
    "it";
        
    // configuratie file en db connect
    include "includes/inc/config.inc.php";
    include(
    'db.php');
    include_once 
    "class/slider.class.php";
    include(
    'func.php');
    $slideralbum = new slideralbum($dbo);
    $sliders $slideralbum->getSliderItems($website);
    ?>
    <body>
    <p>
    <form name="product" action="" method="post">
      
        <select name="drop_1" id="drop_1">
        
          <option value="" selected="selected" disabled="disabled">Selecteer Merk</option>
          
          <?php getTierOne(); ?>
        
        </select> 
        
        <span id="wait_1" style="display: none;">
        <img alt="Please Wait" src="ajax-loader.gif"/>
        </span>
        <span id="result_1" style="display: none;"></span>
        <span id="wait_2" style="display: none;">
        <img alt="Please Wait" src="ajax-loader.gif"/>
        </span>
        <span id="result_2" style="display: none;"></span> 
        <span id="wait_3" style="display: none;">
        <img alt="Please Wait" src="ajax-loader.gif"/>
        </span>
        <span id="result_3" style="display: none;"></span> 
        <span id="wait_4" style="display: none;">
        <img alt="Please Wait" src="ajax-loader.gif"/>
        </span>
        <span id="result_4" style="display: none;"></span> 
      <INPUT TYPE="button" VALUE="Refresh" onclick='location.reload()'>
    </form>
    </p>
    <p>
    <?php if(isset($_POST['submit'])){
        
    $drop $_POST['drop_1'];
        
    $drop_2 $_POST['drop_2'];
        
    $drop_3 $_POST['drop_3'];
        
    $drop_4 $_POST['drop_4'];
        
    $drop_5 $_POST['drop_5'];
    ?>
    <table border="1" bordercolor="#B5B5B5" style="background-color:#FFFFFF" width="250" cellpadding="3" cellspacing="3">
        <tr>
            <td>Merk:</td>
            <td><?php echo $drop;?></td>
        </tr>
        <tr>
            <td>Model:</td>
            <td><?php echo $drop_2;?></td>
        </tr>
        <tr>
            <td>Bouwjaar:</td>
            <td><?php echo $drop_3;?></td>
        </tr>
        <tr>
            <td>Kleur:</td>
            <td><?php echo $drop_4;?></td>
        </tr>
    </table>
    <?php
    }
    ?>
    <div id="banner-block">       <!-- Begin of Slideshow -->
        <div class="container">          
            <div class="wt-gallery" style="width:920px; height:375px;">
                <div class="main-screen">
                                    <?php if(isset($_POST['submit'])){
        
    $drop $_POST['drop_1'];
        
    $drop_2 $_POST['drop_2'];
        
    $drop_3 $_POST['drop_3'];
        
    $drop_4 $_POST['drop_4'];
        
    $drop_5 $_POST['drop_5'];
    ?>
                        <img src="images/<?php echo $drop_5;?>" alt="<?php echo $drop_5;?>" width="920" height="360"/>
    <?php
                        
    }
    ?>
                    <noscript>
                     <!-- placeholder image when javascript is off -->
                     <img src="../images/triworks_abstract27.jpg" alt=""/>
                    </noscript>
                </div>
                <div class="cpanel">
                <div class="thumbs-back"></div>                        
                    <div class="thumbnails">
                        <ul>
    <?php $sliders $slideralbum->getSliderItems($websiteNULL);
    foreach(
    $sliders as $slider){
    ?> 
                            <li effect="none">
                        <div>
                            <a href="<?php echo $slider->slider_img?>" height="360" width="720" alt="<?php echo $slider->slider_img?>" />
                            <img src="<?php echo $slider->slider_tmb?>" height="70" width="125" alt="<?php echo $slider->slider_tmb?>" />
                            </a>
                        </div>
                        <div class="data">    
                        </div>
                            </li>
    <?php
    }
    ?>  
                        </ul>
                    </div>            
                <div class="thumbs-fwd"></div>
            </div>
        </div>  
    </div>
    </div>
    </body>
    </html>

    func.php


    PHP Code:
    <?php
    //**************************************
    //     Page load dropdown results     //
    //**************************************
    function getTierOne()
    {
        
    $result mysql_query("SELECT DISTINCT make FROM vehicles ORDER BY make ASC"
        or die(
    mysql_error());

          while(
    $tier mysql_fetch_array$result )) 
      
            {
    ?>
    <option value="<?php echo $tier['make'];?>"<?php echo (isset($_POST['drop_1']) && $_POST['drop_1'] == $tier['make']) ? ' selected="selected"' '' ?>><?php echo $tier['make'];?></option>
    <?php
               
            
    }

    }

    //**************************************
    //     First selection results     //
    //**************************************
    if (isset($_GET['func'])&& $_GET['func'] == "drop_1" ) {
    drop_1($_GET['drop_var']);
    }

    function 
    drop_1($drop_var)
    {  
        include_once(
    'db.php');
        
    $result mysql_query("SELECT DISTINCT model FROM vehicles WHERE make='$drop_var' ORDER BY model"
        or die(
    mysql_error());
        
        echo 
    '<select name="drop_2" id="drop_2">
              <option value=" " disabled="disabled" selected="selected">Selecteer Model</option>'
    ;

               while(
    $drop_2 mysql_fetch_array$result )) 
                {
                  echo 
    '<option value="'.$drop_2['model'].'">'.$drop_2['model'].'</option>';
                }
        
        echo 
    '</select>';
        echo 
    "<script type=\"text/javascript\">
    $('#wait_2').hide();
        $('#drop_2').change(function(){
          $('#wait_2').show();
          $('#result_2').hide();
          $.get(\"func.php\", {
            func: \"drop_2\",
            drop_var: $('#drop_1').val(),
            drop_var2: $('#drop_2').val()
          }, function(response){
            $('#result_2').fadeOut();
            setTimeout(\"finishAjax_tier_three('result_2', '\"+escape(response)+\"')\", 400);
          });
            return false;
        });
    </script>"
    ;
    }

    //**************************************
    //     Second selection results     //
    //**************************************
    if (isset($_GET['func'])&& $_GET['func'] == "drop_2" ) {
    drop_2($_GET['drop_var'], $_GET['drop_var2']);
    }

    function 
    drop_2($drop_var$drop_var2)
    {  
        include_once(
    'db.php');
        
    $result mysql_query("SELECT DISTINCT year FROM vehicles WHERE make='$drop_var' AND model='$drop_var2'"
        or die(
    mysql_error());
        
        echo 
    '<select name="drop_3" id="drop_3">
              <option value=" " disabled="disabled" selected="selected">Selecteer Jaar</option>'
    ;

               while(
    $drop_3 mysql_fetch_array$result )) 
                {
                  echo 
    '<option value="'.$drop_3['year'].'">'.$drop_3['year'].'</option>';
                }
        
        echo 
    '</select>';
        echo 
    "<script type=\"text/javascript\">
    $('#wait_3').hide();
        $('#drop_3').change(function(){
          $('#wait_3').show();
          $('#result_3').hide();
          $.get(\"func.php\", {
            func: \"drop_3\",
            drop_var: $('#drop_1').val(),
            drop_var2: $('#drop_2').val(),
            drop_var3: $('#drop_3').val()
          }, function(response){
            $('#result_3').fadeOut();
            setTimeout(\"finishAjax_tier_four('result_3', '\"+escape(response)+\"')\", 400);
          });
            return false;
        });
    </script>"
    ;
    }

    //**************************************
    //     Third selection results     //
    //**************************************
    if (isset($_GET['func'])&& $_GET['func'] == "drop_3" ) {
    drop_3($_GET['drop_var'], $_GET['drop_var2'], $_GET['drop_var3']);
    }

    function 
    drop_3($drop_var$drop_var2$drop_var3)
    {  
        include_once(
    'db.php');
            
    $result mysql_query("SELECT DISTINCT color FROM vehicles WHERE make='$drop_var' AND model='$drop_var2' AND year='$drop_var3'"
        or die(
    mysql_error());  
        
        echo 
    '<select name="drop_4" id="drop_4">
              <option value=" " disabled="disabled" selected="selected">Selecteer Kleur</option>'
    ;

               while(
    $drop_4 mysql_fetch_array$result )) 
                {
                    if (
    $drop_4['color'] != "") {
                  echo 
    '<option value="'.$drop_4['color'].'">'.$drop_4['color'].'</option>';
                    }
                }
        
        echo 
    '</select>';
        echo 
    "<script type=\"text/javascript\">
    $('#wait_4').hide();
        $('#drop_4').change(function(){
          $('#wait_4').show();
          $('#result_4').hide();
          $.get(\"func.php\", {
            func: \"drop_4\",
            drop_var: $('#drop_1').val(),
            drop_var2: $('#drop_2').val(),
            drop_var3: $('#drop_3').val(),
            drop_var4: $('#drop_4').val()
          }, function(response){
            $('#result_4').fadeOut();
            setTimeout(\"finishAjax_tier_five('result_4', '\"+escape(response)+\"')\", 400);
          });
            return false;
        });
    </script>"
    ;
    }

    //**************************************
    //     Fourth selection results     //
    //**************************************
    if(isset($_GET['func'])&& $_GET['func'] == "drop_4" ) {
    drop_4($_GET['drop_var'], $_GET['drop_var2'], $_GET['drop_var3'], $_GET['drop_var4']);
    }
    function 
    drop_4($drop_var$drop_var2$drop_var3$drop_var4)
    {  
        include_once(
    'db.php');
            
    $result mysql_query("SELECT * FROM vehicles WHERE make='$drop_var' AND model='$drop_var2' AND year='$drop_var3' AND color='$drop_var4'"
        or die(
    mysql_error());  
        


               while(
    $drop_5 mysql_fetch_array$result )) 
                    {
                    if (
    $drop_5['img'] != "") {
                  echo 
    '<input type="checkbox" name="drop_5" id="drop_5" style="display:none;" checked value="'.$drop_5['img'].'"/>';
                  
                    }
      }
        echo 
    '<input type="submit" name="submit" value="Submit" />';
    }

    ?>

    After I selected all my dropdown items and press submit it is working good but all the selected values are gone...

    If you want to change color you have to go to the whole dropdown list again. Is it possible to keep all the selected values after submit?

    Thanks in advance

    Kind Regards

    Joep

  2. #2
    SitePoint Evangelist captainccs's Avatar
    Join Date
    Mar 2004
    Location
    Caracas, Venezuela
    Posts
    515
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Joepiooo View Post
    ...Is it possible to keep all the selected values after submit?

    Thanks in advance

    Kind Regards

    Joep
    Yes. You have to recreate them. It's a bit different for the various types of input fields. Suppose you have a 'name' text input field. I would recreate the submitted data with something like:
    Code HTML4Strict:
    <input type="text" name="name" value="<?php echo $_POST['name']; ?>">

    Radio buttons and check boxes need to be "checked", options need to be "selected". Of course, you need to make sure the code is safe, I'm just showing the basic mechanics of it.
    Denny Schlesinger
    web services


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
  •