Ajax wird nicht im Formular erkannt

Question

Hallo allerseits,

ich habe ein kleines Problem mit Ajax und PHP. Und zwar möchte ich, dass nach Ändern eines Auswahlfelds sich das andere Auswahlfeld ändert. Das ist erstmal kein Problem. Das Problem ist jedoch wie ich auf der Hauptseite das Auswahlfeld in eine Datenbank eintragen kann. Denn wenn ich einfach den Variablennamen angebe, ist die Datenbank leer.

Hier das Script:

<script type="text/javascript" language="javascript">

var http_request = false;

function makeRequest(url, parameters) {

http_request = false;

if (window.XMLHttpRequest) { // Mozilla, Safari,...
http_request = new XMLHttpRequest();

} else if (window.ActiveXObject) { // IE
try {
http_request = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
http_request = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {}
}
}

if (!http_request) {
alert('HTTP Instanz konnte nicht erstellt werden.');
return false;
}
http_request.onreadystatechange = htmlContents;
http_request.open('POST', url, true);
http_request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
http_request.setRequestHeader("Content-length", parameters.length);
http_request.setRequestHeader("Connection", "close");
http_request.send(parameters);
}

function get(obj){
var poststr = "txt=" + encodeURI(document.getElementById("search").value );
makeRequest('ajaxing.php', poststr);
}

function htmlContents() {

if (http_request.readyState == 4) {
if (http_request.status == 200) {
document.getElementById('myspan').innerHTML = http_request.responseText;
} else {
alert('There was a problem with the request.');
}
}

}
</script>

So und das PHP-Script:

$stadt = array("Berlin", "München", "Köln");
foreach ($stadt as $meine) { echo "<option value=\"$meine\">$meine</option>"; }

So und das ganze wird jetzt in der Hauptseite per

<span name="myspan" id="myspan"></span>

angezeigt.

Wenn ich nun das <span name...> innerhalb des Formulars auf der HTML-Seite einfüge, dann wird es zwar angezeigt, aber beim Absenden des Formulars wird die Variable $stadt nicht erkannt.
Muss ich in der AJAX-Datei die $stadt separat übertragen?

Ich hoffe, irgendjemand hat das Problem verstanden.

Vielen Dank,

Üsch

Answer 1

var poststr = "txt=" + encodeURI(document.getElementById("search").value );
makeRequest('ajaxing.php', poststr);

poststr ist das, was gesendet wird. Und momentan sendest du logischerweise nur txt=InhaltAusSearch. Das müsstest du also folgendermaßen erweitern:

var poststr = "txt=" + encodeURI(document.getElementById("search").value )+ "&stadt=" + encodeURI(document.getElementById("wieAuchImmerDieIDvonDemElementIstWasStadtZurAuswahlStellt").value );
makeRequest('ajaxing.php', poststr);

Answer 2

Sorry, da hab ich was falsch kopiert. In der Javascript-Datei steht

var poststr = "txt=" + encodeURI(document.getElementById("stadt").value );

Dort liegt aber auch nicht das Problem, oder? Denn die Variable "stadt" wird ja korrekt übergeben an die Ajaxdatei. Sobald ich eine bestimmte Stadt ausgewählt habe, zeigt sich das von der Ajax-Datei generierte Auswahlfeld. Das bedeutet, dass die Variable $stadt zwar an Ajax übergeben wird, aber wie bekomme ich das Auswahlfeld der Ajaxdatei ($bezirk) zurück in meine Hauptseite, so dass ich in der Hauptseite nach einem Klick auf den Button die Variabel $bezirk verarbeiten kann?

Momentan liefert $bezirk ein leeres Ergebnis und nicht das, was im Auswahlfeld ausgewählt wurde.

Vielen Dank und schöne Grüße von Üsch

Answer 3

Das ergibt jetzt dieselbe Antwort von mir.

Das, was der Browser dem Server schickt, sieht immer so aus:

Variable=Wert&AndereVariable=Wert&DritteVariable=GanzAndererWert

Dein zu schickender Text müsste also so aussehen:

stadt=auswahl&bezirk=auswahl

...genauso wie in meiner vorigen Antwort. Du musst es bloß umschreiben und GetElementById() jeweils auf das <SELECT> der Stadt anwenden (keine Ahnung, welche ID du dem gegeben hast) und auf das <SELECT> des Bezirks (ebenfalls weiß ich die ID davon nicht - hast ja nicht das komplette HTML-Dokument gepostet).

Answer 4

Verstehe ich nicht. Ich möchte ja nicht $bezirk an Ajax schicken.
Das

encodeURI(document.getElementById("wieAuchImmerDieIDvonDemElementIstWasStadtZurAuswahlStellt").value );

würde doch bewirken, dass die Variable "wieAuchImmerDieIDvonDemElementIstWasStadtZurAuswahlStellt" an die Ajaxdatei gesendet wird, so dass sie dort verarbeite werden kann, oder nicht? Würde es nicht mehr Sinn machen, in der ajaxing.php etwas zu schreiben, dass die Variable "bezirk" auch auf der Hauptseite zur Verfügung steht?

Hier ist der HTML-Teil (bericht_neu.php):

