Formular und ajax

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

  • Formular und ajax

    Ich habe in diesem Forum ein Code gefunden, den ich nun soweit verändern möchte, dass alle Formularfelder mit [coderwiki]Informationen/Ajax[/coderwiki] aktualisiert werden.

    Dazu habe ich mal folgendes probiert:

    Quellcode

    1. <html>
    2. <head>
    3. <script type="text/Javascript">
    4. <!--
    5. function createXMLHttpRequest() {
    6. var ua;
    7. if(window.XMLHttpRequest) {
    8. try {
    9. ua = new XMLHttpRequest();
    10. } catch(e) {
    11. ua = false;
    12. }
    13. } else if(window.ActiveXObject) {
    14. try {
    15. ua = new ActiveXObject("Microsoft.XMLHTTP");
    16. } catch(e) {
    17. ua = false;
    18. }
    19. }
    20. return ua;
    21. }
    23. var req = createXMLHttpRequest();
    25. function sendRequest() {
    26. id = document.form01.eingabe.value;
    27. req.open('get', 'fo_fu.php?s='+ id);
    28. req.onreadystatechange = handleResponse;
    29. req.send(null);
    30. }
    32. function handleResponse() {
    34. if(req.readyState == 4){
    35. document.form01.ausgabe1.value = req.responseText;
    36. }
    37. }
    38. //-->
    39. </script>
    40. </head>
    41. <body>
    42. <table>
    43. <tr>
    44. <td>
    45. <form name="form01">
    46. <label>Felder:</label>
    47. <input type="text" size="10" name="eingabe">
    48. <input type="text" size="10" name="ausgabe1">
    49. <input type="text" size="10" name="ausgabe2">
    50. <input type="text" size="10" name="ausgabe3">
    51. <input type="text" size="10" name="ausgabe4">
    52. <input type="text" size="10" name="ausgabe5">
    54. <input type="button" value="ok" onClick="sendRequest3()">
    55. </form>
    56. </td>
    57. </tr>
    58. </table>
    60. </body>
    61. </html>
    Alles anzeigen


    Mein PHP-Code fo_fu.php sieht wie folgt aus und dient für die Datebankabfrage oder Verzweigung:

    Quellcode

    1. <?
    2. if ($_GET['s'] <10) echo "1"; else echo "2";
    3. ?>


    Das ganze funktioniert schon ganz nett. Mein Problem oder Frage ist nur, wie mache ich dies wenn ich mehrere Felder habe und diese dann noch dynamisch zur Laufzeit erstellt werden. Da muss ich irgendwie auch die function handleResponse dynamisch erweitern und die Rückgabewerte in die Felder übergeben.
    Auch habe ich da noch das Problem wie ich im File fo_fu.php da mehrere Werte ausgeben kann und diese dann wieder im html File ausselektiere.

    Kann man mehrere Formularfelder überhaupt mit der ajax-Technologie lösen, oder muss ich da wieder auf die action-Methode wie bei herkömmlichen Formularen zurückgreifen. Da habe ich halt immer den Nachteil, dass die ganze Seite neu aufgebaut wird.

    Hoffe da kann mir jemand weiterhelfen.
    Vielen Dank für jede Antwort

  • hi,

    klar kannst du auch mehrere HTML Elemente mit AJAX befüllen
    schau dir zum Beispiel mal folgendes Beispiel an:
    [coderwiki]HowTos/Ajax-Inhalte-mit-PHP-und-Select-nachladen[/coderwiki]

    augenmerk muss auf diesen zeilen liegen
    die [coderwiki]Informationen/JavaScript[/coderwiki] Funktion split() arbeitet wie explode() unter PHP

    Quellcode

    1. var update = new Array();
    2. var response = req.responseText;
    3. if(response.indexOf('||' != -1)) {
    4. update = response.split('||');
    5. document.getElementById(update[0]).value = update[1];
    6. }


    ändere dann noch in deiner html datei alle "name" attribute in "id" attribute

    also

    Quellcode

    1. <input type="text" size="10" id="ausgabe1">
    2. <input type="text" size="10" id="ausgabe2">
    3. <input type="text" size="10" id="ausgabe3">
    4. <input type="text" size="10" id="ausgabe4">
    5. <input type="text" size="10" id="ausgabe5">


    danach musst du nur noch in deiner php datei folgende ausgabe produzieren
    ausgabe1||inhalt1||ausgabe2||inhalt2||ausgabe3||inhalt3||ausgabe4||inhalt4||ausgabe5||inhalt5