Einzelnen Beitrag anzeigen
  #1 (permalink)  
Alt 10.02.2011, 12:06
Gardinero Gardinero ist offline
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 10.02.2011
Beiträge: 2
Gardinero befindet sich auf einem aufstrebenden Ast
Standard dynmaisches Formular für mehrere Einträge mit voneinander abhängigen Selectboxen

Hallo Leute,

vorab:
Ich bin auf dem Gebiet Javascript und AJAX noch absoluter Anfänger, was ich aber auch gern schnell ändern möchte.

Für ein kleines privates Projekt bin ich schon seit längerer Zeit auf der Suche nach einer Möglichkeit ein dynamisches Formular zu erstellen.

Es geht konkret um Folgendes:

Um z.B. die Ereignisse eines Fussballspiels zu dokumentieren, möchte ich ein Formular zur Ereigniseingabe basteln.

Z.B. soll es drei verschiedene Ereignisarten geben:

- Tor
- Karte
- Auswechslung

Diese sollen über ein Dropdownfeld ausgewählt werden. Sobald man seine Auswahl getroffen hat, soll über ein weiteres Dropdownfeld die entsprechende Unterkategorie gewählt werden.

Beispiel:

- Tor -> Elfmeter / Freistoss / Eigentor / ...
- Karte -> gelb / gelb-rot / rot
- ...

Zusätzlich gibt es noch ein Dropdownfeld für den entsprechenden Spieler und ein Eingabefeld für die Spielminute.

Bis hierhin bin ich, wenn auch eher durch die Hilfe von diversen Forenbeiträgen, bereits gekommen.

Am Ende des Formularblocks soll es nun aber noch einen Button geben, um ein weiteres Ereignis einzutragen, womit sich die ganze Sache wiederholt.

Unter

http://www.tippzeit.de/test/test99.php

habe ich mal ein Script hochgeladen, was schon recht nah meinen Bedarf deckt, doch sobald ich auf "weiteren angeben" klicke und im "Klon" eine andere Gruppe auswähle, wirkt sich dies auf den "Elternknoten" aus, nicht aber auf den "Klon".

Ich sage gleich, das Script ist nicht von mir, ich habe es lediglich geringfügig angepasst.

Prinzipiell geht es mir eher darum an das beschriebene Ziel zu kommen, dabei muss jetzt nicht unbedingt dieses Script funktionieren.

Vielleicht kann mir ja jemand sagen, mit welchen Mitteln ich ein solches Formular erstellen kann und wo ich ggf. ein entsprechendes Tutorial zum Lernen finden kann.

Hier das angesprochende Script:

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<script type="text/javascript">

function hideSelect(obj) {

  var j;

  if ( obj.options[obj.selectedIndex].value!=0
    && document.getElementById(obj.options[obj.selectedIndex].value)
    ) {
    for (var i=0; i<obj.options.length; i++) {
      if(obj.options[i].value!=0){
        j=document.getElementById(obj.options[i].value);
        if (i == obj.selectedIndex) {
          j.style.display = 'inline';
        } else {
          if(j)
            j.style.display = 'none';
        }
      }
   }
  }
}

function clone_this(objButton)
{
if(objButton.parentNode)
    {
    tmpNode=objButton.parentNode.cloneNode(true);
    objButton.form.appendChild(tmpNode);
    for(j=0;j<objButton.form.lastChild.childNodes.length;++j)
        {
        if(objButton.form.lastChild.childNodes[j].type=='text')
            {
            objButton.form.lastChild.childNodes[j].value='';
            break;
            }
        }
    objButton.value="entfernen";
    objButton.onclick=new Function('f1','this.form.removeChild(this.parentNode)');
    }
}

</script>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<style type="text/css">

body{
margin: 0;
padding: 0;
border: 0;
overflow: hidden;
height: 100%; 
max-height: 100%; 
}

#framecontent{
position: absolute; 
top: 0; 
left: 0; 
width: 100%; 
height: 130px; /*Height of frame div*/
overflow: hidden; /*Disable scrollbars. Set to "scroll" to enable*/
background-color: #FB6A00;
color: white;
}


#maincontent{
position: fixed; 
top: 130px; /*Set top value to HeightOfFrameDiv*/
left: 0;
right: 0;
bottom: 0;
overflow: auto; 
background: #fff;
}

.innertubehead{
margin: 15px; /*Margins for inner DIV inside each DIV (to provide padding)*/
font-family: Verdana, Geneva, sans-serif;
}

.innertube{
margin: 15px; /*Margins for inner DIV inside each DIV (to provide padding)*/
font-family: Verdana, Geneva, sans-serif;
font-size:12px;
}

* html body{ /*IE6 hack*/
padding: 130px 0 0 0; /*Set value to (HeightOfFrameDiv 0 0 0)*/
}

* html #maincontent{ /*IE6 hack*/
height: 100%; 
width: 100%; 
}

</style>
</head>
<body>

<div id="framecontent">
<div class="innertubehead">

<h1>TEST</h1>
</div>
</div>


<div id="maincontent">
<div class="innertube">
<form name="test" action="#" method="post">
<div>
<table width="90%" border="0" cellspacing="0" cellpadding="0">
<tr bgcolor="LightGrey">
<td>Testdaten</td>
<td>&nbsp;</td>
</tr>
  <tr>
    <td>Ereignis</td>
    <td>

  <select onchange="hideSelect(this);">

    <option value="">Bitte wählen...</option>

    <option value="gruppe1[]">Tor</option>
    <option value="gruppe2[]">Karte</option>
    <option value="gruppe3[]">Auswechslung</option>

  </select>

  <select id="gruppe1[]" name="gruppe1[]" style="display:none;" onchange="hideSelect(this);">

    <option value="test">Elfmeter</option>
    <option value="test2">Freistoss</option>
    <option value="test3">Eigentor</option>

  </select>

  <select id="gruppe2[]" name="gruppe2[]" style="display:none;" onchange="hideSelect(this);">

    <option value="test">gelb</option>
    <option value="test2">gelb-rot</option>
    <option value="test3">rot</option>

  </select>

  <select id="gruppe3[]" name="gruppe3[]" style="display:none;" onchange="hideSelect(this);">

    <option value="test">test1g3</option>
    <option value="test2">test2g3</option>
    <option value="test3">test3g3</option>
  </select>
</td>
  </tr>
  <tr>
  <td>Spieler</td>
  <td><select id="blub" name="blub[]">
  <option value="vid1">Spieler 1</option>
  <option value="vid2">Spieler 2</option>
  <option value="vid3">Spieler 3</option>
  <option value="vid4">Spieler 4</option>
</select>
</td>
</tr>
<tr>
<td>Spielminute</td>
<td><input type="text" name="minute[]" size="4"></td>
</tr>
<tr>
<td>
</td>
<td>&nbsp;</td>
</tr></div></div>
</table>
<input type="button" value="weiteren angeben" onclick="clone_this(this)">
</div>
</div>
</div>
da
</body>
</html>
Mit Zitat antworten
Sponsored Links