Ad:

JavaScript / DHTML / AJAX Discussion Thread
Marked Solved
Views: 4529

Aug 21st, 2008

AJAX chained select

Expand Post »

Hi ! I need a javascript code which sends variable to PHP.
I have a drop down menu (<select>) in the select there are diffrent cities and i have an array of neighborhoods and when one city is selected, a part of that array shows up, e.g. from 13 to 28
I have the php code, just need the javascript that sends the variable depending on the selected city.

Similar Threads

Smart chained select boxes in JavaScript / DHTML / AJAX

trevata

Reputation Points: 10

Solved Threads: 0

Newbie Poster

Offline

9 posts
since Apr 2008

Permalink

Aug 22nd, 2008

Re: AJAX chained select

How about showing what you have attempted so far?

~s.o.s~

Super Moderator

Featured Poster

Reputation Points: 3233

Solved Threads: 719

Failure as a human

Offline

8,871 posts
since Jun 2006

Permalink

Aug 22nd, 2008

Re: AJAX chained select

Ok this is the drop down for the city:

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
<div class="titBox titBoxM"><span class="fontF1 fontWBold fontSzBig"><?=$lang['grad']?>:</span></div>
    <div class="boxGrad boxGradM">
    <center>
    <?=addDropDown(0,0,0,"gradove",$gradove[$dropN],$lang['emptyDropDown'],'class="szMT2"',$lang['raion'],1,"\n","\n",""); ?>
    </center>
    </div>
<div class="titBox titBoxM"><span class="fontF1 fontWBold fontSzBig"><?=$lang['grad']?>:</span></div>
    <div class="boxGrad boxGradM">
    <center>
    <?=addDropDown(0,0,0,"gradove",$gradove[$dropN],$lang['emptyDropDown'],'class="szMT2"',$lang['raion'],1,"\n","\n",""); ?>
    </center>
    </div>

The dropdown looks like this

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
<select name="city">
<option value="0">City 1</option>
<option value="1">City 2</option>
<option value="2">City 3</option>
etc.
</select>
<select name="city">
<option value="0">City 1</option>
<option value="1">City 2</option>
<option value="2">City 3</option>
etc.
</select>

This is how i get the array with neighborhoods:

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
<div class="titBox titBoxM"><span class="fontF1 fontWBold fontSzBig"><?=$lang['kvartala']?>:</span></div>
    <div class="boxSelect">
    <?
    for ($i=0;$i<sizeof($lang['kvartalS']);$i++){
    echo '<input type="checkbox" name="kvartal" value="'.$i.'" /> <span class="fontF1 fontSzBig">'.$lang['kvartalS'][$i].'</span><br />'."\n".' ';
    }
    ?>
    </div>
<div class="titBox titBoxM"><span class="fontF1 fontWBold fontSzBig"><?=$lang['kvartala']?>:</span></div>
    <div class="boxSelect">
    <?
    for ($i=0;$i<sizeof($lang['kvartalS']);$i++){
    echo '<input type="checkbox" name="kvartal" value="'.$i.'" /> <span class="fontF1 fontSzBig">'.$lang['kvartalS'][$i].'</span><br />'."\n".' ';
    }
    ?>
    </div>

trevata

Reputation Points: 10

Solved Threads: 0

Newbie Poster

Offline

9 posts
since Apr 2008

Permalink

Aug 22nd, 2008

Re: AJAX chained select

I don't know PHP so I won't be making any erroneous assumptions here but achieving this depends on how you are pulling the data irrespective of the server side language used. Are you pulling the *entire* data in a single request and toggling the SELECT boxes using Javascript or are you fetching the neighborhood data *on demand*.

No matter the approach, it should be pretty easy if you pass the data from PHP to Javscript in JSON format. Here is a pure Javascript implementation which should push you in the right direction.

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
<!--
    Dynamic drop downs using Javascript
    Copyright (C) 2008  sos aka Sanjay
 
    This program is free software: you can redistribute it and/or modify
    it under the terms of the GNU General Public License as published by
    the Free Software Foundation, either version 3 of the License, or
    (at your option) any later version.
 
    This program is distributed in the hope that it will be useful,
    but WITHOUT ANY WARRANTY; without even the implied warranty of
    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
    GNU General Public License for more details.
 
    You should have received a copy of the GNU General Public License
    along with this program.  If not, see <http://www.gnu.org/licenses/>.
-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
            "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Select Example</title>
    <script type="text/javascript">
    function fillSelBox(srcElem, destName) {
      var selOne = srcElem;
      var frm = srcElem.form;
      var selTwo = frm.elements[destName];
      var map = 
      {"fruit": 
        {"default": "- Select -", mango: "Mango", custardApple: "Custard Apple"},
       "vegetable": 
        {"default": "- Select -", bitterGourd: "Bitter Gourd", onion: "Onion"},
       "fastFood":
        {"default": "- Select -", noodle: "Noodles", soup: "Soup"},
       "default":
        {"default": "- Select -"}
      };
      selBoxUtil(selOne, selTwo, map);
    }
 
    function selBoxUtil(src, dest, map) {
      if(!src || !dest || !map) {
        return;
      }
      removeAll(dest);
      var selected = src.options[src.selectedIndex].value;
      for(var key in map) {
        if(key == selected) {
          var valueMap = map[key];
          for(var innerKey in valueMap) {
            var val = valueMap[innerKey];
            addOption(dest, val, innerKey);
          }          
        }
      }
    }
 
    function addOption(e, value, label) {
      if(!e) {
        return;
      }
      var o = new Option(value, label);
      try {
        e.add(o);
      } catch(ee) {
        e.add(o, null);
      }
    }
 
    function removeAll(e) {
      if(e && e.options) {
        e.options.length = 0;
      }
    }
    </script>
