Grafik-Informationen ins Formular bekommen

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

  • Grafik-Informationen ins Formular bekommen

    Hallo,

    ich bin gerade dabei meine erste Seite mit CSS zu erstellen (bisher immer Tabellen) zudem Programmiere ich noch nicht lange und habe schon so meine Probleme mit PHP, natürlich will man aber auch ein paar nette Sachen in der Seite haben also muss man sich zwangsläufig auch mit Javascript auseinander setzen ... Ok, schön der Kopf ist zwar schon am explodieren aber es langt natürlich noch nicht jetzt brauch ich auch noch unbedingt AJAX ... HILFE !

    Also konkret arbeite ich gerade an einer Seite zum Thema Abnehmen (123 Abnehmen) bzw. um genauer zu sein an meinem Admin. Ich habe dort die Möglichkeit eingebaut (bzw. werde noch einbauen) ein Vorschau-Bild hochzuladen möchte aber zusätzlich die Möglichkeit bieten eines aus dem vorhandenen Archiv zu wählen. Dafür habe ich eine Javascript-Slideshow für die Vorschaubilder benutzt. Das Problem ist jetzt wenn ich ein Bild auswählen würde müsste ich die Seite ja zwangsläufig neu Laden um diese ins Formular rein zu bekommen was auch bedeuten würde dass alle eingegebenen Daten verloren gehen (nicht schön). Daher suche ich eine Möglichkeit, ich glaube AJAX ist hier richtig, eine stelle, ohne die Seite neu laden zu müssen, zu aktualisieren.

    Konkret möchte ich den Code "Bild XXX Wurde erfolgreich gewählt" anzeigen wenn ein Gallerie-Bild gewählt wurde und zudem einen Namen oder eine Variable ins Hidden Feld rein bekommen (ohne die Seite neu zu laden). Ich würde mich echt freuen wenn jemand mir hier bei helfen könnte, ich bin mittlerweile echt mit dem ganzen PHP, CSS, JS ausgepowert und jetzt auch noch AJAX ...

    Ich habe den Code jetzt auf das nötigste abgekürzt, ich hoffe dass ich nicht irgendwas wichtiges vergessen habe.

    Quellcode

    1. <div>
    2. <label><span class="line-heigh">Beschreibung Bild:</span></label>
    3. <input type="file" name="upload2" id="upload2" />
    4. </div>
    5. <div>
    6. <label><span class="line-heigh">Oder ... Galerie:</span></label> <span class="line-heigh"><span class="green">Bild XXX Wurde erfolgreich gew&auml;hlt</span></span>
    7. </div>
    8. <input type="hidden" name="xxx" id="xxx" />
    9. <div id="container">
    10. <div id="gallery_container">
    11. <div id="thumb_container">
    12. <div id="thumbs">
    13. <a href="../_img/gallery/DC080302018.jpg" target="_blank"><img src="../_img/gallery/DC080302018.jpg" width="84" height="84" /></a>
    14. <a href="../_img/gallery/DC080302028.jpg" target="_blank"><img src="../_img/gallery/DC080302028.jpg" width="84" height="84" /></a>
    15. <a href="../_img/gallery/DC080302030.jpg" target="_blank"><img src="../_img/gallery/DC080302030.jpg" width="84" height="84" /></a>
    16. <a href="../_img/gallery/DC080302040.jpg" target="_blank"><img src="../_img/gallery/DC080302040.jpg" width="84" height="84" /></a>
    17. <a href="../_img/gallery/DSC02825.jpg" target="_blank"><img src="../_img/gallery/DSC02825.jpg" width="84" height="84" /></a>
    18. <a href="../_img/gallery/DSC02841.jpg" target="_blank"><img src="../_img/gallery/DSC02841.jpg" width="84" height="84" /></a>
    19. <a href="../_img/gallery/DSC02865.jpg" target="_blank"><img src="../_img/gallery/DSC02865.jpg" width="84" height="84" /></a>
    20. <a href="../_img/gallery/DSC02891.jpg" target="_blank"><img src="../_img/gallery/DSC02891.jpg" width="84" height="84" /></a>
    21. <a href="../_img/gallery/DSC02916.jpg" target="_blank"><img src="../_img/gallery/DSC02916.jpg" width="84" height="84" /></a>
    22. <a href="../_img/gallery/DSC02959.jpg" target="_blank"><img src="../_img/gallery/DSC02959.jpg" width="84" height="84" /></a>
    23. <a href="../_img/gallery/DSC03032.jpg" target="_blank"><img src="../_img/gallery/DSC03032.jpg" width="84" height="84" /></a>
    24. </div>
    25. </div>
    26. </div>
    27. </div>
    Alles anzeigen
  • Hi, also ich sehe eigentlich keine Stelle an der du AJAX nutzen musst ;)

    Du musst den value vom input Feld und das src vom Bild aktualsieren. Konkret sieht die Funktion also so aus:

    Quellcode

    1. <script type="text/javascript">
    2. function setPreview(dom) {
    3. document.getElementById('xxx').value = document.getElementById('preview').src = dom.src;
    4. return false;
    5. }
    6. </script>


    Dazu gehören noch die folgenden DOM Elemente

    Quellcode

    1. <input type="text" name="xxx" id="xxx" />
    2. <img id="preview" src="" />


    und natürlich der Auslöser (entferne den Link drumherum am besten)

    Quellcode

    1. <img src="../_img/gallery/DC080302018.jpg" width="84" height="84" onclick="return setPreview(this)" />