Optionsfeld mit Javascript?

thehasso · 25. Mai 2009

Hallo,

Ich steh gerade vor ein Sache, die ich bis jetzt noch nie gemacht habe. Und auch keinen passenden Suchbegriff für google finde. Und zwar geht es darum, dass Ich auf meiner Website einen Bereich eingerichtet habe für Meetings. Die Meetings sollen bsp. in Deutschland und Libanon stattfinden. Sprich ich möchte, dass wenn man Deutschland wählt, dann ein Feld erscheint mit den Städten von Deutschland.

Oder wenn man bspw. Libanon anklickt sprich im optionsfeld, sollen die Städte von Libanon angezeigt werden.

Also das sind meine Optionsfelder.

Wenn bei Landauswahl Deutschland, dann soll das optionsfeld der Deutschen Städte erscheinen.

Wenn die Landauswahl Libanon ist, dann soll das optionsfeld der Libanesichen Städte erscheinden.

PHP:

 <select name="land" class="mysel" id="land" style="width:190px;">
                    <option value=""></option>
                    <option value="Deutschland">Deutschland</option>
                    <option value="Libanon">Libanon</option>
                </select>


                <select name="stadt_germany" class="mysel" id="monat" style="width:190px;">
                    <option value=""></option>
                    <option value="Berlin">Berlin</option>
                    <option value="Hamburg">Hamburg</option>
                    <option value="Köln">Köln</option>
                    <option value="Frankfurt am Main">Frankfurt am Main</option>
                    <option value="Düsseldorf">Düsseldorf</option>
                    <option value="Bremen">Bremen</option>
                    <option value="Hannover">Hannover</option>
                    <option value="Stuttgart">Stuttgart</option>
                    <option value="Karlsruhe">Karlsruhe</option>
                    <option value="Heidelberg">Heidelberg</option>
                </select>
                
                
                  <select name="stadt_lebanon" class="mysel" id="monat" style="width:190px;">
                    <option value=""></option>
                    <option value="Beirut">Beirut</option>
                    <option value="Tripoli">Tripoli</option>
                    <option value="Baalbek">Baalbek</option>
                </select>

Freu mich über jeden tipp bzw. anregung.

Gruß thehasso

Maik · 25. Mai 2009

Hi,

werf mal einen Blick in das Thema Dropdown-Feld aus Datenbank füllen.

mfg Maik

thehasso · 25. Mai 2009

uu Maik, das erscheint mir aber sehr sehr schwierig. Also wie ich sehe, mit php allein unmöglich wobei der kne geschrieben hatte, er würds mit php ganz einfach lösen.

Könntest du mir ein rat geben, wie ich die Sache am besten vorgehe, kann mir leider noch nichts konkretes vorstellen wie Ich das umsetzen kann. Wobei möglichst nur mit html, php und vielleicht bissel javascript.

Am besten irgend ein Tutotial dazu..
gruß thehasso

Maik · 25. Mai 2009

Svens Beispiel in Post #6 ist doch überschaubar -> http://doktormolle.de/temp/xmlhttp_comboboxes/

mfg Maik

thehasso · 26. Mai 2009

Hallo Maik,

ich hab das Skript nach meinen Bedürfnisse soweit ich konnte angepasst. Eine sache funktioniert jedoch nicht so fein, und zwar die Variablen Übergabe.

Das Skript Index und box hab ich hier in einer Datei zusammengefasst:

PHP:

<html>
<head>
<title>Test</title>
<script type="text/javascript">
<!--
 lock = false;//sperre bei laufendem request
 req  = false;//request-objekt
 objLayer=false;//container für die boxen
    
 if(window.XMLHttpRequest) 
  {
   try 
    {
     req = new XMLHttpRequest();
    } 
   catch(e) 
    {
     req = false;
    }
   } 
  else if(window.ActiveXObject) 
   {
    try 
     {
      req = new ActiveXObject("Msxml2.XMLHTTP");
     } 
    catch(e) 
     {
      try 
       {
        req = new ActiveXObject("Microsoft.XMLHTTP");
       } 
      catch(e) 
       {
        req = false;
       }
     }
   }
        

/*
 * Funktion zum Reorganisieren der Select-Felder und zum Absetzen des Requests.
 *
 * Parameter: objBox - Referenz auf das auslösende Select-Element
 */
        
