1. Ajaxformular

broneo · 11. Juli 2006, 12:43

Hallo zusammen,

Ich fange gerade an mit Ajax zu arbeiten und habe leider ein Problem bei dem ich um eure Hilfe bitte.

Um es kurz zu machen. Ich habe ein Formular mit drei Dropdown Boxen. Zwei dieser Boxen sind statisch. Die dritte wird vom Javascript gefüllt. Ziel des Formulars ist es, einen Preis aus einer Datenbank auszulesen und diesen sobal eine der Dropdownboxen verändert wird über Ajax zu aktualisieren.

Das Problem:
Die dritte Box soll Ihre Werte ebensfalls aus der Datenbank erhalten. Das klappt auch wunderbar. ICh hole die Werte mit PHP und scheibe sie dann per Javasript in einen Div-Tag. Nur leider kann das Javascript anschließend keinen gültigen Wert aus diesem Feld auslesen.

Danke im Voraus für eure Hilfe

und hier der Quellcode:

index.html

Quellcode

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Flaggentool</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript" src="flaggentool.js"></script>
</head>
<body onLoad="getFormat();">
<form name="form1">
<select id="menge" name="menge" onChange="sndReq();">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
<option>11</option>
<option>12</option>
</select><br>
<select id="fahnenart" name="fahnenart" onChange="getFormat();">
<option>hochformat</option>
<option>querformat</option>
</select><br>
<div id="format"></div>
<br>
<div id="gesamtpreis"></div>
</form>
</body>
</html>

Alles anzeigen

js:

Quellcode

function createRequestObject() {
var ro;
var browser = navigator.appName;
if(browser == "Microsoft Internet Explorer") {
ro = new ActiveXObject("Microsoft.XMLHTTP");
} else {
ro = new XMLHttpRequest();
}
return ro;
}
var http = createRequestObject();
function getFormat(){
var fahnenart = document.getElementById('fahnenart').value;
if(fahnenart == "") fahnenart = hochformat;
http.open('get', 'getFormat.php?fahnenart=' + fahnenart);
http.onreadystatechange = handleResponse;
http.send(null);
sndReq();
}
function sndReq() {
var menge = document.getElementById('menge').value;
var fahnenart = document.getElementById('fahnenart').value;
var format = document.getElementById('format').value;
alert(format);
http.open('get', 'flaggentool.php?menge='+ menge +'&fahnenart=' + fahnenart +'&format=' + format);
http.onreadystatechange = handleResponse;
http.send(null);
}
function handleResponse() {
if(http.readyState == 4) {
var response = http.responseText;
var update = new Array();
if(response.indexOf('|' != -1)) {
update = response.split('|');
document.getElementById(update[0]).innerHTML = update[1];
}
}
}

Alles anzeigen

Torben Brodt · 11. Juli 2006, 18:32

hallo,

ganz simples JavaScript Problem.
Formulare haben zwar Values, aber Inhalte normaler Elemente kriegst du mit innerHTML

Quellcode

var menge = document.getElementById('menge').innerHTML;
var fahnenart = document.getElementById('fahnenart').innerHTML;
var format = document.getElementById('format').innerHTML;

grüße

broneo · 12. Juli 2006, 13:54

Hallo,

danke für deine Hilfe. Werds jetzt mal ausprobieren. Hoffe es funktioniert.

broneo · 13. Juli 2006, 14:43

Hallo,

inzwischen bin ich weiter. Es funktioniert, dass ich aus einer Dropdownbox einen Wert auslese und durch diesen Wert neue Werte aus der DB hole. Die schreibe ich dann in einen DIV-Tag und kann sie auch auslesen.

Allerdings, und jetzt kommt das für meine Begriffe kuriose, funktioniert dies nur wenn ich eine alert Meldung in meiner sndReq Funktion habe. Sobald ich diese entferne, wird die Seite nicht mehr richtig aktualiesiert. Dabei ist egal an welcher Stelle in der Funktion diese Message ausgegeben wird und welchen Wert sie ausgibt.

Hier der Quelltext:

index.html:

