Änderung radio button lädt Seite erneut (mit Hilfe von AJAX)

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

  • Änderung radio button lädt Seite erneut (mit Hilfe von AJAX)

    Hallo Leute,

    ich würde gerne am Anfang eines Formulars zwei Radio Buttons anzeigen lassen, wobei per Default kein Wert ausgwählt ist. Klickt nun der Nutzer auf eine Radio Button wird mittels AJAX das Formular neu geladen. Ich benötige unbedingt AJAX, damit ich PHP Code ausführen kann. Ich habe bereits viel rumgesucht und konnte bis jetzt nichts dergleichen finden. Wer kann mir helfen?

    Danke im Voraus und viele Grüße, Björn

    Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von dabjoern ()

  • Okay, ich versuche mal, mein Ziel zu beschreiben:



    • User öffnet Formular, um Datensatz anzulegen
    • als erstes sieht er nur zwei Radio Buttons (Ja / Nein), der Rest des Formulars ist nicht verfügbar (ausgeblendet durch PHP Bedingung)
    • User klickt einen Radio Button
    • das Formular wird durch AJAX neu geladen (ohne Seite neu zu laden) und sieht vollständiges Formular
    • der Reload mittels AJAX ist notwendig, damit ich via PHP die Auswahl der Radio Buttons prüfen kann, denn anhand der Auswahl werden die Pflichtfelder etc. bestimmt


    Ich habe bisher irgendwo einen Code Schnippsel gefunden, der schon ein wenig was macht, aber nicht ausreicht:

    Quellcode

    1. function sendRequest() {
    2. var req;
    3. try {
    4. req = window.XMLHttpRequest?new XMLHttpRequest():
    5. new ActiveXObject("Microsoft.XMLHTTP");
    6. } catch (e) {
    7. //Kein AJAX Support
    8. }
    9. req.onreadystatechange = function() {
    10. if ((req.readyState == 4) && (req.status == 200)) {
    11. document.getElementById('inhalt').innerHTML = req.responseText;
    12. }
    13. };
    14. var id = document.getElementById('edit-field-startup-inhaber-key').value;
    15. req.open('post', '/startup/add');
    16. req.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    17. req.send('s='+ id);
    18. }
    Alles anzeigen


    Die Funktion rufe ich via onChange Attribut auf. Der Code ist aber nur für select Boxen ausgelegt und er hat das Statement req.open. Das stört, denn er öffnet die komplette Seite nochmal in dem div mit der id inhalt. Für mich wäre aber ein _top oder _parent sinnvoll.

    Danke und Grüße, dabjoern

    EDIT: Mir ist noch aufgefallen, dass nach dem Senden mit o.g. Skript kein value übergeben wird, dass brauche ich aber wirklich, damit ein PHP Skript was zu tun hat ;). Hier mal der HTML Code des Selects (was aber durch Radio Buttons ersetzt werden soll):

    Quellcode

    1. <select id="edit-field-startup-inhaber-key" class="form-select required" onchange="sendRequest()" name="field_startup_inhaber[key]">
    4. <option selected="selected" value=""/>
    6. <option value="1">Ja</option>
    8. <option value="2">Nein</option>
    9. </select>

    Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von dabjoern ()

  • Danke d0nut. Damit steht mir der Wert aber nur in der JS Funktion zur Verfügung. Das reicht mir nicht aus, d.h. ich muss den value mit PHP verarbeiten können. Meine Probleme sind:

    • values stehen nicht dem PHP Skript zur Verfügung
    • die Zeile req.open('post', '/startup/add'); bewirkt, dass die Seite "/startup/add" in einem div innerhalb der Seite geladen wird; das möchte ich aber nicht; ich benötige sowas wie _parent oder _top

    Vielleicht stelle ich mich dumm an, aber ich habe noch nie mit AJAX gearbeitet. Sorry :(

    Grüße, dabjoern

  • dabjoern schrieb:

    values stehen nicht dem PHP Skript zur Verfügung
    du musst es auch per send verschicken.

    Quellcode

    1. function foo(wert) {
    2. ...
    3. req.send('s='+ id + '&peter=' + wert);
    4. }

    das sind halt die JavaScript Basics, die du für AJAX brauchst. Die solltest du dir unbedingt anschauen, bevor du weiterarbeitset.
    Wie du mit Frames oder der URL arbeitest erfährst du hier:

    Weitere AJAX / JavaScript Literatur gibts im Literatur Thread

  • Ich habe weiter an dem Skript gebaut:

    Quellcode

    1. function sendRequest(value, url) {
    2. var http_request = false;
    3. var id = document.getElementById('edit-field-startup-inhaber-key').value;
    4. if (window.XMLHttpRequest) { // Mozilla, Safari,...
    5. http_request = new XMLHttpRequest();
    6. } else if (window.ActiveXObject) { // IE
    7. http_request = new ActiveXObject("Microsoft.XMLHTTP");
    8. }
    9. http_request.onreadystatechange = function() {
    10. //checks if the response was received
    11. if ((http_request.readyState == 4) && (http_request.status == 200)) {
    12. document.getElementsByTagName('html')[0].innerHTML = http_request.responseText;
    13. }
    14. };
    15. http_request.open('POST', url);
    16. http_request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    17. http_request.send('s='+ id + '&inhaber=' + value);
    18. }
    Alles anzeigen


    Geholfen hat mir vor allem sitepoint.com/article/remote-scripting-ajax. Die Seite wird nun neu "geladen" aber irgendwie verschwinden einige Hintergrundbilder und die Schriftformatierung (alles definiert im CSS). Wie kann das sein? Auch verursacht der Code noch einen Fehler im IE: "Die innerHTML Eigenschaften konnten nicht festgelegt werden. Das Zielelement ist nicht gültig." Google lieferte mir nichts dazu (Suche nach dem Fehler).

    Grüße, dabjoern

    EDIT: Ich habe es auch mal mit http_request.setRequestHeader('Content-Type', 'text/html'); probiert, doch dann passiert gar nichts mehr...

    Dieser Beitrag wurde bereits 2 mal editiert, zuletzt von dabjoern ()

  • Habe das Skript erweitert:

    Quellcode

    1. function sendRequest(url, field, value) {
    2. var http_request = false;
    3. if (window.XMLHttpRequest) { // Mozilla, Safari,...
    4. http_request = new XMLHttpRequest();
    5. } else if (window.ActiveXObject) { // IE
    6. http_request = new ActiveXObject("Microsoft.XMLHTTP");
    7. }
    8. http_request.onreadystatechange = function() {
    9. //checks if the response was received
    10. if ((http_request.readyState == 4) && (http_request.status == 200)) {
    11. document.getElementsByTagName('body')[0].innerHTML = http_request.responseText;
    12. }
    13. };
    14. http_request.open('POST', url, true);
    15. http_request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    16. http_request.send('&' + field + '=' + value);
    17. }
    Alles anzeigen


    Nun läuft es! Eine weitere gute Hilfe war auch: developer.mozilla.org/de/docs/AJAX:Getting_Started.

    Unterschied ist, dass es document.getElementsByTagName('body')[0].innerHTML heißen muss (body anstatt html).

    Was ich jetzt noch lösen muss, ist, dass der jeweilige Radio Button gewählt ist (checkec="checked"). Aber das mache ich (sicherlich), via PHP.

    Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von dabjoern ()

  • Mmh, alles funktioniert noch nicht. Innerhalb des nachzuladenden Blocks liegen einige Felder, die ebenfalls mit JavaScript / AJAX Methoden ausgewertet / verarbeitet werden. Das Ganze, was ich hier schreibe, findet in Drupal Anwendung. Dort gibt es Freetaging Felder (Live Suche). Die Funktion geht nun nicht mehr. Hat jemand eine Idee, warum nicht?

    Güße, dabjoern