function request_data(objBox)
{
 // Falls kein XMLHttpRequest-Objekt (XHR-Objekt) erstellt werden konnte -> Request abbrechen
 if(!req)
  {
   alert('dein Browser kann das nicht :o(');
   return;
  }

 // Falls bereits ein Request ausgeführt wird -> neuen Request mit Meldung abbrechen
 if(lock)
  {
   alert('Warte bitte, bis die letzte Anfrage verarbeitet wurde');
   return;
  }

   // Element mit den Select-Feldern ermitteln
   objLayer=objBox.parentNode
   // Request als besetzt markieren
   lock = true;
   // Select-Felder rückwärts durchlaufen -> nicht benötigte werden entfernt
   for(i=objLayer.childNodes.length-1;i>0;--i)
    {
        // Falls das aktuelle Select-Feld dem übergebenen entspricht -> Schleife verlassen
      if(objLayer.childNodes[i]==objBox)break;
      // Aktuelles Select-Feld entfernen
      objLayer.removeChild(objLayer.childNodes[i]);
    }

   // XHR-Objekt die Callback-Funktion zuweisen
   req.onreadystatechange = new Function('f','get_http_response()');
   // Request initialisieren (mit Timestamp, um das Verwenden von Daten aus dem Cache zu verhindern)
   req.open("GET", 'box.php?box='+ objBox.value + '&amp;' + new Date().getTime(), true);
   // Request absetzen
   req.send(true);
}

//Antwort verarbeiten
function get_http_response()
{
 //Wenn Anfrage fertig
 if(req.readyState == 4)
  {   
   //Wenn Status OK
   if(req.status == 200)
    {
     //Antwort ausgeben
     objLayer.appendChild(document.createElement('span'));
     objLayer.lastChild.innerHTML=req.responseText;
                
     //sperre entfernen
     lock=false
    }
   //Ansonsten
   else
    {
     //Statuscode ausgeben
     alert(req.statusText);
    }
   //Request beenden
   if(document.all && !window.opera)
    {
     req.abort();
    }
   lock = false;
  }
}
//-->
</script>
</head>
<body>
<?php
$db=array(
  array('Zeugs',-1),
  array('Deutschland',0),
  array('Lebanon',0),
  array('Beirut',2), // deutschland
  array('Berlin',1), // libanon
  array('Hamburg',1), //libanon
    array('Köln',1), //libanon
	array('Frankfurt am Main',1), //libanon
	array('Düsseldorf',1), //libanon
	array('Bremen',1), //libanon
	array('Hannover',1), //libanon
	array('Stuttgart',1), //libanon
	array('Karlsruhe',1), //libanon
  array('Heidelberg',1) // libanon
);


     


function make_box($parent)
{
  global $db;
  if(@!isset($db[$parent]))return;
  
  $items=0;
  
  $box='<select name="box['.$db[$parent][0].']" onchange="request_data(this) ">
        <option value="-1">Auswahl</option>';
        
  
      foreach($db as $key => $arr)
        {
          if($parent==$arr[1] )
            {
              $items=1;
              $box.='<option value="'.$key.'">';
              $box.=htmlentities($arr[0]);
              $box.='</option>';
            }
        }
  
  $box.='</select>';
  
  return(($items) 
          ? $box
          : '<input type="submit">');
}

@print(make_box($_GET['box']));
  
?>


  <form action="treffen_insert.php" method="post">
    <span>
<?php
  
  define('inside',true);
 // require('box.php');
  print(make_box(0));

?>
    </span>
  </form>

</body>

</html>

Nun und dies hier ist die Datei treffen_insert. Sprich die Datei in der man weitergeeitet wird, wenn man in der Index Datei absenden klickt.

PHP:

<?php 
  @end($_POST['box']);
 // @print($db[$_POST['box'][key($_POST['box'])]][0]);
  
  $stadt = @$db[$_POST['box'][key($_POST['box'])]][0];
  

// beim abschicken wird überprüft, ob die stadt eine libanesiche stadt war oder eine deutsche!
// wenn die stadt nicht beirut war, dann muss das land Deutschland sein!! siehe if abfrage!

  if ( $stadt != "Beirut" ) { $land = "Deutschland"; } else { $land = "Libanon"; }

  echo $stadt;
  echo $land;

  
?>

Es wird kein Wert angezeigt. Weder Land noch Stadt, das heisst der Fehler liegt bei der übergabe. Postet man den Inhalt dieser Datei in der index Datei, und leitet es an der index Datei weiter wird die Stadt und das entsprechende Land angezeigt.

Gruß thehasso

thehasso · 4. Juni 2009

IE request

Moin zusamen,

Im Quelltext wird ein request nicht im Internetexplorer ausgeführt, es erscheint immer wieder die Fehlermeldung.:

Code:

alert('dein Browser kann das nicht :o(');