</head>
<body id="bdy">
  <form id="frm" action="#">
  <div id="container">
    <select name="selOne" id="selOne" onchange="fillSelBox(this, 'selTwo');">
      <option value="default">- Select -</option>
      <option value="fruit">Fruits</option>
      <option value="vegetable">Vegetables</option>
      <option value="fastFood">Fast Food</option>
    </select>
    <select name="selTwo" id="selTwo">
      <option value="default">- Select -</option>
    </select>
  </div>
  </form>
</body>
</html>
<!--
    Dynamic drop downs using Javascript
    Copyright (C) 2008  sos aka Sanjay

    This program is free software: you can redistribute it and/or modify
    it under the terms of the GNU General Public License as published by
    the Free Software Foundation, either version 3 of the License, or
    (at your option) any later version.

    This program is distributed in the hope that it will be useful,
    but WITHOUT ANY WARRANTY; without even the implied warranty of
    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
    GNU General Public License for more details.

    You should have received a copy of the GNU General Public License
    along with this program.  If not, see <http://www.gnu.org/licenses/>.
-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
            "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Select Example</title>
    <script type="text/javascript">
    function fillSelBox(srcElem, destName) {
      var selOne = srcElem;
      var frm = srcElem.form;
      var selTwo = frm.elements[destName];
      var map = 
      {"fruit": 
        {"default": "- Select -", mango: "Mango", custardApple: "Custard Apple"},
       "vegetable": 
        {"default": "- Select -", bitterGourd: "Bitter Gourd", onion: "Onion"},
       "fastFood":
        {"default": "- Select -", noodle: "Noodles", soup: "Soup"},
       "default":
        {"default": "- Select -"}
      };
      selBoxUtil(selOne, selTwo, map);
    }
    
    function selBoxUtil(src, dest, map) {
      if(!src || !dest || !map) {
        return;
      }
      removeAll(dest);
      var selected = src.options[src.selectedIndex].value;
      for(var key in map) {
        if(key == selected) {
          var valueMap = map[key];
          for(var innerKey in valueMap) {
            var val = valueMap[innerKey];
            addOption(dest, val, innerKey);
          }          
        }
      }
    }
    
    function addOption(e, value, label) {
      if(!e) {
        return;
      }
      var o = new Option(value, label);
      try {
        e.add(o);
      } catch(ee) {
        e.add(o, null);
      }
    }
    
    function removeAll(e) {
      if(e && e.options) {
        e.options.length = 0;
      }
    }
    </script>
</head>
<body id="bdy">
  <form id="frm" action="#">
  <div id="container">
    <select name="selOne" id="selOne" onchange="fillSelBox(this, 'selTwo');">
      <option value="default">- Select -</option>
      <option value="fruit">Fruits</option>
      <option value="vegetable">Vegetables</option>
      <option value="fastFood">Fast Food</option>
    </select>
    <select name="selTwo" id="selTwo">
      <option value="default">- Select -</option>
    </select>
  </div>
  </form>
</body>
</html>

Again as to how this is achieved using PHP would be best posted in the PHP forums.

Last edited by ~s.o.s~; Aug 22nd, 2008 at 6:51 am.

~s.o.s~

Super Moderator

Featured Poster

Reputation Points: 3233

Solved Threads: 719

Failure as a human

Offline

8,871 posts
since Jun 2006

Permalink

Aug 22nd, 2008

Re: AJAX chained select

No no man, can AJAX send two variables to the PHP, one with the starting number and second with the finishing number....
Something like this if City 1 is selected the script sends var1=0 and var2=89, or if City 2 is selected the script sends var1=90 and var2=110 so the php script can get these two variables and get the neighborhoods from the array and display them

trevata

Reputation Points: 10

Solved Threads: 0

Newbie Poster

Offline

9 posts
since Apr 2008

Permalink

Aug 22nd, 2008

Re: AJAX chained select

Yes, you can send more than one variables to your PHP script residing on the server. Just append the start and end points as request parameters to the query string which you would be using to make an Ajax request. Something like /php/process.php/?start=0&end=10 . Also make sure you encode the URL before making an Ajax request for proper encoding of special characters (like space for instance). And in process.php, you can retrieve the variables from the request object. In J2EE, it would be something like request.getParameter("start") .

Assuming this isn't your first stint with Ajax, you can easily process the response using either the responseText or responseXML attribute of XMLHttpRequest object.

Last edited by ~s.o.s~; Aug 22nd, 2008 at 7:36 am.

~s.o.s~

Super Moderator

Featured Poster

Reputation Points: 3233

Solved Threads: 719

Failure as a human

Offline

8,871 posts
since Jun 2006

Permalink

Aug 22nd, 2008

Re: AJAX chained select

Thanks man.... I think i can do that.. If I need help I'll write here. Thanks again

Last edited by trevata; Aug 22nd, 2008 at 9:30 am.

trevata

Reputation Points: 10

Solved Threads: 0

Newbie Poster

Offline

9 posts
since Apr 2008

This thread is solved

Either the thread starter or a moderator has marked this thread as solved. You can most likely trust the responses and answers given. There is most likely no reason for any further responses to be posted here. If you have a related question, please start a new thread in this forum instead.

This thread is more than three months old

No one has posted to this discussion for at least three months. Please let old threads die and do not reply to them unless you feel you have something new and valuable to contribute that absolutely must be added to make the discussion complete. Otherwise, please start a new thread in this forum instead.

Previous Thread in JavaScript / DHTML / AJAX Forum Timeline: Google API Search Engine Code

Next Thread in JavaScript / DHTML / AJAX Forum Timeline: Drag and drop text

DaniWeb Message

Cancel Changes

User Name
Password