$ausgabe3.="<form action='".$PHP_SELF."' method='post' enctype=\"multipart/form-data\" class=\"formular\" name='bericht'>\n";
$ausgabe3.="Titel<br><input type=\"text\" class=\"eingabe_login\" value=\"$title\" name=\"title\" size=\"24\" maxlength=\"60\">\n";
$ausgabe3.="<br>Beitrag<br><textarea name=\"beitrag\" class=\"beitrag\" rows=\"4\" cols=\"40\">$beitrag</textarea>\n";
$ausgabe3.="
<table width=\"533\" border=\"0\" cellspacing=\"0\" cellpadding=\"0\">
<tr>
<td width=\"170\">Reiseart</td>
<td width=\"170\">Region</td>
<td width=\"193\">Reisel&auml;nge</td>
</tr>
<tr>

<td width=\"170\"><select name=\"region\" id=\"region\" onchange=\"get(this.parentNode); return false;\" autocomplete=\"off\" class=\"select\" size=\"1\">
<option value=\"-\">--- Bitte ausw&auml;hlen ---</option>
<option value=\"Nördliches Bergland\">N&ouml;rdliches Bergland</option>
<option value=\"Zentralregion\">Zentralregion</option>
<option value=\"Nordpazifik\">Nordpazifik</option>
<option value=\"Zentralpazifik\">Zentralpazifik</option>
<option value=\"Südpazifik\">S&uuml;dpazifik</option>
<option value=\"Karibik-Atlantik\">Karibik-Atlantik</option>
<option value=\"Rundreise\">Rundreise</option>
</select></td>

</tr>
<tr height=\"21\">
<td width=\"170\" height=\"21\"></td>
<td width=\"170\" height=\"21\"><span name=\"myspan\" id=\"myspan\"></span></td>
<td width=\"193\" height=\"21\"></td>
</tr>
</table>";

Hier die Ajaxdatei (ajaxing.php):

header('Content-type: text/html; charset=ISO-8859-1');
$no_city = "Keine Stadt in Nähe";
$rundreise = "Rundreise in Region";
if($_POST['txt'] == "Zentralregion") {
$stadt = array("Berlin", "München", "Köln");
echo "Stadt";
echo "<select name=\"stadt\" id=\"stadt\" class=\"select\" size=\"1\">";
echo "<option value=\"no_city\" style=\"background: #d8d8d8\">$no_city</option>";
echo "<option value=\"rundreise\" style=\"background: #d8d8d8\">$rundreise</option>";
foreach ($stadt as $meine) { echo "<option value=\"$meine\">$meine</option>"; }
echo "</select><br><input type=\"radio\" name=\"position\" value=\"in\"> In <input type=\"radio\" name=\"position\" value=\"naehe\"> In der&nbsp;N&auml;he";

Und der Javascriptteil steht ja schon oben.

Answer 5

Ich geh mal davon aus, dass das Formular noch mit </FORM> abgeschlossen wird. Gib doch mal in jedem Fall im Ziel-PHP aus:

print_r($_REQUEST);die;

Answer 6

Wenn ichs in der ajaxing.php einfüge, kommt:

[txt] => Zentralregion [PHPSESSID] => fd799988 [visited] => 1

bzw. in der bericht_neu.php steht dann:

Array ( [PHPSESSID] => fd765dd222d48d999988 [visited] => 1 [__utmz] => 235031...

Answer 7

Hallo Uesch,

wenn ich dich richtig verstehe gilt:

du ergänzt nachträglich ein Formular via AJAX/innerHTML um select- und input-Felder

das Einfügen klappt auch, die felder werden wie gewünscht angezeigt

beim Absenden des Formulares werden die Inhalte dieser Elemente nicht mit gesendet

OK?

Dann ist gerade bei dieser Materie der Rat, in Formularelemente mit den DOM-Methoden einzufügen, damit der Browser sie korrekt zuordnet (wobei für den IE die Sondersyntax bei input-Feldern zu beachten ist)

katy

PS: dein span ist komplett überflüssig, gib die ID dem umgebenden td und lass das sinnlose und an dieser Stelle unzulässige name-Attribut weg.

Answer 8

Hey, danke für eure Antwort. So wie Katy mein Problem beschrieben hat, ist es richtig. Die Inhalte werden beim Senden nicht mit gesendet.

Was meinst du damit, dass ich in Formularelemente die DOM-Methoden einfüge? Unter DOM-Methode würde ich sowas verstehen wie "getElementById" oder "getElementsByName" verstehen. Meinst du, dass die Formulardaten nicht korrekt übertragen werden, liegt daran, dass der Browser die Formularelemente nicht genau zuordnen kann?

Ich verstehe nicht ganz, wo ich diese DOM-Methode anwenden soll?

Answer 9

Hallo Uesch,

DOM ist bei weitem mehr als ID und name. Mit document.createElement erstellst du neue Elemente, über options kannst du ein so erschaffenes select-Feld füllen. Zu dem IE-Bug kannst du dich hier belesen im Forum-SelfHTML.

katy

Answer 10

Aber wie kann ich diese DOM-Methode verwenden, um das Ajaxproblem zu lösen? Ich würde sagen, die DOM-Methode ist nützlich, wenn man das ganze mit Javascript lösen möchte, oder?