✔ Ergebnis nach Radiobutton-Auswahl in div-Bereich anzeigen

N

NTDY

Erfahrenes Mitglied
Ich würde gern ein Forumlar haben, bei dem ich mittels mehrerer Auswahlmöglichen eine Ergebnismenge in einem div-Bereich angezeigt bekomme. Im Hintergrund soll eine Datenbankabfrage erfolgen, die die Ergebnismenge in Echtzeit berechnet und anzeigt.

Bsp.für eine DVD-Auswahl:

1. Genre:
Auswahl per Radiobutton:
-Horror
-Komödie
-Science Fiction

2. Spielfilmlänge:
Auswahl per Radiobutton:
-bis 90min
-bis 120min
-über 150min

3. Herstellungsland:
Auswahl per Radiobutton:
-USA
-D
-IT
-FR

Anzeigt werden soll die Ergebnismenge bereits bei der ersten Auswahl eines Feldes und die Ergebnismenge soll stets mehr und mehr eingeschränkt werden, je mehr ich auswähle.

Für eine Hilfe wäre ich sehr dankbar.

Besten Gruß
 
Moin,

hast du denn bereits einen Ansatz?

Rein vom Ablauf her ginge das so:
  1. Änderungen der Buttons überwachen, falls eine eintrifft:....
  2. ....lese die values der gewählten Buttons aus
  3. ....diese values übermittle per AJAX an ein serverseitiges Skript, welches die Ergebnisse aus der DB holt
  4. ....die Antwort des serverseitigen Skriptes im <div> ausgeben
 
Nach ein paar Stunden Suche und noch ein paar Tagen mehr Programmierarbeit, habe ich dann doch ein Ergebnis geschaffen. Für alle, die irgendwann einmal solch eine Lösung benötigen, hier das Ergebnis:

index.php
PHP: 
<!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" src="ajax.js"></script>
<script type="text/javascript" src="suggest.js"></script>
</head>
<body>
<form name="form">
	<input type="radio" name="vorname" value="A" id="vorname" onchange="load()"> Vornamen mit Anfangsbuchstaben A<br />
    <input type="radio" name="vorname" value="T" id="vorname" onchange="load()"> Vornamen mit Anfangsbuchstaben T<br />
    <br />
	<input type="radio" name="name" value="L" id="name" onchange="load()"> Name mit Anfangsbuchstaben L<br />
    <input type="radio" name="name" value="M" id="name" onchange="load()"> Name mit Anfangsbuchstaben M<br />    
</form>   
<hr size="1" width="80%" color="#999999" /><br /> 
	<div id="text">Suchergebnis</div>
</body>
</html>

ajax.js
PHP: 
function Ajax() {
  //Eigenschaften deklarieren und initialisieren
  this.url="";
  this.params1="";
  this.params2="";  
  this.method="GET";
  this.onSuccess=null;
  this.onError=function (msg) {
    alert(msg)
  }
}

Ajax.prototype.doRequest=function() {
  //Üeberpruefen der Angaben
  if (!this.url) {
    this.onError("Es wurde kein URL angegeben. Der Request wird abgebrochen.");
    return false;
  }

  if (!this.method) {
    this.method="GET";
  } else {
    this.method=this.method.toUpperCase();
  }

  //Zugriff auf Klasse für readyStateHandler ermöglichen  
  var _this = this;
  
  //XMLHttpRequest-Objekt erstellen
  var xmlHttpRequest=getXMLHttpRequest();
  if (!xmlHttpRequest) {
    this.onError("Es konnte kein XMLHttpRequest-Objekt erstellt werden.");
    return false;
  }
  
  //Fallunterscheidung nach Übertragungsmethode
  switch (this.method) {
    case "GET": xmlHttpRequest.open(this.method, this.url+"?"+this.params1+"%20"+this.params2, true);
                xmlHttpRequest.onreadystatechange = readyStateHandler;
                xmlHttpRequest.send(null);
                break;
    case "POST": xmlHttpRequest.open(this.method, this.url, true);
                 xmlHttpRequest.onreadystatechange = readyStateHandler;
                 xmlHttpRequest.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
                 xmlHttpRequest.send(this.params1+"&"+this.params2);
                 break;
  }  

  //Private Methode zur Verarbeitung der erhaltenen Daten
  function readyStateHandler() {
    if (xmlHttpRequest.readyState < 4) {
      return false;
    }
    if (xmlHttpRequest.status == 200 || xmlHttpRequest.status==304) {
      if (_this.onSuccess) {
        _this.onSuccess(xmlHttpRequest.responseText, xmlHttpRequest.responseXML);
      }
    } else {
      if (_this.onError) {
        _this.onError("["+xmlHttpRequest.status+" "+xmlHttpRequest.statusText+"] Es trat ein Fehler bei der Datenbertragung auf.");
      }
    }
  }
}

