• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Frage Textfelder durch Button erstellen

C

coolier

Neues Mitglied
HTML: 
<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8">
   <title>
       Fragebogen
   </title>
   <link rel="stylesheet" href="style.css">
   <script src="functions.js"></script>
</head>
<?php
   include ("sendmail.php");
?>
<body>
</p>
   <form target="_blank" action="sendmail.php" method="post" class="form">
   <table>
<tr>
               <td valign="top">
                  Test
               </td>
               <td width="5">
               </td>
               <td>
                   <textarea cols="25" rows="1" name="test" placeholder="AB12"></textarea>
               </td>
               <td>
               </td>
               <td>
                   Test2
               </td>
               <td>
               </td>
               <td id="mailboxinsert">
                   <button data-attribut="test2" onclick="hinzuf()">text</button>
               </td>
              <td>
                   <input type="submit" value="        Abschicken        " class="butto">
              </td>
           </tr>
</table>
   </form>
</body>
</html>

Code: 
function hinzuf() {
    document.getElementById('mailboxinsert').addEventListener('click', hinzu);
}

function hinzu() {
    name = button.getAttribute('data-attribut'),
    elem = document.getElementById('mailboxinsert');
    elem.className = name;
}

In der PHP-Datei befindet sich ein mail-Befehl!

Bei einem Klick auf den Button mit dem Wort test soll ein Textfeld unter dem Button Test auftauchen. Klickt man anschließend erneut darauf, soll ein weiteres Textfeld unter dem Textfeld auftauchen, usw. Jedes Textfeld soll anschließend einen eigenen name="" haben. Er erzeugt laut Code oben jedoch nicht mal das erste Feld.

Kann mir wer helfen?
 
Werbung:
Da gibt es eigentlich Google für.

Aber ich will mal nicht so sein (Dies ist im Moment eine Version, die nur 1 Textfeld erzeugt, wenn du weiter liest, weißt du, dass es eh keinen Unterschied macht).
Dein html-Code:
HTML: 
<td id="textareas">
  <textarea cols="25" rows="1" name="test" placeholder="AB12"></textarea>
</td>
Dein Javascript-Code:
Code: 
function hinzuf() {
   document.getElementById('textareas').innerHTML = '<textarea cols="25" rows="1" name="" placeholder="AB12"></textarea>';
}



Jetzt aber noch ein anderes Problem:
es ist oft nicht möglich, Tabelleninhalte mit Javascript zu bearbeiten.
Wenn du es so versuchst, wird es nicht funktionieren. Wandelst du es in ein div um, funktioniert es wiederum einwandfrei.
 
Ah, ok. Mein Fehler war, dass es bei Tabelleninhalten nicht klappt, das steht aber auch nicht bei Google. Das hat mir schon sehr geholfen. Ich werde nun noch mal weiterschauen, ob ich es hinbekomme, dass er es hinzufügt, statt ersetzt und mich bei Problemen nocheinmal melden.
 
Werbung:
Er ordnet mir das DIV neben der Tabelle an, nicht darunter. Margin, Padding, Display bringt alles nix.


HTML: 
position:absolute;
Bottom:0;

So geht es, aber dann überlappt das DIV die Tabelle.... gibt es noch etwas, was man nur mit Erfahrung wissen kann?
 
Benutze zur not einfach JQuery. Ist sowieso viel einfacher als Vanilla Js. Da gibt es die append() Funktion die genau das für dich macht. Ob es das gleiche Problem mit Tabellen hat weiß ich allerdings nicht.

Edit:
Zu deinem eben erstellten Beitrag:
Das kann ich dir nicht sagen ohne dein CSS zu sehen. Ich gehe mal fest davon aus, dass du mit floats arbeitest (schlechte Idee). Position absolute ist total ein Schuss in den Ofen! Nimm das float weg! Wenn du Sachen nebeneinander oder auch untereinander anzeigen willst, benutze flexboxen und nicht float.
 
Hi, probiere es nun mit jQuery.

HTML: 
<input type="button" onclick="hinzuf()" value="test"></button><input type="hidden" id="ids" value="1">
<div id="x"></div>

Code: 
function hinzuf() {
   var id = $('#ids').val();
   $("#x").append("<input type='text' name='test[]' id='test" + id + "' size='20' value='test " + id + "'><p>");
   ++id
}

Er sagt, er kennt $ nicht.
 
Werbung:
Nun kann er zwar die Textfelder erstellen, aber nicht löschen. Also nur über die Webkonsole. Wenn ich den Löschbefehl über die Funktion laufen lasse, wird zwar die Funktion ausgeführt, der Löschbefehl aber übersprungen.


Code: 
var id = 1
function hinzuf() {
    $("#mailboxes").append("<input type='text' class='input' name='zutaten[]' id='mailbox" + id + "' size='20' placeholder='test" + id + "@example.com'><p>");
    ++id
    console.log(id)
}
function del() {
    id = id-1
    $("#mailbox" + id + "").remove();
    console.log(id)
}

HTML: 
                    <input id="mailbutton" class="input" type="button" onclick="hinzuf()" value="+"><input type="hidden" id="ids" value="1">
                    <input id="mailbutton" class="input" type="button" onclick="del()" value="-">
<div id="mailboxes"></div>
 
Kann ich nicht bestätigen. Bei mir funktioniert es genau so wie gewünscht. Was steht in der Console?
Hast du JQuery Version 3.2.1 eingebunden?
 
Werbung:
Komisch das es bei mir trotzdem funktioniert hat...
Du hast übrigens überall das Semikolon vergessen!
Nach jeder Codezeile, beziehungsweise nach jedem Argument ein Semikolon. Also auch bei i++; etc.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben