JavaScript Text in textarea einfügen

Pfandfinder

Lieutenant
Registriert
Nov. 2020
Beiträge
619
ich habe ein HTML-form, dessen Inhalte mittels JS alle 5 Sekunden in die save.php gesendet werden:

Javascript:
let formChanged = false;
$(".autosave").on("input", () => formChanged = true);
const formMessages = $("#result");

setInterval(function(){
    if (!formChanged){
        return;
    }

    formChanged = false;
    $.ajax({
        type: 'POST',
        url: 'save.php',
        data: new FormData(document.forms['editor']),
        contentType: false,
        processData: false,
    })
    .done(function(response){
        formMessages.html(response);
        $("#file").val('');
    })
    .fail(function(data){
        formMessages.html(data.responseText);
    });
}, 5000);

Ausgewählte Dateien werden hochgeladen und die Auswahl im form wird geleert. Unter anderem ist in dem form so eine textarea:
HTML:
<textarea class="form-control autosave" name="content" id="content" rows="6"></textarea>

jetzt hätte ich gerne in diese textarea am Ende eine neue Zeile eingefügt, damit die hochgeladene Datei direkt als HTML dort verlinkt ist, also quasi so:
Javascript:
<img alt="bild" src="/img/'.$filename.'.jpg"/>

wie kann ich das umsetzen ? Das müsste ja javascript sein, und der Code müsste in die save.php, da dort erst $filename festgelegt wird und ausgelesen wird, ob es ein Bild, etc. ist.
 
als kleine lektüre:

https://www.mediaevent.de/html/textarea.html

textareas können nur reinen text anzeigen, also links als link, werden dort nicht angezeigt. wie so oft muß man sich mit optischen tricks behelfen. am besten ein kleines div darunter platzieren.

man könnte am ende des areas 1 leerzeile rein machen und ein div per position absolute mit einem z-index:2 überordnen und left:0; bottom:0; width:100% positionieren.
 
Zuletzt bearbeitet:
derzeit schaut es so aus als ob dein save.php eine html ausgabe macht. stattdessen könnte sie json zurückliefern mit echo json_encode(array('html' => 'bisherige ausgabe', 'uploaded_image_name' => 'image_name.jpg' ))

dann kannst du im JS der done() funktion response.html und response.uploaded_image_name nutzen.
 
  • Gefällt mir
Reaktionen: Pfandfinder
Zurück
Oben