Quellcode

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Flaggentool</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript" src="flaggentool.js"></script>
</head>
<body onLoad="getFormat();">
<form name="form1">
<table width="400" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="200px">Menge:</td>
<td><select id="menge" name="menge" onChange="sndReq();">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
<option>11</option>
<option>12</option>
</select></td>
<td rowspan="4" width="200px"><div id="bild"></div>
</tr>
<tr>
<td width="200px">Fahnenart:</td>
<td><select id="fahnenart" name="fahnenart" onChange="getFormat();">
<option>hochformat</option>
<option>querformat</option>
</select></td>
</tr>
<tr>
<td width="200px">Format:</td>
<td><div id="format_div"></div>
</td>
</tr>
<tr>
<td width="200px">Gesamtpreis:</td>
<td><div id="gesamtpreis"></div></td>
</tr>
</table>
</form>
</body>
</html>

Alles anzeigen

js:

Quellcode

// JavaScript Document
function createRequestObject() {
var ro;
var browser = navigator.appName;
if(browser == "Microsoft Internet Explorer") {
ro = new ActiveXObject("Microsoft.XMLHTTP");
} else {
ro = new XMLHttpRequest();
}
return ro;
}
var http = createRequestObject();
function getFormat(){
var fahnenart = document.getElementById('fahnenart').value;
if(fahnenart == "") fahnenart = hochformat;
http.open('get', 'getFormat.php?fahnenart=' + fahnenart);
http.onreadystatechange = handleResponse;
http.send(null);
sndReq();
}
function sndReq() {
alert("test");
var menge = document.getElementById('menge').value;
var fahnenart = document.getElementById('fahnenart').value;
var format = document.getElementById('format').value;
http.open('get', 'flaggentool.php?menge='+ menge +'&fahnenart=' + fahnenart +'&format=' + format);
http.onreadystatechange = handleResponse;
http.send(null);
}
function handleResponse() {
if(http.readyState == 4) {
var response = http.responseText;
var update = new Array();
if(response.indexOf('|' != -1)) {
update = response.split('|');
document.getElementById(update[0]).innerHTML = update[1];
}
}
}

Alles anzeigen

ich hoffe das ist schonmal eine Hilfe zu der 1. Frage bezüglich der Dropdownboxen und hoffe es hat jemand eine Antwort wie ich das Problem mit der Meldung lösen kann.
Danke im Voraus[/url]

Torben Brodt · 15. Juli 2006, 12:48

Poste doch bitte mal eine Ausgabe von flaggentool.php

broneo · 15. Juli 2006, 15:28

flaggentool.php

Quellcode

<?
include 'db.php';
$menge = $_GET[menge];
$fahnenart = $_GET[fahnenart];
$format = $_GET[format];
if($menge == "")$menge = "1";
if($fahnenart == "")$fahnenart = "hochformat";
if($format == "" || $format == "undefined")$format = "80x200";
function preis($art, $groeße, $stufe)
{
$sql = "SELECT $stufe
FROM $art
WHERE format = '$groeße'";
$result = mysql_query($sql) OR die(mysql_error());
while($row = mysql_fetch_assoc($result))
{ $preis = $row[$stufe];}
return $preis;
}
function ergebnis($menge, $fahnenart, $format)
{
if($fahnenart == "hochformat")
{
if($format == "80x200" && $menge == "1")
{$ergebnis = preis($fahnenart, $format, "preistufe1");}
if($format == "80x200" && $menge >= "2")
{$ergebnis = preis($fahnenart, $format, "preistufe2");}
if($format == "80x200" && $menge >= "7")
{$ergebnis = preis($fahnenart, $format, "preistufe3");}
if($format == "100x300" && $menge == "1")
$ergebnis = preis($fahnenart, $format, "preistufe1");
if($format == "100x300" && $menge >= "4")
$ergebnis = preis($fahnenart, $format, "preistufe2");
if($format == "100x300" && $menge >= "7")
$ergebnis = preis($fahnenart, $format, "preistufe3");
if($format == "120x300" && $menge == "1")
$ergebnis = preis($fahnenart, $format, "preistufe1");
if($format == "120x300" && $menge >= "3")
$ergebnis = preis($fahnenart, $format, "preistufe2");
if($format == "120x300" && $menge >= "6")
$ergebnis = preis($fahnenart, $format, "preistufe3");
if($format == "150x400" && $menge == "1")
$ergebnis = preis($fahnenart, $format, "preistufe1");
if($format == "150x400" && $menge >= "2")
$ergebnis = preis($fahnenart, $format, "preistufe2");
if($format == "150x400" && $menge >= "4")
$ergebnis = preis($fahnenart, $format, "preistufe3");
if($format == "150x500" && $menge == "1")
$ergebnis = preis($fahnenart, $format, "preistufe1");
if($format == "150x500" && $menge == "2")
$ergebnis = preis($fahnenart, $format, "preistufe2");
if($format == "150x500" && $menge >= "3")
$ergebnis = preis($fahnenart, $format, "preistufe3");
}
if($fahnenart == "querformat")
{
if($format == "120x80" && $menge == "1")
$ergebnis = preis($fahnenart, $format, "preistufe1");
if($format == "120x80" && $menge >= "2")
$ergebnis = preis($fahnenart, $format, "preistufe2");
if($format == "120x80" && $menge >= "10")
$ergebnis = preis($fahnenart, $format, "preistufe3");
if($format == "145x100" && $menge == "1")
$ergebnis = preis($fahnenart, $format, "preistufe1");
if($format == "145x100" && $menge >= "2")
$ergebnis = preis($fahnenart, $format, "preistufe2");
if($format == "145x100" && $menge >= "10")
$ergebnis = preis($fahnenart, $format, "preistufe3");
}
$gesamtpreis = $ergebnis * $menge;
return $gesamtpreis;
}
$total = ergebnis($menge, $fahnenart, $format);
if($total != ""){
$point = ".";
$result_string = strchr($total, $point);
$length = strlen($result_string);
if(($length <= 2) && ($length > 0))
{$total .= "0€";}
if($length == 0)
{$total .= ".00€";}}
else{
$total = "Kombination nicht möglich";
}
echo 'gesamtpreis|'.$total;
?>

