dupli pull down meni

dupli pull down meni 10.01.2006. u 11:47 · pre 253 meseca #1

Imam sledeci 'problem':

u php stranici pravim formu gde zelim da napravim dupli pull down meni.
Cilj forme je da korisnik bira kategoriju, a zatim na osnovu izabrane kategorije i podkategoriju.

Primer za prvi pull-down meni:
Marka Auta
Opcije: 1. Audi 2. BMW 3. VW

Drugi pull-down meni (ukoliko je birana opcija 3 VW)
Opcija 1. Polo 2. Bora 3. Golf

Znam da ovo moze da se uradi sa JavaScript-om, ali ja zelim da mi forma automatski prilikom biranja neke opcije iz prve kategorije, napravi queri u bazi i u drugi pull-down meni prikaze odgovarajuce opcije.

Code:

<form action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post">


<select name="marka">
<option>-- Izaberite marku--</option>
<option value="1">Audi</option>
<option value="2">BMW</option>
<option value="3">VW</option>
</select>


<select name="model"><option>-- Izaberite model--</option>
<?php

// Query the database.
require_once ('../mysql_connect.php');
$query = "SELECT * FROM model WHERE id_marka = marka";
$result = @mysql_query ($query);
while ($row = mysql_fetch_array ($result, MYSQL_ASSOC)) {
echo "<option value=\"{$row['id_model']}\">{$row['model']}</option>\n";
}
mysql_close();
?>
</select><br />

<div align="center"><input type="submit" name="submit" value="send" /></div>
</form>

Ovo je primer kako sam to zamislio, naravno drugi pull-down meni ne funkcionise kako bi ja to zeleo.
Moje pitanje je da li je moguce u jednoj formi na osnovu biranja neke opcije iz prvog pull-down menija forsirati query i odgovarajuce rezultate vratiti u drugi pull-down meni? I ukoliko jeste kako?

Unapred hvala svima na odgovoru.

Re: dupli pull down meni 10.01.2006. u 12:45 · pre 253 meseca #2

Potrazi ovde na forumu, bilo je par tema o Ajax-u. Samo sa PHP to ne mzoes da odradis. JavaSCript ti ne gine.

Re: dupli pull down meni 11.01.2006. u 17:16 · pre 253 meseca #3

Ok, hvala na odgovoru.

Re: dupli pull down meni 11.01.2006. u 21:24 · pre 253 meseca #4

@broker
Normalno da moze da se odradi samo preko PHP-a.
@Gurbaj Bojan
To sto moze da se odradi samo preko PHP-a ne znaci da je to najpodesniji za dobijanje funkcionalnosti koji ti treba (a to je da se vrednosti u drugom meniju menjaju od izabrane vrednosti u prvom). Ako ukupan broj svih mogucnosti nije veliki mozes koristiti obican JS koji bi generisao u okviru HTML-a na klijentu. Ako je broj mogucnosti veliki onda koristi AJAX.

Potpis

Owl

Re: dupli pull down meni 12.01.2006. u 10:56 · pre 253 meseca #5

_owl_ ja sam podrazumevao da covek nece da mu se strana refreshuje kada promeni jedan combo box da bi se ucitale vrednoti u drugi...

Re: dupli pull down meni 12.01.2006. u 16:53 · pre 253 meseca #6

Znam, samo sto je to jedina i glavna mana takvog pristupa. Zato je bitno da se objasni da su druge varijante povoljnije jer ne postoji taj dodatni refresh strane pri izboru svake stavke iz "glavnog" menija.

Potpis

Owl

Re: dupli pull down meni 13.01.2006. u 21:52 · pre 253 meseca #7

to ti se radi sa javascript.
najjednostavnije ti je da projdeš na www.umrli.hr - bez zajebancije. i to tamo ukradi (oni imaju mjesec - pa dan (ovisno o mjesecu kreira se drugi drop down box sa brojem dani pripadajućeg mjeseca))

Potpis

http://korekt.no-ip.biz/cam/

Re: dupli pull down meni 16.01.2006. u 22:28 · pre 253 meseca #8

Pokusao sam u medjuvremenu da resim ovo pomocu xmlHttpRequest, koji je opisan na sajtu http://www.webpasties.com/xmlH...xmlHttpRequest_tutorial_1.html koji sam pronasao ovde na ES-u trazeci AJAX. Ovo funkcionise, znaci na osnovu izbora u prvom pull-down meni, pretrazuje se mysql baza i vraca mi podatke koji odgovaraju. Medjutim, vraca mi se samo jedan podatak koji moze da se smesti u text-field kao na primer