Ab und zu erfolgt auch mal wiederhin diese Fehlermeldung:

Code:

alert('Warte bitte, bis die letzte Anfrage verarbeitet wurde');

Daraufhin hab ich den Internetexplorer neugestartet sprich im Taskmanager beendet. Mit der Hoffnung das es nun geht, jedoch kein Erfolg bei gehabt.

Funktionieren tut dieser Code im Firefox, Netscape weitere hab ich nicht getestet. Wobei es mir schon wichtig ist das es auch im IE funktioniert.

Woran könnte das liegen, vielleicht an den IE einstellungen oder ist das Standard das ein IE kein Request ausführen kann, was ich mal nicht annehme.

PHP:

<?php
session_start(); 
?>
<!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>
<script type="text/javascript">
<!--
 lock = false;//sperre bei laufendem request
 req  = false;//request-objekt
 objLayer=false;//container für die boxen
    
 if(window.XMLHttpRequest) 
  {
   try 
    {
     req = new XMLHttpRequest();
    } 
   catch(e) 
    {
     req = false;
    }
   } 
  else if(window.ActiveXObject) 
   {
    try 
     {
      req = new ActiveXObject("Msxml2.XMLHTTP");
     } 
    catch(e) 
     {
      try 
       {
        req = new ActiveXObject("Microsoft.XMLHTTP");
       } 
      catch(e) 
       {
        req = false;
       }
     }
   }
        

/*
 * Funktion zum Reorganisieren der Select-Felder und zum Absetzen des Requests.
 *
 * Parameter: objBox - Referenz auf das auslösende Select-Element
 */
        
function request_data(objBox)
{
 // Falls kein XMLHttpRequest-Objekt (XHR-Objekt) erstellt werden konnte -> Request abbrechen
 if(!req)
  {
   alert('dein Browser kann das nicht :o(');
   return;
  }

 // Falls bereits ein Request ausgeführt wird -> neuen Request mit Meldung abbrechen
 if(lock)
  {
   alert('Warte bitte, bis die letzte Anfrage verarbeitet wurde');
   return;
  }

   // Element mit den Select-Feldern ermitteln
   objLayer=objBox.parentNode
   // Request als besetzt markieren
   lock = true;
   // Select-Felder rückwärts durchlaufen -> nicht benötigte werden entfernt
   for(i=objLayer.childNodes.length-1;i>0;--i)
    {
        // Falls das aktuelle Select-Feld dem übergebenen entspricht -> Schleife verlassen
      if(objLayer.childNodes[i]==objBox)break;
      // Aktuelles Select-Feld entfernen
      objLayer.removeChild(objLayer.childNodes[i]);
    }

   // XHR-Objekt die Callback-Funktion zuweisen
   req.onreadystatechange = new Function('f','get_http_response()');
   // Request initialisieren (mit Timestamp, um das Verwenden von Daten aus dem Cache zu verhindern)
   req.open("GET", 'box.php?box='+ objBox.value + '&amp;' + new Date().getTime(), true);
   // Request absetzen
   req.send(true);
}

//Antwort verarbeiten
function get_http_response()
{
 //Wenn Anfrage fertig
 if(req.readyState == 4)
  {   
   //Wenn Status OK
   if(req.status == 200)
    {
     //Antwort ausgeben
     objLayer.appendChild(document.createElement('span'));
     objLayer.lastChild.innerHTML=req.responseText;
                
     //sperre entfernen
     lock=false
    }
   //Ansonsten
   else
    {
     //Statuscode ausgeben
     alert(req.statusText);
    }
   //Request beenden
   if(document.all && !window.opera)
    {
     req.abort();
    }
   lock = false;
  }
}
//-->
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Unbenanntes Dokument</title>
</head>
<body>
<? // diese Werte sind für die Datenbank! 
  
  $intID = $_SESSION['MM_UserId'];
  $vorname_gruender = $_SESSION['MM_Vorname']; 
  $nachname_gruender = $_SESSION['MM_Nachname'];
  $datum =  date("d.m.Y");
  $datum_zeit=  date("G:i");
  $zufall = rand();
 
  ?>
   
<form action="treffen_insert.php" method="post">
  <table width="690" border="0">
    <tr>
      <td width="206">&nbsp;</td>
      <td width="312"><? ?></td>
      <td width="158">&nbsp;</td>
    </tr>
    <tr>
      <td>Treffengründer: </td>
      <td><?  echo $vorname_gruender;  echo $nachname_gruender; ?></td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>Erstellt am:</td>
      <td><?  echo date("d.m.Y"); echo " "; echo "um"; echo " "; echo date("G:i"); ?></td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>Wo (Land des meetings):</td>
      <td>
    <span>
