✔ 2 Neue Buttons erzeugen

[Da-Real-Monchichi]

Hallo @ all!

Ich möchte gerne ein Formular zur Registrierung eines Clans erstellen und habe einige Probleme. Ich habe bis hier her schon einiges geschaftt aber stehe schon seit einigen Tagen auf der Stelle! Vielleicht kann mir ja einer von euch Profis den Weg ein wenig näher legen, wäre euch für alles dankbar.


Hier mein Problem:
Ich habe ein Input-Feld, in dem ein User "Squads" eingeben kann. Nachdem er sie eingegeben hat und auf den Button "add" klickt erscheinen seine Squads in einem darunter liegenden definierten DIV Bereich. - Bis hier her klappt alles bestens!

Die Stelle, an der ich nicht weiter komme:
Jetzt sollte aber der User die Squads, die in dem DIV Bereich angezeigt werden auch auswählbar sein. Ähnlich wie bei einem Option Tag. Nachdem er eine der Squads angeklickt hat, sollten 2 neue Buttons erzeigt werden.
|
|
|-----> 1 Button = Edit
|-----> 1 Button = Delete

Edit: Wenn der User einen Squad ausgewählt hat und den Button "Edit" drückt, dann soll sich ein neues Input-Feld darunter öffnen.

Delete: Drückt der User den Button Delete, dann wird der vorher angelegt und jetzt im DIV Bereich angezeigte Squad gelöscht.


Hat jemand eine Idee für unseren kleinen Monichichi wie sowas in Javascript auszusehen hat?

Hier mein bisheriger Quellcode:

<script type="text/javascript"> 
function Hinzufuegen () {
if (document.getElementById("name").value == "") {
alert("error: Insert Squadname");
document.getElementById("name").focus();
return false;}
 
var squads = document.getElementById("name").value;
document.getElementById("ausgabe").innerHTML = document.getElementById("ausgabe").innerHTML + squads + "<br />";

document.Formular.squads.value = "";
}
</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><STRONG>Ihre Squads:</STRONG><BR><div id="ausgabe" name="squadnamen"></div></LI><br>

<LI><STRONG>Clanseite:</STRONG><BR><input type="text" size="40" name="clanseite"></li>

<LI><STRONG>Clan Avatar:</STRONG><BR><input name="clanpic" size="40" type="file"></li>

<LI><STRONG>Favouriten Spiele:</STRONG><BR><input type="text" size="30" name="fav-spiele"></li>

<LI><STRONG>Favouriten Konsolen:</STRONG><BR><input type="text" size="30"
name="fav-konsolen"></li>
<br>
 <LI><STRONG>Online Software:</STRONG><BR>
   <input type="checkbox" name="osw-xbl">Xbox Live<br>
   <input type="checkbox" name="osw-xlink">Xlink Kai<br>
   <input type="checkbox" name="osw-xbc">Xbox Connect</li>
<br>
<LI><STRONG>Clan Herkunft:</STRONG><BR><input type="text" size="30" name="clanherkunft"><br><br>
<input name="Send" type="submit" value="Submit" />
<input type="reset" value="Reset" /></li>

Die Daten wie FORM oder die Javascript Fehelererkennung habe ich zwecks Länge dieses Beitrages einfach rausgelassen.

Vielen Dank schonmal im vorraus!

 

[Sven Mintel]

Dafür gibt es 2 Methhoden:

Um Elemente hinzuzufügen: appendChild()

Elemente entfernen:removeChild()

 

[Da-Real-Monchichi]

vielen dank für den tip!

habe aber jetzt das problem, dass ich nicht geziehlt einträge löschen kann! wenn ich 5 squads angelegt habe und dann auf löschen gehe, dann wird immer der erste wieder entfernt.


hier mein code:

function remove ()
{
var remove = document.getElementsByTagName('select')[0].firstChild;
del = document.getElementsByTagName('select')[0].removeChild(remove);
}

ausserdem ist diese art und weise glaube ich nicht so gut! wenn ich zb nochmehrere select felder mit daten habe und ich möchte ein select feld geziehlt löschen, dann leert er gleich alle select felder. kann ich nicht noch eine id angeben?

 

[Sven Mintel]

"firstChild" bezieht sich, wie man vielleicht am Namen schon erkennt, auf das 1.Kind, in dem Fall ist es immer die 1.Option des Select.

Welche Option gerade ausgewählt wurde, sagt dir die Eigenschaft selectedIndex.

Was die ID betrifft, das geht natürlich auch.

Letztendlich...für das Löschen von Optionen gibt es noch eine eigene Methode...für Schreibfaule

Man weist der Option den Wert null zu...und weg ist sie.
summa summarum:

document.getElementById('listenid').options[document.getElementById('listenid').selectedIndex]=null;

Ansonsten: Versuche mal, die Funktion nicht remove() zu nennen, damit scheint es Probleme zu geben.

 

[Da-Real-Monchichi]

vielen dank für deine antwort! habe es folgendermaßen hinbekommen:

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

funktioniert jetzt bestens! habe noch einen 2. thread eröffnet, vielleich könntest du mir evtl noch damit helfen. ist ein echt harter brocken und nur mit hilfe von pros zu schaffen! ich dagegen bin auf dem gebiet sehr neu und werds wahrscheinlich in 100 jahren nicht hinbekommen.

der thread heißt: Input Feld über "add" Button hinzufügen?" ! geht mitlerweile nicht mehr um das hinzufügen von input feldern, sondern um weitaus komplizierteres. ich würde es sehr schön finden wenn du mir evtl bei diesem problem helfen würdest.

aber schonmal danke bis hier her! euer daumlutschender monchichi