Div Container via Form Inhalt senden

  • Moin,


    da ich mich mit JS nicht wirklich auskenne frage ich mal hier nach.
    Ich habe einen Div Container

    HTML
    <div id="editor" name="news_text" class="editor-wrapper"></div>



    der Wie eine textarea behandelt wird. Das heißt das ich dort was eingebene kann und ich möchte gerne die Daten die dort eingegeben werden, via einer Form weiter gesendet werden, jedoch habe ich nichts brauchbares gefunden und frage nach ob dies überhaupt möglich ist.

  • Das wird nicht ohne JavaScript klappen.


    So liest du zumindest den Inhalt aus, was genau ist dein Ziel?
    document.getElementById( 'editor' ).innerHTML

    Why do programmers always mix up Halloween and Christmas?
    Oct 31 == Dec 25

  • Jetzt ist es wesentlich verständlicher, würde der Form eine ID zuweisen:



    JavaScript
    let editor = document.getElementById( 'editor' )
    document.getElementById( 'form-id' ).addEventListener( 'submit', function( event ) {
      event.preventDefault()  
      let content = editor.innerHTML
    
      // .. XMLHttpRequest
    
    
      return false
    ) )

    Verständlich oder brauchst du noch etwas mehr?

    Why do programmers always mix up Halloween and Christmas?
    Oct 31 == Dec 25

  • Ja leider, um die Arbeit kommst du nicht herum.


    Du kannst allerdings auch eine unsichtbare Textarea in der Form erstellen und immer aktuell mit dem Inhalt befüllen den du im Backend erhalten möchtest (hier kommt wieder JavaScript ins Spiel).

    Why do programmers always mix up Halloween and Christmas?
    Oct 31 == Dec 25

  • Das wäre auch eine Möglichkeit, wie würde dies dann aussehen ? Dies war ja erst vorhanden aber sah für diese keine Verwendung also entfernt, also unter dem

    HTML
    <div id="editor" name="news_text" class="editor-wrapper"></div>


    kommt normal noch ein:

    HTML
    <textarea name="descr" id="descr" style="display:none;"></textarea>
  • Richtig, ich glaube nun reicht es wenn du den Inhalt dieser Textarea vor dem senden füllst sprich:


    JavaScript
    let editor = document.getElementById( 'editor' )
    let textarea = document.getElementById( 'textarea' )
    document.getElementById( 'form-id' ).addEventListener( 'submit', function() {
      textarea.innerHTML = editor.innerHTML
      return true
    ) )

    Bin mir da nicht ganz sicher gerade, magst du mal schauen ob das klappt?

    Why do programmers always mix up Halloween and Christmas?
    Oct 31 == Dec 25

  • Genau wie vorher steckt alles in $_POST, bei der letzten Funktion bleibt action/method bestehen. Vor dem absenden sollte die Funktion den Inhalt der unsichtbaren Textarea auf den Inhalt vom Editor setzen, im Backend würde sich lediglich 'editor' zu 'textarea' bzw. dem von dir zugewiesenen Textarea namen ändern.

    Why do programmers always mix up Halloween and Christmas?
    Oct 31 == Dec 25

  • Notice: Undefined index: news_text in /var/www/vhosts/..... on line 48



    Also zeigt das immer noch an und trägt nichts ein.


    Habe es unten in der PHP So eingebunden:

    JavaScript
    <script>
    let editor = document.getElementById( 'editor' )
    let textarea = document.getElementById( 'textarea' )
    document.getElementById( 'form-id' ).addEventListener( 'submit', function() {
      textarea.innerHTML = editor.innerHTML
      return true
    ) )
    </script>


    HTML
    <div id="editor" name="news_text" class="editor-wrapper"></div>
    <textarea name="news_text" id="descr" style="display:none;"></textarea>


  • Schade, wäre zu schön gewesen hätte es beim erstem Anlauf geklappt.


    Gib dir am besten mal textarea.innerHTML zwischen Zeile 5&6 in der Konsole aus um zu prüfen ob die Funktion aufgerufen und der Inhalt richtig gesetzt wird.

    Why do programmers always mix up Halloween and Christmas?
    Oct 31 == Dec 25

  • Du hast ausversehen zwei ")" gemacht anstatt "});" habe das mal geändert und das ist das result:


    20:41:38.973 TypeError: document.getElementById(...) is null 1 ucp.atlas-gaming.de:221:1
    <anonym> :221:1



    JavaScript
    <script>
    let editor = document.getElementById( 'editor' )
    let textarea = document.getElementById( 'textarea' ) 
    document.getElementById( 'addform' ).addEventListener( 'submit', function() {   <- 221
      textarea.innerHTML = editor.innerHTML
      console.log( textarea.innerHTML )
      return true
    });
    </script>