Input Feld über "add" Button hinzufügen?

[Da-Real-Monchichi]

Javascript Formular

Hallo!

ich versuche mir gerade ein Formular zu erstellen. Wie bekomme ich das hin, dass ich ein neues Input Feld nach drücken eines Buttons hinzufüge?

wäre erfreut über jede Hilfe!

 

[Peter Bucher]

Hallo Da-Real-Monchichi

Benutze dafür document.createElement() und <node>.appendChild();
Hier ein Beispiel, das <input type="file"... Felder zu einem Formular hinzufügt.
Der Parameter "controlid", ist die ID des Containers, an den die Felder angehängt werden sollten.

        <script type="text/javascript">
            function createUploadForm(controlId) {
                var fileUpload = document.getElementById(controlId);
                var obj        = document.createElement('input');
                obj.type = 'file';
                obj.name = 'aName';
                fileUpload.appendChild(obj);
                fileUpload.appendChild(document.createElement('br'));
            }
        </script>

- http://de.selfhtml.org/javascript/objekte/document.htm#create_element
- http://de.selfhtml.org/javascript/objekte/node.htm#append_child


Gruss Peter

 

[Da-Real-Monchichi]

Hallo!

Vielen Dank für deine Antwort. Habe es aber jetzt über einen anderen Weg gelöst. Ob der besser ist (mein weg) wage ich zu bezweifeln.

Habe jetzt aber schon andere Dinge an dem ich kläglich scheitere.


Kurze Beschreibung:
User geben über ein input Feld ein Squad ein
Squad wird darunter angezeigt
Wenn User Squad anklickt erscheinen 2 Buuton; Edit und delete
Bei Edit kann er Member zum Squad hinzufügen, zz kann man Member hinzufügen, nur zählen die für alle Squads. Das bedeutet die Member werden nicht direkt zum Squad hinzugefügt. Ich möchte wenn mehrere Squads angelegt sind, dass man auf die Squads anklicken kann und dann nur die Member des Squads angezeigt werden. Ich denke so etwas muss man über id's oder so erzeugen, damit das script auch we´ß wozu es angehört aber wie weiß ich nicht hbin noch sehr neu auf dem gebiet javascript.

Bei delete wird der Squad gelöscht

werde mal mein code posten, damit du siehst wie ich das ungefähr meine. wäre sehr erfreut über ein wenig professionelle hilfe.

<script type="text/javascript"> 
function Hinzufuegen () {
if (document.getElementById("name").value == "") {
alert("error: Insert Squadname");
document.getElementById("name").focus();
return false;}
//div-Sichtbar machen
document.getElementById('ausgabe').style.display="block";
//Hinzufügne der neuen Option
var squads = new Option(document.getElementById("name").value, document.getElementById("name").value, false, true);
mySel=document.getElementById('ihre_squads');
mySel.options[mySel.length]=squads;
document.Formular.squads.value = "";
//Größe der Selectbox verändern
  if (mySel.length>2) {
  mySel.size=mySel.length;}
}

function member () {
if (document.getElementById("name1").value == "") {
alert("error: Insert Squadmember");
document.getElementById("name1").focus();
return false;}
document.getElementById('ausgabe1').style.display="block";
var squadmember = new Option(document.getElementById("name1").value, document.getElementById("name1").value, false, true);
mySel=document.getElementById('die_squadmember');
mySel.options[mySel.length]=squadmember;
document.Formular.squadmember.value = "";
  if (mySel.length>2){
  mySel.size=mySel.length;}
}

function editSquad(){
document.getElementById('editbtn').style.display=""; document.getElementById('delbtn').style.display="";}

function editmember(){
document.getElementById('editbtn1').style.display=""; document.getElementById('delbtn1').style.display="";}

function remove (){
document.Formular.ihre_squads.options[document.Formular.ihre_squads.selectedIndex] = null;}
  
function removemember (){
document.Formular.die_squadmember.options[document.Formular.die_squadmember.selectedIndex] = null;}

function checksquads(){
if (document.getElementById("ihre_squads").innerHTML == "") {
document.getElementById('ausgabe').style.display="none";
document.getElementById('edit-member').style.display="none";
document.getElementById('ausgabe1').style.display="none";}}

function checkmember(){
if (document.getElementById("die_squadmember").innerHTML == "") {
document.getElementById('ausgabe1').style.display="none";}}

function edit () {
var input = document.createElement("input");
input.setAttribute("type","text");
input.setAttribute("name","memberedit");
input.setAttribute("id","edit-member");
document.getElementById('edit-member').style.display="";}
</script>




<UL class=styleLi>
<LI><STRONG>Clantag:</STRONG><BR><input name="clantag" size="40" type="text"></li>

