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
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 
<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>dazu die Css:
.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);
}:p
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
<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>Erstmal Hallo, ich bin neu in diesem Forum und würde mich freuen wenn ihr mir weiterhelfen könnt.
Ich möchte mit Hilfe von HTML und CSS (wahrscheinlich wird auch JavaScript nötig sein) folgendes Problem lösen, bekomme es aber nicht hin:
Ich möchte 2 Textfelder erstellen, im einen soll der User Wörter eingeben können, im anderen größeren kann er dazu einen Text schreiben. Soweit so einfach.
Jetzt möchte ich jedoch, dass wenn der User ein bestimmtes Wort aus einer Liste eingibt und dieses Wort nach Eingabe eines Kommas oder durch verlassen des Textfeldes erkannt wird, dass große Textfeld automatisch mit dem dazugehörigen Text befüllt wird.
Beispiel:
Ich habe eine Einkaufsliste mit Äpfeln, Birnen und Bananen und Anmerkungen von Mutti:
"Äpfel" oder "Birnen" - "Nehme bitte Bio Produkte"
"Banane" - "Nehme die Krummen"
Gebe ich nun "Äpfel" in mein kleines Textfeld ein, erscheint " Nehme bitte Bio Produkte" automatisch im großen. Selbes wenn ich "Birnen" eingebe.
Gebe ich aber z.B. "Kirschen" ein, erscheint nichts im Großen und ich kann die Anmerkung selbst erstellen.
Wichtig ist, dass das große Textfeld erst automatisch befüllt wird nachdem ich ein Komma gesetzt habe oder das Feld verlassen habe.
Und falls dies nicht zu kompliziert ist:
Wenn ich z.B. "Nudeln, Äpfel" eingebe, dass dann trotzdem die Anmerkung zu Äpfeln kommt und die Nudeln vernachlässigt werden.
Wenn ich "Äpfel, Bananen" eingebe, sollte die erstgenannte Anmerkung kommen.
Wäre toll wenn ihr mir helfen könntet.
Danke im Vorraus