Komplexes Formular mit arrays

Hallo

habe ein großes Problem. Ich versuche mir gerade ein Formular zu erstellen. Über Javascript habe ich es mittlerweile hinbekommen, dass user:

1. in ein input feld daten eingeben
2. diese daten werden in einem definierten Bereich ausgegeben
3. user kann seine eigenen angelegten Daten auswählen
4. nach auswählen werden 2 buttons erzeugt einmal edit und einmal delete
5. bei edit kann der user neue daten über ein input feld was dann erzeugt wird wiederrum daten eingeben.
6. diese daten werden wiederrum in einem dafür definierten bereich ausgegeben
7. bei delete kann der user den ersten datensatz löschen, die dazugehörenden daten aus der 2. eingabe sollen ebenfalls gelöscht werden, weil diese gehören ja zum objekt des ersten datensatz.


Und nun zu meinem Problem:
Bis 4. ist alles in Ordnung. Ab 5. stimmt mein Formular nicht mehr. Es soll, wenn der user das 2. mal Daten eingibt, diese geziehl der 1. Auswahl zugeordnet werden.
bei punkt 7 habe ich das problem, wenn ich ein objekt aus der ersten eingabe lösche, dann sollten ja die dazugehörigen daten aus der 2. eingabe mit entfernt werden.


Beisiel:
Der user gibt beim ersten mal "Ferrari" ein.
Ferrari wird im DIV angezeigt
User wählt Ferrari aus
User drückt Button "edit"
Jetzt kann user dem Datensatz Ferrari Autos zuordnen
User gibt F50 an und drückt "add"
Der "F50"" wird jetzt darunter in dem dafür vorgesehenen DIV angezeigt. Jetzt soll aber der F50 nur angezeigt werden, wenn Ferrari ausgewählt ist. Also kurz er soll der Gruppe Ferrari zugewiesen werden.

In meinem Formular klappt das alles schon nur wenn ich einen neuen 1. Datensatz angebe und auf editieren drücke, dann sind die Fahrzeuge für alle Marken zu sehen.

Beispiel:
Ich lege Audi an. Beim 2. Datensatz lege ich a4, a6, a8, s8 usw an.

lege ich jetzt Ferrari an und wähle editieren, dann sehe ich die modelle "a4, a6, a8 usw" auch hier. Das ganze passiert, da der 2. datensatz dem ersten nicht zugeordnet wird.