//Gibt browserunabhängig ein XMLHttpRequest-Objekt zurück
function getXMLHttpRequest() 
{
  if (window.XMLHttpRequest) {
    //XMLHttpRequest für Firefox, Opera, Safari, ...
    return new XMLHttpRequest();
  } else 
  if (window.ActiveXObject) {
    try {   
      //XMLHTTP (neu) für Internet Explorer 
      return new ActiveXObject("Msxml2.XMLHTTP");
    } catch(e) {
      try {        
        //XMLHTTP (alt) für Internet Explorer
        return new ActiveXObject("Microsoft.XMLHTTP");  
      } catch (e) {
        return null;
      }
    }
  }
  return false;
}

suggest.js
PHP: 
function radioWertNachname(rObj) {
	for (var i=0; i<rObj.length; i++) if (rObj[i].checked) return rObj[i].value;
	return false;
}

function radioWertName(rObj2) {
	for (var j=0; j<rObj2.length; j++) if (rObj2[j].checked) return rObj2[j].value;
	return false;
}
  
//Instanz der Klasse Ajax erzeugen und mit der Datenübertragung starten
function load()
{	

	var vorname=radioWertNachname(document.form.vorname);
	var name=radioWertName(document.form.name);	
    
  with (new Ajax()){
    url="title_find.php";
    method="POST";
    params1="vorname="+vorname;
    params2="name="+name;	
    onSuccess=successHandler;
    onError=errorHandler;
    doRequest();
  }
  
	//Den Text in die Seite einfügen
	function successHandler(txt,xml){
	  document.getElementById("text").innerHTML=txt;
	  
	}
	
	//Fehler
	function errorHandler(msg){
	  document.getElementById("text").innerHTML=msg;
	}

}

title_find.php
PHP: 
<?php
$vorname=$_POST["vorname"];
$name=$_POST["name"];
echo "<b>Vorname mit  Anfangsbuchstaben: $vorname. Name mit  Anfangsbuchstaben $name.</b><br>";
$database="test";
$conn = @mysql_connect("localhost", "root","") or die("Verbindung zu Datenbank fehlgeschlagen");
$rs = @mysql_select_db($database, $conn) or die("Auswahl der Datenbank fehlgeschlagen");
$liste="";
if($vorname!="" and $name!=""){
	$frage=mysql_query("SELECT * FROM test WHERE vorname LIKE '".mysql_real_escape_string($vorname)."%' AND name LIKE '".mysql_real_escape_string($name)."%' ");	
}elseif($name!=""){
	$frage=mysql_query("SELECT * FROM test WHERE name LIKE '".mysql_real_escape_string($name)."%'");	
}elseif($vorname!=""){
	$frage=mysql_query("SELECT * FROM test WHERE vorname LIKE '".mysql_real_escape_string($vorname)."%'");	
}
	while ($antwort=mysql_fetch_array($frage)){  
		$liste.= $antwort['vorname'].' '.$antwort['name'].'<br>';
	}
echo $liste;
?>

Und noch eine Datenbank zum Schnelltest:

PHP: 
CREATE DATABASE `test` DEFAULT CHARACTER SET latin1 COLLATE latin1_general_ci;
USE `test`;

CREATE TABLE `test` (
  `vorname` varchar(10) collate latin1_general_ci NOT NULL,
  `name` varchar(10) collate latin1_general_ci NOT NULL
) ENGINE=MyISAM DEFAULT CHARSET=latin1 COLLATE=latin1_general_ci;

INSERT INTO `test` (`vorname`, `name`) VALUES 
('axel', 'mensch'),
('bernd', 'mann'),
('andreas', 'loewe'),
('thorsten', 'leni'),
('tomm', 'lewis'),
('barry', 'mursk'),
('tandem', 'meene'),
('tango', 'maus'),
('andrew', 'levi'),
('tilo', 'low');

Was mich noch interessiert ist, wie ich eine schöne Ajax-Load-Generator Grafik einblenden lassen kann, während die Datenbank sucht.
 
Hi nochmal,

ist übrigens ein tolles Beispiel, das du zur Verfügung gestellt hast - Danke!

Eine Kleinigkeit würde ich jedoch noch ändern. Den Rückgabestring $liste in title_find.php würde ich mit rawurlencode kodieren.
Code: 
echo rawurlencode($liste);
Auf der Clientseite würde ich ihn mit der Methode unescape wieder decodieren.
Code: 
//Den Text in die Seite einfügen
function successHandler(txt,xml){
  document.getElementById("text").innerHTML=unescape(txt);   
}
Ciao
Quaese
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück