Beitrag "posten"

waermeflasche

Hi nochmal,

ich bin mal wieder am tüfteln und dabei wieder auf eine neue Frage gestoßen. Diesmal nur in einem Forum gepostet und mit HTML Code. =)

Vorab: ich habe in diesem Dokument Bootstrap eingebunden.

Meine Überlegung war: Ich möchte ein Objekt, bestehend aus mehrere Sachen wie Textfeld, Kategorie und einem Video, über ein solches Objekt "posten" können.
Also quasi wie bei einem social Media Netzwerk wenn man ein Beitrag mit Video postet oder sonstiges.
Das ganze nicht ansehnlich aufgearbeitet sondern einfach nur zum Verständnis.

Ich habe in anderen Foren bereits Beiträge zu Chats gefunden, dies hilft mir aber leider nicht weiter.
Desweiteren soll man natürlich keine riesigen Datenmengen posten können sondern lediglich ein oder zwei solcher "Beiträge"

Wäre schön wenn ihr mir helfen könntet

MfG

waeremflasche

HTML

<div  class="form-group">
                  <textarea class="form-control"   placeholder ="Textfeld1"></textarea>
         </div>


         
  <div class = "row">
  <div class="col-xs-6 col-md-4">
    <div class="form-group">
     <select class="form-control">
       <option>Lustig</option>
       <option>Traurig</option>
     </select>
   </div>
  </div>


  <div class="col-xs-6 col-md-8">


    <div class="input-group mb-3">
      <input type="text" class="form-control" placeholder="Link einfügen">
      <div class="input-group-append">
        <button class="btn btn-outline-secondary" type="button">Button</button>
      </div>
    </div>
  </div>
  </div>




  <form >
  <div class="form-group">
      <textarea  class="form-control"  rows="3" placeholder ="Textfeld2"></textarea>
      <button class="btn btn-outline-secondary">Absenden</button>
    </div>
  </form>
  </div>
  </div>




<!-- ab hier beginnt der bereits "gepostete" Teil -->
<div class ="Beitrag">


  <p>Lustig</p>  <!--Auswahl über Dropdown-->
  <p class="AusTextfeld1">blabla</p>
  <p class="AusTextfeld2">testtest</p>


  <div class="responsive-video">
    <iframe  src="https://www.youtube.com/embed/y6120QOlsfU"  frameborder="0" allowfullscreen></iframe>
  </div>


</div>

Alles anzeigen

basti1012

Zitat von waermeflasche

Hi nochmal,

ich bin mal wieder am tüfteln und dabei wieder auf eine neue Frage gestoßen. Diesmal nur in einem Forum gepostet und mit HTML Code. =)

Gut gemacht

So mal ein paar fragen zu dein Code.
Was hast du den genau vor?
Du schreibst was von posten,willst du ein Text mit Video auf einmal posten können ,so wie hier im Forum ungefähr?
Willst du sowas wie ein Gästebuch bzw Chat programieren,wo man text und Videos auf einmal posten kann?
Wenn ja hast du eine Datenbank und kann dein Server Php ?
Also alles auf einmal zu senden ist nicht das Problem ,man könnte mit Php ein Affenformular raus machen ,oder halt Ajax benutzen.
Gibt bestimmt noch mehr möglichkeiten aber die kenne ich gerade nicht.
Um jetzt vernünftig weiter helfen zu können sollten wir wissen was du vor hast und wo die gesendeten Daten hinsollen ( Zb Datenbank oder Csv Datei auf den Server erstellen oder oder ).

Ist das alles an Code was du hast ? Hast du schon irgendwas an Javascript oder Php geschrieben ?

waermeflasche

Hi, danke schon mal für die Antwort.
Ich kenne mich noch nicht gut genug aus um die Fragen seriös zu beantworten, habe mich gestern aber ein wenig versucht und bin nun etwas weiter.
Die Texte/Videos möchte ich nicht großartig in einer Datenbank anlegen,da es sich nur um einzelne Versuche handelt und ja es soll quasi wie hier im Forum sein
bzw. wie bei facebook und Co, dass der "Beitrag" über den bisherigen Beiträgen auftaucht.
Ich habe mir das ganze jetzt mit Listen zurecht getrickst, was nach einem Posting bisher auch ganz gut aussieht, allerdings schreibt er ein zweites Posting dann in die Liste mit rein, was
natürlich nicht der Sinn ist. Meine Schleifen versuche sind allerdings fehlgeschlagen. Zudem kommen die neuen Beiträge bisher unter den alten, nicht über den alten.
Aber schau dir meinen Pfusch am besten selbst mal an

HTML

<div  class="form-group">
                  <textarea class="form-control"   placeholder ="Textfeld1"></textarea>
         </div>




  <div class = "row">
  <div class="col-xs-6 col-md-4">
    <div class="form-group">
     <select class="form-control">
       <option>Lustig</option>
       <option>Traurig</option>
     </select>
   </div>
  </div>


  <div class="col-xs-6 col-md-8">


    <div class="input-group mb-3">
      <input type="text" class="form-control" placeholder="Link einfügen">
      <div class="input-group-append">
        <button class="btn btn-outline-secondary" type="button">Button</button>
      </div>
    </div>
  </div>
  </div>




  <form >
  <div class="form-group" id="myDIV" class="header">
      <textarea id="myInput" class="form-control"  rows="3" placeholder ="Textfeld2"></textarea>
      <textarea id="myInput2" class="form-control"  rows="3" placeholder ="Textfeld3"></textarea>
      <input id="myInput3" type="text" class="form-control" placeholder="Link einfügen">




    </div>
  </form>
  </div>
  </div>






<button onclick="newElement();newElement2();newElement3()" type= "button">Add</button>










<!-- ab hier beginnt der bereits "gepostete" Teil -->
<div class ="Beitrag">


<p> Max Mustermann </p>
  <p>Lustig</p>  <!--Auswahl über Dropdown-->
  <p class="AusTextfeld1">blabla</p>
  <p class="AusTextfeld2">testtest</p>


  <div class="responsive-video">
    <iframe  src="https://www.youtube.com/embed/y6120QOlsfU"  frameborder="0" allowfullscreen></iframe>
  </div>


</div>






<div class ="Beitrag">


  <div id="myUL">
  </div>
  <script>
  // Create a new list item when clicking on the "Add" button
  function newElement() {
    var a = document.createElement("a");
    var inputValue = document.getElementById("myInput").value;
    var t = document.createTextNode(inputValue);
    a.appendChild(t);
      if (inputValue === '') {
      alert("You must write something!");
    } else {
       document.getElementById("myUL").appendChild(a);
    }
  }
  </script>


<div id="myUL2">
</div>


<script>
// Create a new list item when clicking on the "Add" button
function newElement2() {
  var a = document.createElement("a");
  var inputValue = document.getElementById("myInput2").value;
  var t = document.createTextNode(inputValue);
  a.appendChild(t);
  if (inputValue === '') {
    alert("You must write something!");
  } else {
     document.getElementById("myUL2").appendChild(a);
  }
}
</script>


<div class="testUL" id="myUL3">
</div>
<script>
// Create a new list item when clicking on the "Add" button
function newElement3() {
  var iframe = document.createElement("iframe");
  var inputValue = document.getElementById("myInput3").value.slice(32,Infinity);
    iframe.setAttribute("src", "https://www.youtube.com/embed/"+ inputValue);
  var t = document.createTextNode(inputValue);
  iframe.appendChild(t);
  if (inputValue === '') {
    alert("You must write something!");
  } else {
     document.getElementById("myUL3").appendChild(iframe);
  }
}
</script>






</div>

Alles anzeigen

dazu die Css:

HTML

.textparts { display:none; }


.addBtn {
    padding: 10px;
    width: 25%;
    background: #d9d9d9;
    color: #555;
    float: left;
    text-align: center;
    font-size: 16px;
    cursor: pointer;
    transition: 0.3s;
    border-radius: 0;
}


.testUL{


  width:5%;
  frameborder:0:
   allowfullscreen
}






.Beitrag{
  margin-top: 20px;
  padding-bottom: 15px;
  padding-top: 20px;
  background-color: rgba(67, 180, 222, 0.3);


}

Alles anzeigen

:p

basti1012

Du weißt aber das so die Daten nicht gespeichert werden. Nach ein Reload ist alles wie am Anfang. Für einen dauerhaften Eintrag brauchst du trotzdem PHP oder so.

Aber mit dein createElement komme ich nur bedingt weiter https://basti1012.bplaced.net/index.php?ordn…um-hilfe&id=517
Er macht zwar jedes Mal ein neues Feld, genauso wie du es möchtest, aber immer am Ende der Liste. Wie man das an Anfang der Liste bekommt weiß ich gerade auch nicht, außer mit id's ,aber das muss auch einfacher gehen. Ich muss mal googeln gehen.
Vielleicht hat bis dahin ja schon einer gepostet, wie man es am Anfang hinbekommt.

Bei deinem Code kommen immer Alerts, auch wenn die Felder beschrieben sind. Das solltest du vielleicht noch ändern.
Wenn du die 3 Scripte alle in eins machen würde und paar Sachen änderst, könnte man auch noch einiges an Code sparen

waermeflasche

Danke für die Antwort leider schaffe ich es nicht dies auf meinen Code anzuwenden. Ich schaff es nicht den Code so umzugestalten, dass er alle Attribute in einem neuen "Beitrag" darstellt.

Die nicht gespeicherten Inhalte sind nicht so schlimm, ich denke mit php wird es dann doch zu schwierig für mich.
Um die Fehler kümmere ich mich zum Schluss,erstmal muss es irgendwie laufen :-D:-D

Tags