Frage: ID Übergabe bei Ajax Request + selectwert

Diese Seite verwendet Cookies. Durch die Nutzung unserer Seite erklären Sie sich damit einverstanden, dass wir Cookies setzen. Weitere Informationen

  • Frage: ID Übergabe bei Ajax Request + selectwert

    Mein Anliegen:

    Hi, ich bin gerade dabei meine Website auf den neusten Stand zu bringen und bin dabei auf ein Problem gestossen. Ich habe eine Ajax Request eingebaut, welche eine asynchrone Abfrage der Aktuellen Userauswahl zurückliefert. Da aber in der Regel mehrere Einträge vorhanden sind, müsste bei der Request sowohl der ausgewählte Wert inklusive der ID des Eintrages an die Request übergeben werden. Das Selectfeld löst das Javascript mittels onchange aus. Diese wiederum sendet den Auswahlwert an das php File, welches den Auswahlwert zurückliefert.

    Der Fehler:

    Nun habe ich zwei Sachen, die noch nicht wie gewünscht funzen.. Zum einen funktioniert das ganze im Moment nur beim letzten Auswahlfeld – der Wert des Selectfeldes wird angezeigt. Bei den Übrigen klappt es noch nicht. Müsste ich da zum Beispiel ein zusätzliches DIV mit einer ID einbauen, welche abgefragt wird oder gibt es da eine elegantere Lösung?

    Das zweite Problem betrifft die Übergabe vom Wert, wie auch von der ID des Beitrages. Wie könnte man das am einfachsten lösen?

    Ich bin dankbar für jede Hilfe, da ich was Javascript anbelangt ein Greenhorn bin. Ich habe mir jedoch ein paar Einführungen in das Thema angeschaut und bin mit den Grundbegriffen und dem Syntax soweit vertraut. Leider klappt mein Vorhaben aber noch nicht so wie ich es gerne hätte.


    Hauptfile: index.php

    Quellcode

    1. <html><head></head>
    2. <script type="text/javascript">
    3. function selectAuswahl() {
    4. for(i=0; i < document.Auswahlform.anzahl.length; ++i)
    5. if (document.Auswahlform.anzahl.options.selected == true)
    6. // richtige Ausgabe des im Selectfeld angewaehlten Wertes
    7. var wert = document.Auswahlform.anzahl.options[i].value;
    8. var http = null;
    9. if (window.XMLHttpRequest) {
    10. http = new XMLHttpRequest();
    11. } else if (window.ActiveXObject) {
    12. http = new ActiveXObject("Microsoft.XMLHTTP");
    13. }
    14. if (http != null) {
    15. http.open("post", "ajax_te.php", true);
    16. http.onreadystatechange = ausgeben;
    17. http.setRequestHeader(
    18. "Content-Type",
    19. "application/x-www-form-urlencoded");
    20. // dies wird nicht ausgegeben:
    21. http.send('stueck='+wert);
    22. }
    23. function ausgeben() {
    24. if (http.readyState == 4) {
    25. document.getElementById('stueckshow').innerHTML =
    26. http.responseText;
    27. }
    28. }
    29. }
    30. </script>
    31. <body>
    32. <form name="Auswahlform">
    33. <?php
    34. echo '<select name=" anzahl" id="anzahl" class="eingabefeld" onChange="javascript:selectAuswahl(anzahl, id)">';
    35. $anzh_counteranz = "0";
    36. while($anzh_counteranz!="100"){
    37. $anzh_counteranz++;
    38. echo '<option value="'.$anzh_counteranz.'"';
    39. if (!(strcmp($anzh_counteranz, $row [‘anzah’l]))) {echo "selected=\"selected\"";}
    40. echo '>'.$anzh_counteranz.'</option>';
    41. }
    42. echo '</select>';
    43. ?>
    44. </form>
    45. <div id="stueckshow"></div>
    46. </body>
    47. </html>
    Alles anzeigen


    Das Ajax-File (Auswertung): ajax_te.php

    Quellcode

    1. <?php
    2. $stueck = $_POST['stueck'];
    3. echo $anzeige;
    4. ?>

    Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von Torben Brodt () aus folgendem Grund: formatierung

  • Du benötigst, keine ID, wenn du der Funktion direkt die Referenz des Formularelementes übergibst.
    Beispiel HTML

    Quellcode

    1. <select name=" anzahl" id="anzahl" class="eingabefeld" onChange="selectAuswahl(this)">


    Beispiel JavaScript

    Quellcode

    1. function selectAuswahl(Auswahlform) {
    2. for(i=0; i < Auswahlform.length; ++i) {



    Wie das ganz am Ende aussieht, ist in unserem Wiki Beitrag geschildert: [wiki]Formulare mit AJAX.. und ohne[/wiki]
    Lies ihn dir bitte mal durch!
  • Versuch Nr 1

    Vielen Dank für deine Antwort.

    Ich habe in der Zwischenzeit die Wikibeiträge gelesen und bin nun ein kleines Bisschen schlauer als vorher ;-). Ich habe deinen Tipp beherzigt und den Code entsprechend angepasst. Ich bekomme jedoch immer nur den Auswahlwert des letzten Selectfeldes zurück. Nachdem was ich gelesen habe, liegt das zum einen am Javascript Teil und zum andern am php File, welches die Werte in der Weise;

    foreach($_POST['checkbox'] as $val) {
    printf("%s wurde angeklickt
    ", $val);
    }


    Entgegennehmen muss. Ist das soweit halbwegs richtig?
    Bei der Übermittlung scheint mit;

    <select name="anzahl" id="anzahl" class="eingabefeld" onChange="selectAuswahl(this)">


    Alles zu funktionieren. Kannst du mir beim Javascriptteil etwas unter die Arme greifen ;-p. Ich bin da wirklich noch ein Greenhorn, werde mich jedoch in die Materie einarbeiten müssen ;-). Ich habe das ganze auch schon mit Firebugg angeschaut und wurde daraus auch nicht schlauer, bin dir für jede Hilfe dankbar.

    Freundliche Grüsse
  • Alternative Lösung

    Ich habe mir noch eine alternative Lösung für mein Anliegen ausgedacht. Wäre es nicht möglich, lediglich einen String, per Javascript an das externe php-File zu übermitteln, welcher die PHP Variablen enthält und dann diese Verarbeitet und die entsprechenden Ausgaben liefert. Wäre es so möglich, mehrere Ausgabebereiche gleichzeitig anzusteuern?

    zB.
    User Grp 1 Total: <AJAX AUSGABE > 20 <AJAX AUSGABE>
    User Grp 2 Total: <AJAX AUSGABE > 10 <AJAX AUSGABE>
    User aller Grp’s: <AJAX AUSGABE > 30 <AJAX AUSGABE>

    Ich hoffe, ich habe mich mit meinem AJAX-Leihen- Jargon verständlich ausgedrückt ;-). Ich möchte mit den Abgefragten Werten weiter Kalkulationen anstellen und dies soweit als möglich in php, weil ich mich da besser auskenne. Ist das überhaupt möglich in der Form?
  • Ich hab noch etwas experimentiert und konnte nun eine Aktualisierung nach meinen Wünschen vornehmen. Nun habe ich aber noch zwei kleine Fragen. Da die Auswahl der Anzahl als Liste daherkommt – mehrere Einträge möglich muss ich zwingend nebst der ausgewählten Anzahl die ID des Beitrages übergeben. Wie kann ich nebst der Variable $anzahl auch die ID des Beitrages mittels;

    <select name="anzahl" id="anzahl" class="eingabefeld" onChange="selectAuswahl(this)">

    Übergeben. Die ID ist eine php Variable, welche dem Beitrag zugeordnet ist.


    Die zweite Frage, wie muss ich die beiden Werte in Javascript korrekt abfangen und an das ausgelagerte File weiterleiten?

    <script type="text/javascript">
    function selectAuswahl(Auswahlform) {
    for(i=0; i < Auswahlform.length; ++i)
    if (document.Auswahlform.anzahl.options.selected == true)
    var wert = document.Auswahlform.anzahl.options[i].value;
    var http = null;
    if (window.XMLHttpRequest) {
    http = new XMLHttpRequest();
    } else if (window.ActiveXObject) {
    http = new ActiveXObject("Microsoft.XMLHTTP");
    }
    if (http != null) {
    http.open("post", "ajax_te.php", true);
    http.onreadystatechange = ausgeben;
    http.setRequestHeader(
    "Content-Type",
    "application/x-www-form-urlencoded");
    http.send('anzahl='+wert);
    }
    function ausgeben() {
    if (http.readyState == 4) {
    document.getElementById('anzshow').innerHTML =
    http.responseText;
    document.getElementById('anzshow').innerHTML = xmlHttpsObject.responseText;
    xmlhttp.send();
    }
    }
    }
    </script>

    Kann ich diese beim Aufruf des Files anhängen?

    xmlHttpsObject.open('POST','ajax_te.php?id=<?php echo $_GET[‘id’]; ?>');


    Danke für deine Hilfe im Voraus.
  • Mehrere Ausgaben

    Ich habe noch eine weitere Frage. Wie kann ich beim Javascript die Rückgabewerte auf mehrere DIV’s verteilen.

    <div id=“ausg1“></div>
    <div id=“ausg2“></div>
    <div id=“ausg3“></div>

    Dieser Teil wird mit diesem Code ausgegeben.
    if (http != null) {
    http.open("post", "ajax_te.php", true);
    http.onreadystatechange = ausgeben;
    http.setRequestHeader(
    "Content-Type",
    "application/x-www-form-urlencoded");
    http.send('anzahl='+wert);
    }
    function ausgeben() {
    if (http.readyState == 4) {
    document.getElementById('anzshow').innerHTML =
    http.responseText;
    document.getElementById('anzshow').innerHTML = xmlHttpsObject.responseText;
    xmlhttp.send();
    }
    }


    Dieser Teil ist aber nur für einen Antwortbereich konzipiert. Wie müsste ich das Javascript anpassen damit ich mindestens 4 Ausgaben füttern kann? Ich hoffe du kannst mir weiterhelfen bei meinen Codanfängen mit Javascript. Ich habe wirklich versucht aus dem ganzen etwas schlauer zu werden. Vielleicht kannst du mir ja zum entsprechenden Durchbruch verhelfen ;-).

    Freundliche Grüsse
  • Nur noch ein kleiner Bugg mit der Codierung

    Hi

    Nach langem Hin & Her konnte ich die benötigten Anpassungen so anbringen, dass die Funktionalität den Anforderungen entspricht. Es klappt alles wie es sollte bis auf folgenden Fehler.

    Da bei der Auswahl des Selectfeldes ein onchange=“this.form. submit()“ name=“wdel=2&stueck“ aufgerufen wird, wird der Inhalt in die URL integriert – da läuft aber etwas schief. Ich bekomme folgende Ausgabe der URL:

    wdel%3D2%26stueck=7

    Da das ganze mittel SSL verschlüsselt wird, habe ich mir gedacht, es könnte daran liegen. Wie kann ich diesen kleinen Fehler beheben und die URL wie gewünscht ausgeben? Ich bin dankbar für jede Hilfe.

    Greez @ll