Alles anzeigen

getFormat.php

Quellcode

<?
include 'db.php';
$fahnenart = $_GET[fahnenart];
if($fahnenart == "") $fahnenart = "hochformat";
$sql = "SELECT format
FROM $fahnenart";
$result = mysql_query($sql) OR die(mysql_error());
echo"format_div|<select id='format' name='format' onChange='getFormat();getFlag();sndReq();'>";
while($row = mysql_fetch_assoc($result))
{echo"<option value='".$row[format]."'>".$row[format]."</option>";}
echo"</select>";
?>

Alles anzeigen

getFlag.php

Quellcode

<?
include 'db.php';
$format = $_GET[format];
$fahnenart = $_GET[fahnenart];
if($fahnenart == "")$fahnenart = "hochformat";
if($format == "")
$format = "80x200";
$sql = "SELECT bild
FROM $fahnenart
WHERE format = '$format'";
$result = mysql_query($sql) OR die(mysql_error());
while($row = mysql_fetch_assoc($result)){
echo"bild|<img src='".$row[bild]."' width='200px'></img>";
}
?>

Alles anzeigen

So das sind alle PHP dateien. ich hoffe Ihr könnt mir helfen. Und danke für eure Mühe und Zeit die Ihr schon investiert habt.

broneo · 17. Juli 2006, 18:11

Hallo,

die gute Nachricht ist, ich habe mein Formular im Firefox genauso wie ich es haben wollte ans Laufen gebracht.
Dummerweise funktioniert es im IE noch nicht.
Das Problem:
Wenn ich mit dieser Zeile Werte auslesen möchte, bekomme ich beim IE einfach gar nichts.

Quellcode

var format = document.getElementById('format').value;

Kann mir jemand da vielleicht einen Tipp geben?

Danke im Voraus

Torben Brodt · 17. Juli 2006, 20:09

aber es ist wirklich nur diese zeile?
ich hätte die ajax initialisierung auf unsere wiki version mit try-catch umgestellt

Quellcode

function createRequestObject() {
try {
req = window.XMLHttpRequest?new XMLHttpRequest():
new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {
req = null;
}
return req;
}

ansonsten hab ich auch keine idee, warum das mit .value nicht geht...
ich hab mal von einem workaround gepostet, weil der Internet Explorer mit innerHTML nicht auf select zugreifen kann

http://www.easy-coding.de/4-select-mit-2-ajax-mysql-abfragen-fuellen-t1021.html#3773

PS: in getflag.php hast du ne while schleife

Quellcode

while($row = mysql_fetch_assoc($result)){
echo"bild|<img src='".$row[bild]."' width='200px'></img>";
}

die ist ja überflüssig

broneo · 17. Juli 2006, 20:50

Danke für deine Hilfe. Werd das jetzt mal ausprobieren.
Stimmt die Schleife ist echt überflüssig. Keine Ahnung was ich mir da gedacht habe.

1. Ajaxformular

1. Ajaxformular

Quellcode

Quellcode

Quellcode

Quellcode

Quellcode

Quellcode

Quellcode

Quellcode

Quellcode

Quellcode

Quellcode

Teilen

Benutzer online 1

Tags