<LI><STRONG>Clan Name:</STRONG><BR><input type="text" size="40" name="clanname"></li>

<LI><STRONG>Clan Leader:</STRONG><BR><input type="text" size="40" name="clanleader"></li>

<LI><STRONG>Squads:</STRONG><BR><input type="text" size="20" name="squads" id="name"><input type="button" value="add" onclick="Hinzufuegen();"></LI>

<LI id="ausgabe" name="squadnamen" style="display: none;">&nbsp;<STRONG>Ihre Squads:</STRONG><BR>
<select name="ihre_squads" id="ihre_squads" size="2" style="width: 155px; overflow: auto;" onclick="editSquad();"></select>
<input type="button" value="edit" id="editbtn" style="display: none;" onclick="edit();">&nbsp;<input type="button" value="delete" id="delbtn" style="display: none;" onclick="remove(), checksquads();"><br>Klicken Sie ein Ihrer angelegten Squads an, um diesen zu editieren oder zu l&ouml;schen!</li><br>




<LI id="edit-member" style="display: none;"><STRONG>Member des Squads:</STRONG><BR><input type="text" size="20" name="squadmember" id="name1"><input type="button" value="add" onclick="member();"></LI>

<LI id="ausgabe1" name="squadmember" style="display: none;">&nbsp;<STRONG>Die Squadmember:</STRONG><BR>
<select name="die_squadmember" id="die_squadmember" size="2" style="width: 155px; overflow: auto;" onclick="editmember();"></select>
<input type="button" value="edit" id="editbtn1" style="display: none;" onclick="edit();">&nbsp;<input type="button" value="delete" id="delbtn1" style="display: none;" onclick="removemember(), checkmember();"><br>Klicken Sie ein dieser Squad Member an, um ihn zu editieren oder ihn zu l&ouml;schen!</li><br>

wie gesagt es klappt schon einiges sehr gut. nur nicht mit den members für den squad. ichkann member hinzufügen aber diese sind dann in jedem squad.

auch wenn ich nur einen squad anlege und ganz viele member hinzufüge und dann den squad lösche, dann müssten auch die member gelöscht werden.

zz ist es so, dass ich den squad zwar löschen kann aber wenn ich einen neuen anlege und dann wieder auf member hinzufügen klicke dann sehe ich auch wieder die alten member die ich vor dem löschen des alten squads angelegt habe.


ich hoffe du steigst noch durch bei diesem codeschnipsel.....

vielen dank bis hier her!

 

[Sven Mintel]

Du könntest mit Arrays arbeiten....Vorgehensweise:

Es wäre gut, wenn jeder Squadname eindeutig wäre...also nur 1x vergeben werden darf.
Sollte dies der Fall sein, kannst du die Mitglieder in sogenannten assoziativen Arrays Speichern(der Squadname wäre dabei der Arrayschlüssel)...und problemlos bei der Auswahl einer Squad auf deren Mitglieder zugreifen, um sie in der Liste anzuzeigen.

 

[Da-Real-Monchichi]

Das ist genau das, was ich brauche.

Ich bin ein Einsteiger und habe noch keine Ahnung, wie sowas im Syntax aussieht. Ich werde erstmal mich ein wenig schlau machen, ein wenig lesen.

Hätte denn einer Interesse mir dabei zu helfen? würde ich echt toll finden.

 

[Da-Real-Monchichi]

Habe mittlerweile ein wenig zu aarays gelesen. Ich kann ja in einem inputfeld name=squad[1] angeben, um somit ein array zu erzeugen.

da in meinem Formular alles dynamisch läuft weiß ich jetzt nicht wie es dort aussehen soll und kann auch leider nichts finden.

In meinem 2. Post steht ja der quellcode, den ich bisher angelegt habe. So werden die Squads einfach erzeugt und angezeigt. Da ich jetzt noch Member einem bestimmten angelegt Squad hinzufügen möchte muss ich ja mit arrrays arbeiten.

Bekomme es aber einfach nicht hin. Hat jemand nicht eine passende Idee zu meinem Problem?

Wie schon erwähnt ist das Problem in meinem Formular, dass alles dynamisch erzeugt wird und daher das anlegen und die spätere Verarbeitung der arrays für mich nicht zu verstehen ist.

Auch wenn ein Squad wieder gelöscht ist bleiben zz auch die member gespeichert. Wenn ich dann einen neuen Squad auswähle, sind die alten Member immer noch vorhanden.

Habe auch schon std lang gegooglet aber kann überhaupt nichts finden zu meinem Problem, erbitte professionelle Hilfe. Wäre euch auf ewig und drei Tage dankbar...