SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member Juriy's Avatar
    Join Date
    Aug 2011
    Location
    Astana, Kazakhstan
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    chained javascript menu. problem with values

    part of index page
    Code:
      
          <form id="form1"  name="form1" method="get" action="show.php">
            <select id="mark" name="mark">
              <option value="">--</option>
              <option value="100">BMW</option>
              <option value="101">Audi</option>
            </select>
            <select id="series" name="series">
              <option value="">--</option>          
              <option value="1" class="100">1 series</option>
              <option value="3" class="100">3 series</option>
              <option value="5" class="100">5 series</option>
              <option value="6" class="100">6 series</option>
              <option value="7" class="100">7 series</option>
              
              <option value="11" class="101">A1</option>
              <option value="23" class="101">A3</option>
              <option value="33" class="101">S3</option>
              <option value="44" class="101">A4</option>
              <option value="54" class="101">S4</option>
              
            </select>
            
    		 <button name="" type="submit" > Find! </button> 
                  </p>
    	     
          </form>    
        
    
      <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>
      <script src="js/jquery.chained.js" type="text/javascript" charset="utf-8"></script> 
      <script type="text/javascript" charset="utf-8">
      $(function() {       
        $("#series").chained("#mark");
        
      });
      </script>
    js
    Code:
    (function($) {
    
        $.fn.chained = function(parent_selector, options) { 
            
            return this.each(function() {
                
                /* Save this to self because this changes when scope changes. */            
                var self   = this;
                var backup = $(self).clone();
                            
                /* Handles maximum two parents now. */
                $(parent_selector).each(function() {
                                                    
                    $(this).bind("change", function() {
                        $(self).html(backup.html());
    
                        
                        var selected = "";
                        
                        selected = selected.substr(1);
    
                        /* Also check for first parent without subclassing. */
                        /* TODO: This should be dynamic and check for each parent */
                        /*       without subclassing. */
                        var first = $(parent_selector).first();
                        var selected_first = $(":selected", first).val();
                    
                        $("option", self).each(function() {
                            /* Remove unneeded items but save the default value. */
                            if (!$(this).hasClass(selected) && 
                                !$(this).hasClass(selected_first) && $(this).val() !== "") {
                                    $(this).remove();
                            }                        
                        });
                    
                        /* If we have only the default value disable select. */
                        if (1 == $("option", self).size() && $(self).val() === "") {
                            $(self).attr("disabled", "disabled");
                        } else {
                            $(self).removeAttr("disabled");
                        }
                        $(self).trigger("change");
                    });
                    
                    /* Force IE to see something selected on first page load. */
                    $("option", this).first().attr("selected", "selected");
                    
                    /* Force updating the children. */
                    $(this).trigger("change");             
    
                });
            });
        };
        
        /* Alias for those who like to use more English like syntax. */
        $.fn.chainedTo = $.fn.chained;
        
    })(jQuery);
    show.php
    Code:
    <?php 
    if (isset($_GET['mark']))
    	{
    	$papar_car=$_GET['mark'];
    	
    	}	
    if (isset($_GET['series']))
    	{
    	$papar_ser=$_GET['series'];
    	
    	}
    ?>
    <!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"/>
    
    </head>
    
    <body>
      
          <form id="form1"  name="form1" method="get" action="show.php">
            <select id="mark" name="mark">
              <option value="">--</option>
              <option value="100"<? if($papar_car=="100")echo "selected='selected'"; ?>>BMW</option>
              <option value="101"<? if($papar_car=="101")echo "selected='selected'"; ?>>Audi</option>
            </select>
            <select id="series" name="series">
              <option value="">--</option>
              
              <option value="1" class="100" <? if($papar_ser=="1")echo "selected='selected'"; ?>>1 series</option>
              <option value="3" class="100"<? if($papar_ser=="3")echo "selected='selected'"; ?>>3 series</option>
              <option value="5" class="100"<? if($papar_ser=="5")echo "selected='selected'"; ?>>5 series</option>
              <option value="6" class="100"<? if($papar_ser=="6")echo "selected='selected'"; ?>>6 series</option>
              <option value="7" class="100<? if($papar_ser=="7")echo "selected='selected'"; ?>">7 series</option>
              
              <option value="11" class="101" <? if($papar_ser=="11")echo "selected='selected'"; ?>>A1</option>
              <option value="23" class="101" <? if($papar_ser=="23")echo "selected='selected'"; ?>>A3</option>
              <option value="33" class="101"<? if($papar_ser=="33")echo "selected='selected'"; ?>>S3</option>
              <option value="44" class="101" <? if($papar_ser=="44")echo "selected='selected'"; ?>>A4</option>
              <option value="54" class="101"<? if($papar_ser=="54")echo "selected='selected'"; ?>>S4</option>
              
            </select>
            
    		 <button name="" type="submit" > Find! </button> 
                  </p>
    	      
          </form>
          
    			<script type="text/javascript" language="javascript">		  
    		  var car_m= <?php echo $_POST['mark']; ?>
    		  </script>
    		  
    		  <script type="text/javascript" language="javascript">		  
    		  var car_m_s= <?php echo $_POST['series']; ?>
    		  </script>
    
      <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>
      <script src="js/jquery.chained.js" type="text/javascript" charset="utf-8"></script>  
      <script type="text/javascript" charset="utf-8">
      $(function() {    
        
        $("#series").chained("#mark");   
        
      });
      </script>
    guys, after i done selection in the form1, i press submit button and Im going to show.php page. on show.php page i want categories to be already selected. whats my problem?

  2. #2
    SitePoint Addict darkwater23's Avatar
    Join Date
    Nov 2005
    Location
    Omaha, NE
    Posts
    335
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I don't know if this is what's wrong, but you're using $_POST in two of your JS blocks. Since the form was submitted with the GET method, $_POST won't have anything in it.

  3. #3
    SitePoint Member Juriy's Avatar
    Join Date
    Aug 2011
    Location
    Astana, Kazakhstan
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    darkwater23, thanks for your reply.
    actuallly that two js blocks just additional parts of the code i was playing with to make it work. no use now.


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
  •