chained javascript menu. problem with displaing categories

Question

Juriy 0 Newbie Poster

13 Years Ago

part of index page

<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

(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

<?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?

javascript

2 Contributors
10 Replies
316 Views
1 Day Discussion Span
Latest Post 13 Years Ago Latest Post by Juriy

ddymacek 15 Posting Whiz

13 Years Ago

try to change your method from get to post.
so on your form change method='get' to method='post'
and on show.php, change $_GET to $_POST when retrieving your variables.

ddymacek 15 Posting Whiz

13 Years Ago

two things I notice on show.php. 1, I could not run it unless I changed all of your open php tags <?
to be <?php
2. when building an option move all of the opening php tags over one space away from your quote example on line 33,34,35,36 in your above script class="101"<?
should now be class="101" <?php

ddymacek 15 Posting Whiz

13 Years Ago

I ran your code, 1, I have no idea what 'chained' js is doing.
the code given above, I left everything as a 'get' on a page I named chained.php.
That form sends data to show.php
'but correction has to effect'? ? umm, not following what your issue is at this point.
this line will not work
$_POST will never be found as you are using a GET for this page.
<script type="text/javascript" language="javascript">
var car_m_s= <?php echo $_POST; ?>
</script>
and why are you duplicating all of your code. how about this., forget your 'chained' menu at the moment. tell me what you are trying to accomplish.

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

Juriy 0 Newbie Poster · Answer 1 · 2011-08-19T02:27:40+00:00

ddymacek, thank you for reply. last two blocks of js code is actually perform no action, i was trying to use them and accidentally made mistake. need to correct it to $_GET. what do you think about the rest?
Im thinking i need to add code into my js, but dont know how to make such if-case.

Juriy 0 Newbie Poster · Answer 2 · 2011-08-19T03:08:19+00:00

Juriy 0 Newbie Poster

13 Years Ago

I change it, but correction has to effect

Juriy 0 Newbie Poster · Answer 3 · 2011-08-19T03:52:41+00:00

that $_POST and $_POST was my mistake and chained is js code.
im duplicating my code because i need to make reques to db, its compulsory.
my task is simple.
I need to have two selection fields, one should be "disable" at the beginning. other one will have a list of a car models. based on 1st selection( i'll select model of the car) second selection field will be enable and i'll choose series of a car. after i press submit button page reloads and options of model/series which i selected before should have "SELECTED" attribute.
It should be javascript, not ajax.
what you think about my current solutin, is it wrong?

ddymacek 15 Posting Whiz · Answer 4 · 2011-08-19T04:13:55+00:00

1) my first question is why not ajax, this is the perfect time to use it. ajax, is javascript.
2) how are you retrieving your car data. is that what the scripts are trying to do on your page? the two scripts you are trying to call var car_m_s = ...
3) rather, what are you trying to do in your script tags lines 54-62 in show.php
4) are you using a mysql database. if so would you mind sharing your table structure with me, I could show you some neat stuff.
5)nothing is 'wrong' when it gets the job done. there are more efficient and now easier ways to accomplish the task you are trying to do. It's not that I don't like your current solution, there is a better way, I could show you if I understand what it is you are trying to do.
6) when / how are you planning to retrieve your make / model data once selected, the menu selection can get fixed easily, for the most part it is working as desired to disable if you want on your show page put in disabled here:

//show.php
<select id="mark" name="mark" disabled>

... perhaps we can make 2 solutions for your problem and at the end of the day you can choose to use the one you feel more comfortable with.

Juriy 0 Newbie Poster · Answer 5 · 2011-08-19T04:45:20+00:00

ok, i got your point. i'll answer your questions one by one
1. i dont want to use ajax because i want to store all models/series on the user side, its my task.
2. Im retrieving data using method get and it'll be something like "show.php?mark=100&series=3", so I'll look in db -> ...WHERE `mark`=100 AND `series`=3...
3. lines 50 -58 is a wrong attempt to solve it, you can delete it, will be no effect
4. you know, I have no clear picture how my whole db will looks like, but so far -> id, mark, series, title,text-field, pic and maybe some more inf
5. i'll try to describe you as clearly as i can. I'm interesting to know efficient ways ))
6. on index.php two selection fields -> one should be "disable" at the beginning -> 1st selection field have a list of a car models-> select model of the car-> based on 1st selection, second selection field will be enable-> choose series of a car ->press submit button-> request to db to retrieve data -> load show.php -> options of model/series which was selected on index.php should have "SELECTED" attribute on show.php page -> data from db displayed below -> user can make selection & request again (starting from this point its going to be loop on show.php page).

yes, it can be good to have many solution and to choose the best one!

ddymacek 15 Posting Whiz · Answer 6 · 2011-08-19T21:20:32+00:00

Thank your for the reply. You have described what you would like accurately. I am currently helping someone else but as soon as I am done with them I will work on some code for you.

Juriy 0 Newbie Poster · Answer 7 · 2011-08-19T21:30:38+00:00

ok, thank you, have your time. I'll wait for your reply