<?php
  
  define('inside',true);
 require('box.php');
  print(make_box(0));

?>
    </span>
      </td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>In (Stadt des meetings):</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>Treffen am:</td>
      <td>nach vereinbarung!</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>Kommentar:</td>
      <td><label>
        <textarea name="kommentar" class="mysel" cols="45" rows="5"></textarea>
      </label></td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>
      <label>
        <input type="submit" name="button" value="Treffen posten" />
      </label>
      </td>
      <td>&nbsp;</td>
      <td></td>
    </tr>
  </table>
</form>
</body>
</html>

Danke liebe grüße
thehasso

Sven Mintel · 4. Juni 2009

Moin,

dein Code stammt ja von diesem Beispiel hier:
http://doktormolle.de/temp/xmlhttp_comboboxes/

das funktioniert bei mir in IE6-IE8 problemlos, es gibt auch keine alerts()

Beachte in dem Beispiel jene Passage:

Code:

req.send((document.all && !window.opera)?null:true);

bei dir lautet diese nur

Code:

req.send(true);

Das Original stammte aus IE6-Zeiten, ab IE7 war diese Änderung vonnöten, wie hier beschrieben: http://www.tutorials.de/forum/javas...n-feld-aus-datenbank-fuellen.html#post1448525

thehasso · 4. Juni 2009

Hallo,

der Code, von dem standard Beispiel funktioniert bei mir ebenfalls problemlos.
Die einzigste änderung, die ich ausgeführt habe ist diese:

PHP:

<?php
$db = array(
  array('Zeugs',-1),
  array('Deutschland',0),
  array('Lebanon',0),
  array('Berlin',1), // libanon
  array('Hamburg',1), //libanon
  array('Köln',1), //libanon
  array('Frankfurt am Main',1), //libanon
  array('Düsseldorf',1), //libanon
  array('Bremen',1), //libanon
  array('Hannover',1), //libanon
  array('Stuttgart',1), //libanon
  array('Karlsruhe',1), //libanon
  array('Heidelberg',1), // libanon
  array('Beirut',2) // deutschland
);


     


function make_box($parent)
{
  global $db;
  if(@!isset($db[$parent]))return;
  
  $items=0;
  
  $box='<select name="box['.$db[$parent][0].']" onchange="request_data(this) ">
        <option value="-1">Auswahl</option>';
        
  
      foreach($db as $key => $arr)
        {
          if($parent==$arr[1] )
            {
              $items=1;
              $box.='<option value="'.$key.'">';
              $box.=htmlentities($arr[0]);
              $box.='</option>';
            }
        }
  
  $box.='</select>';
  
  return(($items) 
          ? $box
          : '<input type="submit">');
}

@print(make_box($_GET['box']));
  
?>


<?php 
  @end($_POST['box']);
  
  $stadt = @$db[$_POST['box'][key($_POST['box'])]][0];
  

// beim abschicken wird überprüft, ob die stadt eine libanesiche stadt war oder deutsche!
// wenn die stadt nicht beirut war, dann muss das land Deutschland sein!! siehe if abfrage!

  if ( $stadt != "Beirut" ) { $land = "Deutschland"; } else { $land = "Libanon"; }

  
?>

Sprich ich hab dem Array, andere Namen Verpasst, und unten eine If abfrage eingefügt. Wobei ich denke, dass auch wenig einfluss auf dem Problem hat.

Wenn dieser Code bei mir nicht funktioniert, könnte er eigentlich auch bei dir nicht funktionieren. Das ist schon verwirrend jetzt.

Hoffe es lässt sich der Fehler finden.
Danke !

Sven Mintel · 4. Juni 2009

Einen Fehler dort würde ich ausschliessen...ist dein Versuch irgendwo online?

thehasso · 4. Juni 2009

Ne, noch nicht. Copy & Paste würd bei dir eigentlich funktionieren oder?
Wichtig ist eigentlich nur ob das mit dem request bei dir funktioniert.
Also wär schon ganz ganz nett.

lg

Optionsfeld mit Javascript?

thehasso

Erfahrenes Mitglied

Maik

thehasso

Erfahrenes Mitglied

Maik

thehasso

Erfahrenes Mitglied

thehasso

Erfahrenes Mitglied

Sven Mintel

Mitglied

thehasso

Erfahrenes Mitglied

Sven Mintel

Mitglied

thehasso

Erfahrenes Mitglied

Neue Beiträge