hier mal mein code:
Code:
function Hinzufuegen () {
if (document.getElementById("name").value == "") {
alert("error: Insert Squadname");
document.getElementById("name").focus();
return false;}
document.getElementById('ausgabe').style.display="block";
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 = "";
  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=""; document.getElementById('okbtn1').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 closemember(){
document.getElementById('edit-member').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="";}


<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();">&nbsp;<input type="button" value="ok" id="okbtn1" style="display: none;" onclick="closemember();"></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();"></li></UL></DIV>



Würde mich über jede Hilfe freuen. Das Stichwort Array ist mir bekannt. Das Problem ist nur, dass alles dynamisch erzeugt wird. Und ich bin ein ziehmlich großer Rookie!
 
Kann mir keiner helfen oder ist das ein gar nicht so einfaches Thema?

Für mich ist das wirklich ein harter Brocken und wenn jemand ein wenig mehr in Thema drin ist und weiß wie es geht, dann würd ich ihn ganz nett bitten mir zu helfen. Ich bin echt am Verzweifeln...
 
Hier mal was zum herumprobieren, 2 Beispielarrays sind schon dabei, ich glaube daran sollte zu sehen sein, wie das mit den Arrays funktioniert(den Rest hab ich ein wenig umgebastelt :-( ...vom Sinn her sollte es aber dem entsprechen, was du vorhast)
Code:
<html>
<head>
<title>Test</title>
<script type="text/javascript">
<!--

var arrSquads=[],frm,li;
arrSquads['Ferrari']=['Testarossa','Scaglietti','Maranello'];
arrSquads['Audi']=['A4','S6','TT'];


String.prototype.trim=function(dir)
{
  switch(dir)
    {
      case 'r':
        return this.replace(/\s+$/g,'');
          break;
      case 'l':
        return this.replace(/^\s+/g,'');
          break;
      default:
        return this.replace(/(^\s+|\s+$)/g,'');
    }
}

function in_array(a,v)
{
  for(var k in a)
    {
      if(a[k]==v)return true;
    }
  return false;
}




function toggle_obj(o,d)
{
  o.style.display=d;
}

function init_squads(sn)
{
  
  frm=document.Formular;
  li=frm.getElementsByTagName('LI');
  toggle_obj(li[1],'none');
  init=false;
  frm.listSquads.options.length=0;
  for(var k in arrSquads)
    {
      c=(init_squads.arguments.length==1 && sn==k)?true:false;
      frm.listSquads.options[frm.listSquads.options.length]=new Option(k,k,c,c);
      init=true;
      
    }
  if(!init)
    {
      frm.listSquads.options[0]=new Option('no Squads yet',0);
      toggle_obj(li[0].getElementsByTagName('span')[0],'none');
      list_members();
    }
  else
    {
      squad_options();
    }
}

function squad_options()
{
  if(frm.listSquads.value!=0)
    {
      
      toggle_obj(li[0].getElementsByTagName('span')[0],'inline');
      frm.delSquad.value='delete "'+frm.listSquads.value+'"';
      frm.edtSquad.value='new member';
      list_members(frm.listSquads.value);
    }
  
      
    
}

function list_members(s)
{
  m='';
  if(list_members.arguments.length>0 && arrSquads[s].length>0)
    {
      m='<strong>Members of <i>'+s+'</i></strong><ul>';
      for(i=0;i<arrSquads[s].length;++i)
        {
          m+='<li><b onclick="delete_member('+i+')" style="cursor:pointer">[DEL]</b> '+arrSquads[s][i]+'</li>';
        }
      m+='</ul>';
      toggle_obj(li[2],'block');
    }
  else
    {
      toggle_obj(li[2],'none');
    }
  li[2].innerHTML=m;
}

function add_member(e)
{
  if(!e)
    {
      li[1].getElementsByTagName('STRONG')[0].innerHTML='Enter Member-Name';
      toggle_obj(li[1],'block');
      frm.addBtn.value='add Member'
      frm.addBtn.onclick=function(){add_member(1);}
      
    }
  else
    {
      e='';
      v=String(frm.add.value).trim();
      frm.add.value='';
      if(v=='')
        {
          e='Enter Member-Name!';
        }
      
      else if(in_array(arrSquads[frm.listSquads.value],v))
        {
          e='This Member already exists';
        }
      if(e)
        {
          alert(e);
          frm.add.focus();
          return;
        }
      
      arrSquads[frm.listSquads.value].push(v);
      init_squads(frm.listSquads.value);
      toggle_obj(li[1],'none');
      
    }
}


function add_squad(e)
{
  
  if(!e)
    {
      li[1].getElementsByTagName('STRONG')[0].innerHTML='Enter SQUAD-Name';
      toggle_obj(li[1],'block');
      frm.addBtn.value='add SQUAD'
      frm.addBtn.onclick=function(){add_squad(1);}
      
    }
  else
    {
      e='';
      v=String(frm.add.value).trim();
      frm.add.value='';
      if(v=='')
        {
          e='Enter SQUAD-Name!';
        }
      else if(typeof arrSquads[v]!='undefined')
        {
          e='This SQUAD already exists';
        }
      if(e)
        {
          alert(e);
          frm.add.focus();
          return;
        }
      
      arrSquads[v]=[];
      init_squads(v);
      toggle_obj(li[1],'none');
      
    }
}

function delete_squad()
{
  if(confirm('Delete SQUAD "'+ frm.listSquads.value +'" ?'))
    {
      delete(arrSquads[frm.listSquads.value]);
      init_squads();
    }
}

function delete_member(m)
{
  if(confirm('Delete Member "'+ arrSquads[frm.listSquads.value][m] +'" ?'))
    {
      arrSquads[frm.listSquads.value].splice(m,1)
      init_squads();
    }
}


window.onload=init_squads;
//-->
</script>
<style type="text/css">
<!--
.hide{display:none;}
li{margin:10px;}
-->
</style>
</head>
<body>
<form name="Formular">
<ul>
  <li>
    <strong>Your Squads:</strong><br />
    <select name="listSquads" onclick="squad_options();"></select>
    <input type="button" value="new SQUAD"   onclick="add_squad(0)">
    <span class="hide">      
      <input type="button" name="edtSquad" value="add Member" onclick="add_member(0)">&nbsp;
      <input type="button" name="delSquad" value="delete" onclick="delete_squad()">&nbsp;
    </span>
  </li>
  <li class="hide">
    <strong></strong><br />
    <input type="text" size="20" name="add">
    <input type="button" value="add" name="addBtn">
  </li>
  <li class="hide"></li>
</UL>
</form>
</body>
</html>
 
Vielen Dank! Das schaut sehr gut aus und bietet genau das was ich haben wollte.


Gefällt mir echt gut. Das du überhaupt aus meiner blöden Beschreibung entnewhmen konntest was ich haben möchte ist schon allein ein Kunststück! :)


kriegen wir das vielleicht auch noch hin, dass die squadmember auch in einem select feld angezeigt werden und erst wenn man sie anklickt 2 buttons erscheinen (delete und wiederrum edit). will dich auch nicht nerven möchte dein script aber unbeding einsetzen und steh gerad mal wieder voll aufm schlauch... :(


habe auch noch schwierigkeiten damit, dass das Squads Feld immer oben stehen muss. Ansonsten wird ein anderes Input Feld nicht angezeigt, oder er ersetzt es einfach. ich hätte aber gerne min 3 Input felder über dem Squads Feld sehen. Wie kommt das zu stande, dass das so nicht funktioniert?

:::: wenn input felder über dem squads feld stehen, dann kommt die meldung style ist undefiniert und min 1 inputfeld von mir wird nicht angezeigt.
 
Zuletzt bearbeitet:
kriegen wir das vielleicht auch noch hin, dass die squadmember auch in einem select feld angezeigt werden und erst wenn man sie anklickt 2 buttons erscheinen (delete und wiederrum edit).

Was soll den der edit-Button machen?

Was die Felder oberhalb angeht:

Ich gehe mal davon aus, dass diese in weiteren <li>-Elementen stehen.
Wenn ja, dann zähle diese weiteren benötigten <li>-Elemente oberhalb.
Mein Skript greift über die <li>-Elemente auf diverse Elemente zu, wenn du also vorher neue einfügst, suche in meinem Skript folgende Stellen:
Code:
li[ziffer]
und erhöhe dort die Ziffer um die Anzahl der neuen(oberhalb) eingefügten <li>-Elemente.
 
Habe gerade bemerkt, dass das Formular unter Opera, Netscape und Mozilla nicht funktiniert. Die Fehlerkonsole vom Mozilla gibt mir folgende Fehlermeldungen aus:

"o has no properties"
Code:
Das ganze scheint aus dieser Zeile zu kommen:
function toggle_obj(o,d)
{
  o.style.display=d;
}



nach drücken des Buttons add erschein folgende Fehlermeldung in der Fehlerkonsole:

"li[1] has no properties"
Code:
Das ganze scheint aus dieser Zeile zu kommen:
li[1].getElementsByTagName('STRONG')[0].innerHTML='Enter Squadname';


#2:
kriegen wir das vielleicht auch noch hin, dass die squadmember auch in einem select feld angezeigt werden und erst wenn man sie anklickt 2 buttons erscheinen (delete und wiederrum edit). will dich auch nicht nerven möchte dein script aber unbeding einsetzen und steh gerad mal wieder voll aufm schlauch...


Sven ich hoffe du kannst mir noch ein wenig helfen. Sitze schon wieder den ganzen Morgen dran und bekomme es einfach nicht hin. :(

Wäre dir echt sehr dankbar... bin gerad voll am verzweifeln, will aber auch nicht nerven oder den Eindruck erwecken mir hier ein Script zusammen zu schnoren!


edit:
der edit button soll noch für die member ein status hinzufügen.
beispiel:
ein membber kan sein: Squad Leader, Squad Co Leader, Squad Member, Squad Tryout Member! DAnn ist das Formular an sich auch "schon" fertig.


übrigens das mit dem squads feld habe ich jetzt hinbekommen! es steht jetzt an dritter stelle! - danke hierfü ebenfalls! :)
 
Zuletzt bearbeitet:
hier mit <select> für die Member:
Code:
<html>
<head>
<title>Test</title>
<script type="text/javascript">
<!--

var arrSquads=[],frm,li;
arrSquads['Ferrari']=['Testarossa','Scaglietti','Maranello'];
arrSquads['Audi']=['A4','S6','TT'];


String.prototype.trim=function(dir)
{
  switch(dir)
    {
      case 'r':
        return this.replace(/\s+$/g,'');
          break;
      case 'l':
        return this.replace(/^\s+/g,'');
          break;
      default:
        return this.replace(/(^\s+|\s+$)/g,'');
    }
}

function in_array(a,v)
{
  for(var k in a)
    {
      if(a[k]==v)return true;
    }
  return false;
}




function toggle_obj(o,d)
{
  o.style.display=d;
}

function init_squads(sn)
{
  
  frm=document.Formular;
  li=frm.getElementsByTagName('LI');
  toggle_obj(document.getElementById('o_add'),'none');
  init=false;
  frm.listSquads.options.length=0;
  for(var k in arrSquads)
    {
      c=(init_squads.arguments.length==1 && sn==k)?true:false;
      frm.listSquads.options[frm.listSquads.options.length]=new Option(k,k,c,c);
      init=true;
      
    }
  if(!init)
    {
      frm.listSquads.options[0]=new Option('no Squads yet',0);
      toggle_obj(document.getElementById('o_squad').getElementsByTagName('span')[0],'none');
      list_members();
    }
  else
    {
      squad_options();
    }
}

function squad_options()
{
  if(frm.listSquads.value!=0)
    {
      
      toggle_obj(document.getElementById('o_squad').getElementsByTagName('span')[0],'inline');
      frm.delSquad.value='delete "'+frm.listSquads.value+'"';
      frm.edtSquad.value='new member';
      list_members(frm.listSquads.value);
    }
  
      
    
}

function list_members(s)
{
  m='';
  if(list_members.arguments.length>0 && arrSquads[s].length>0)
    {
      m='<strong>Members of <i>'+s+'</i></strong><br><select name="squad_members">';
      for(i=0;i<arrSquads[s].length;++i)
        {
          m+='<option>'+arrSquads[s][i]+'</option>';
        }
      m+='</select><input type="button" value="delete" onclick="delete_member(this.form.squad_members.selectedIndex)"><input type="button" value="edit">';
      toggle_obj(document.getElementById('o_member'),'block');
    }
  else
    {
      toggle_obj(document.getElementById('o_member'),'none');
    }
  document.getElementById('o_member').innerHTML=m;
}

function add_member(e)
{
  if(!e)
    {
      document.getElementById('o_add').getElementsByTagName('STRONG')[0].innerHTML='Enter Member-Name';
      toggle_obj(document.getElementById('o_add'),'block');
      frm.addBtn.value='add Member'
      frm.addBtn.onclick=function(){add_member(1);}
      
    }
  else
    {
      e='';
      v=String(frm.add.value).trim();
      frm.add.value='';
      if(v=='')
        {
          e='Enter Member-Name!';
        }
      
      else if(in_array(arrSquads[frm.listSquads.value],v))
        {
          e='This Member already exists';
        }
      if(e)
        {
          alert(e);
          frm.add.focus();
          return;
        }
      
      arrSquads[frm.listSquads.value].push(v);
      init_squads(frm.listSquads.value);
      toggle_obj(document.getElementById('o_add'),'none');
      
    }
}


function add_squad(e)
{
  
  if(!e)
    {
      document.getElementById('o_add').getElementsByTagName('STRONG')[0].innerHTML='Enter SQUAD-Name';
      toggle_obj(document.getElementById('o_add'),'block');
      frm.addBtn.value='add SQUAD'
      frm.addBtn.onclick=function(){add_squad(1);}
      
    }
  else
    {
      e='';
      v=String(frm.add.value).trim();
      frm.add.value='';
      if(v=='')
        {
          e='Enter SQUAD-Name!';
        }
      else if(typeof arrSquads[v]!='undefined')
        {
          e='This SQUAD already exists';
        }
      if(e)
        {
          alert(e);
          frm.add.focus();
          return;
        }
      
      arrSquads[v]=[];
      init_squads(v);
      toggle_obj(document.getElementById('o_add'),'none');
      
    }
}

function delete_squad()
{
  if(confirm('Delete SQUAD "'+ frm.listSquads.value +'" ?'))
    {
      delete(arrSquads[frm.listSquads.value]);
      init_squads();
    }
}

function delete_member(m)
{
  if(confirm('Delete Member "'+ arrSquads[frm.listSquads.value][m] +'" ?'))
    {
      arrSquads[frm.listSquads.value].splice(m,1)
      init_squads();
    }
}



window.onload=init_squads;
//-->
</script>
<style type="text/css">
<!--
.hide{display:none;}
li{margin:10px;}
-->
</style>
</head>
<body>
<form name="Formular">
<ul>
  <li id="o_squad">
    <strong>Your Squads:</strong><br />
    <select name="listSquads" onclick="squad_options();"></select>
    <input type="button" value="new SQUAD"   onclick="add_squad(0)">
    <span class="hide">      
      <input type="button" name="edtSquad" value="add Member" onclick="add_member(0)">&nbsp;
      <input type="button" name="delSquad" value="delete" onclick="delete_squad()">&nbsp;
    </span>
  </li>
  <li id="o_add" class="hide">
    <strong></strong><br />
    <input type="text" size="20" name="add">
    <input type="button" value="add" name="addBtn">
  </li>
  <li id="o_member" class="hide"></li>
</UL>
</form>
</body>
</html>
 
OMG! Sven du bist der Beste! Vielen Dank für deine professionelle Hilfe. Das script läuft jetzt bestens! Die Problem bei Mozilla, Opera und Netscape sind jetzt auch weg. Die Member werden in einem select Feld dargestellt. Alles so wie ich es haben wollte.

Habs bloß selbst nicht hinbekommen und das finde ich persöhnlich schade bin aber dennoch froh, dass es jetzt um so besser läuft. Vielen Dank dafür.

Ich hoffe ich kann das irgendwie wieder gut machen...?
 
Sven hast du noch lust mir zu helfen?

Ich bin einfach noch zu jung oder zu blöd dafür! Lese schon den ganzen Tag, um das Formular noch zu erweitern, aber ich finde mich einfach in diesem von dir erstellten script nicht zurecht.

Es ist auch glaube ich nicht mehr viel und wenn du magst, dann bin ich auch gerne bereit dir etwas dafür zu bezahlen.
 
Zurück