Code:
<input type="text" name="subkategorija" id="subkategorija" />

a meni je potrebno da se svi podaci vrate koji odgovaraju i da se smeste u sledeci pulldown meni, znaci nesto poput

Code:
<select name="subkategorija" id="subkategorija">
<option value="">-- Izaberite subkategoriju --</option>
</select><br />

.
Ovo mi nikako ne uspeva, pretrazio sam internet ali osim vracanja podatka u obican text-field nisam pronasao druge mogucnosti, pa me interesuje da li neko zna kako bi to trebalo da se izvede?
U suprotnom mi ne preostaje nista drugo nego da sve uradim pomocu javascripte (ali ima mnogo opcija, oko 100, pa bi radije to da resim sa xmlHttpRequest).

Opet hvala svima na trudu.

Re: dupli pull down meni 17.01.2006. u 00:10 · pre 253 meseca #9

To vec nije tema PHP foruma. Pitaj u temama u kojima su pricali o AJax-u. Koliko znam, trebalo bi da mozes da dobijes podatke kao niz pa posle njima da popunis comb box recimo.

Re: dupli pull down meni 17.01.2006. u 00:31 · pre 253 meseca #10

Mislim da ne moze da se vrati niz, nativno, iz xmlHTPRequst-a. Koliko znam moze da se vrati ili broj ili string.

Probaj, da u metodi koja ti vraca vrednosti, upakujes sve opcije sa nekim delimiterom, pa ga onda raspakuj(explode) tamo gde ti treba.

Pozdrav,
Vladan

Re: dupli pull down meni 17.01.2006. u 08:04 · pre 253 meseca #11

Evo jedan primer, malo sam se igrao. Nisam koristio bazu jer me je mrzelo, pa sam sve smestio u jedan niz, ali nadam se da tebi nije problem to da uradiš. Možda su dodate neke suvišne stravari, kao na primer biranje metode (post ili get) iz padajućeg menija, ali ti možeš se odlučiti samo za jednu i tu koristiti. Kompletan kod sam stavio u jedan fajl kako ne bi postavljao više fajlova.

Code:

<?php
if(isset($_REQUEST['manufacturer'])) {
  header('Expires: Mon, 26 Jul 1997 07:00:00 GMT');
  header('Last-Modified: '.gmdate('D, d M Y H:i:s').' GMT');
  header('Cache-Control: no-cache, must-revalidate');
  header('Pragma: no-cache');
  header('Content-type: text/xml');
  $manufacturer = (int)$_REQUEST['manufacturer'];
  $models = Array(
                  1 => Array('Model 11', 'Model 12', 'Model 13'),
                  2 => Array('Model 21', 'Model 22', 'Model 23', 'Model 24'),
                  3 => Array('Model 31', 'Model 32', 'Model 33', 'Model 34', 'Model 35')
                 );
  $output = '<?xml version="1.0" ?><options>';
  if(!isset($models[$manufacturer])) {
    $output .= '<error><![CDATA[Manufacturer "'.$manufacturer.'" did not found.]]></error>';
  } else {
    for($i=0; $i<count($models[$manufacturer]); $i++) {
      $output .= '<option id="'.$i.'"><![CDATA['.$models[$manufacturer][$i].']]></option>';
    }
  }
  $output .= '</options>';
  echo $output;
} else {
?>
<html>
<head>
<title>test</title>
<script>
function getRequestObject(){
  var req;
  try {
    req = new ActiveXObject('Msxml2.XMLHTTP');
  }
  catch (e){
    try    {
      req=new ActiveXObject('Microsoft.XMLHTTP');
    }
    catch (e2){
      req=null;
    }
  }
  if(!req && typeof XMLHttpRequest != 'undefined')
    req = new XMLHttpRequest();
  return req;
}
function processRequest(args, requestType) {
  var req, uri, uriData;
  uri = '<?php echo $_SERVER['PHP_SELF'];?>';
  uriData = 'manufacturer='+args;
  document.getElementsByTagName('body')[0].style.cursor = 'wait';
  document.getElementById('status').innerHTML = 'loading...';
  switch(requestType) {
    case 'GET':
      uri += '?' + uriData;
      postData = null;
    break;
    case 'POST':
      postData = uriData;
    break;
    default:
      document.getElementsByTagName('body')[0].style.cursor = 'default';
      document.getElementById('status').innerHTML = 'error';
      alert('Illegal request type: ' + requestType);
      return false;
    break;
  }
  req = getRequestObject();
  req.open(requestType=='GET'?'GET':'POST', uri, true);
  if (requestType == 'POST'){
    try{
      req.setRequestHeader('Method', 'POST ' + uri + ' HTTP/1.1');
      req.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
      req.setRequestHeader('Content-Length', postData.length);
      req.setRequestHeader('Connection', 'close');
    }
    catch(e){
      document.getElementById('status').innerHTML = 'error';
      document.getElementsByTagName('body')[0].style.cursor = 'default';
      alert('Your browser does not appear to  support asynchronous requests using POST.');
      return false;
    }
  }
  req.onreadystatechange = function() {
    if (req.readyState != 4) return;
    if (req.status == 404) {
      document.getElementsByTagName('body')[0].style.cursor = 'default';
      document.getElementById('status').innerHTML = 'error';
      alert('Error 404: Document "'+uri+'" not found.');
      return false;
    }
    if (req.status==200) {
      if (req.responseXML) processResponse(req.responseXML);
      else     {
        document.getElementsByTagName('body')[0].style.cursor = 'default';
        document.getElementById('status').innerHTML = 'error';
        alert('Error: the XML response that was returned from the server is invalid.');
        return false;
      }
    }
    delete req;
  }
  req.send(postData);
  delete req;
  return true;
}
function processResponse(xml) {
  var elem, output, id;
  elem = document.getElementById('model');
  xml = xml.getElementsByTagName('options')[0];
  if (xml == null) {
    document.getElementsByTagName('body')[0].style.cursor = 'default';
    document.getElementById('status').innerHTML = 'error';
    alert('Error: the XML response that was returned from the server cannot be processed.');
    return false;
  }
  elem.options.length=0;
  elemChild = xml.childNodes;
  if(elemChild[0].nodeName == 'error') {
    document.getElementsByTagName('body')[0].style.cursor = 'default';
    document.getElementById('status').innerHTML = '<strong>Error:</strong> ' + elemChild[0].firstChild.nodeValue;
    elem.options[elem.options.length] = new Option('----');
    return false;
  }

  for(i=0; i<elemChild.length; i++){
    if (elemChild[i].nodeName == 'option') {
      id = elemChild[i].attributes.getNamedItem('id').value;
      elem.options[elem.options.length] = new Option(elemChild[i].firstChild.nodeValue, id);
    }
  }
  delete xml;
  document.getElementsByTagName('body')[0].style.cursor = 'default';
  document.getElementById('status').innerHTML = 'finished';
}
</script>
</head>
<body>
  <form action="#" method="post">
    Methods:
    <select name="method" id="method">
      <option value="GET">GET</option>
      <option value="POST">POST</option>
    </select>
    <br />
    Manufacturers:
    <select name="manufacturer" id="manufacturer" onChange="processRequest(document.getElementById('manufacturer').value, document.getElementById('method').value)">
      <option value="1">Manufacturer 1</option>
      <option value="2">Manufacturer 2</option>
      <option value="3">Manufacturer 3</option>
      <option value="4">Manufacturer 4</option>
    </select>
    <br />
    Models:
    <select name="model" id="model">
      <option>----</option>
    </select>
  </form>
  <div id="status"></div>
</body>
</html>
<?php } ?>

Mošda sam neke stvari malo zakomplikovao.
Ti možeš uraditi i mnogo lakše, kao što je gore navedeno, da prosleđuješ niz, tačnije da prosleđuješ string koji će biti sastavljen od članova niza razdvojenih nekim delimiterom, pa da posle pomoću JS-a split-uješ (razbiješ) taj string i dobiješ svoj niz.

Potpis

^{Banned - Not available}

Re: dupli pull down meni 17.01.2006. u 11:09 · pre 253 meseca #12

2Br@nkoR:

svaka cast na konkretnom postu...

Pozdrav,
Vladan

Re: dupli pull down meni 17.01.2006. u 13:22 · pre 253 meseca #13

Hvala.
Pozdrav.

Potpis

^{Banned - Not available}

Re: dupli pull down meni 17.01.2006. u 15:07 · pre 253 meseca #14

2Br@nkoR:

Hvala na odgovoru, isprobacu ovo pa cu javiti da li je uspelo.

Pozdrav,
Bojan

Forum kao aplikacija na telefonu

Srodne teme