Formular dynamisch erweitern.

EnzoGo · 29. Juni 2009

Hmmm ..... echt schwer zu beschreiben. Ich versuche es mal

Ich habe ein Formular. In diesem Formular hab ich eine EIngabegruppe, welche ich über die clone Funktion vervielfältige. In dieser EIngabegruppe habe ich dann dann Daten die ich einmalig eingebe und dann aber auch Daten, welche ich dynamisch eingebe. Daher habe ich dort auch wieder eine clone-Funktion eingebaut. Also ein clone in einem clone. Ich brauche dann bei der Ausgabe jeden einzelnen Wert. Wenn ich jetzt aber z.b. Name [ ][ ] eingebe zählt er ja nur soweit, wie ich geclont habe. Ich kann also bei der Ausgabe mit beispielweise Name [0][3] kein eindeutiges Ergebniss erhalten.

Ich kann nun wohl nur mit einem clone arbeiten .... weile doppelte dynamik wohl nicht funktioniert.

Also Name [eins] [ ] z.B.

mfg Enzo

Sven Mintel · 29. Juni 2009

Also Name [eins] [ ] z.B.

Da müsstest du beim Clonen eines "Paketes" im Clone bei allen Formularelementen das "Eins" im Namen ändern, bspw. in Zwei....das Clonen im Clone sollte dann funktionieren.

EnzoGo · 29. Juni 2009

Hmm ziemlich komplex ... habe jetzt eine andere Möglichkeit gefunden.
Danke trotzdem

mfg Enzo

form · 11. August 2009

Hallo zusammen!

Habe das Script mit Begeisterung gefunden und bei meinem Formular eingebaut. Nun habe ich das Problem das ich ein zweites Javascript zur dynamischen Ausgabe von weiteren Options-Feldern drin habe, welches sich nicht mit einem einfachen Clonen verträgt.

Ich werde wohl die Felder anders benennen müssen (durchnummerieren?). Hat da jemand ne Idee?

THX

HTML:

<!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>Versicherung</td>
    <td>

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

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

    <option value="gruppe1[]">G1</option>

    <option value="gruppe2[]">G2</option>

    <option value="gruppe3[]">G3</option>

  </select>

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

    <option value="test">test1g1</option>

    <option value="test2">test2g1</option>

    <option value="test3">test3g1</option>

  </select>

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

    <option value="test">test1g2</option>

    <option value="test2">test2g2</option>

    <option value="test3">test3g2</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>Blub</td>
  <td><select id="blub" name="blub[]">
  <option value="vid1">blub 1</option>
  <option value="vid2">blub 2</option>
  <option value="vid3">blub 3</option>
  <option value="vid4">blub 4</option>
</select>
</td>
</tr>
<tr>
<td>Kundennummer</td>
<td><input type="text" name="blubnummer[]" size="20"></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>

kuddeldaddeldu · 11. August 2009

Hi,

form hat gesagt.:
Nun habe ich das Problem das ich ein zweites Javascript zur dynamischen Ausgabe von weiteren Options-Feldern drin habe, welches sich nicht mit einem einfachen Clonen verträgt.

mit Deiner anderen Javascriptfunktion hat das nichts zu tun.

form hat gesagt.:
Ich werde wohl die Felder anders benennen müssen (durchnummerieren?). Hat da jemand ne Idee?

Mit der Benennung der Felder hat das auch nichts zu tun. Die Clone-Funktion schert sich doch gar nicht um irgendwelche Namen oder IDs. Es wird der Elternknoten des Buttons geklont. Und das ist bei Deinem HTML halt das Div in dem die komplette Tabelle liegt. Lies Dir Svens Erläuterungen mal genau durch und ändere entweder Deine HTML-Struktur grundlegend oder pass die Funktion an, oder beides.

LG

form · 11. August 2009

Nach dem Clonen habe ich doch Werte für die Option-Felder übernommen?! Diese sollten aber im neuen Teil "jungfräulich" sein. Das ist doch kein Problem des HTML-Source?

Hab jetzt versucht im Script das folgende einzubauen:

HTML:

	if(objButton.form.lastChild.childNodes[j].type=='select')
            {
            objButton.form.lastChild.childNodes[j].value='';
            break;
            }

Brachte aber auch keine Besserung ;(

kuddeldaddeldu · 11. August 2009

Hi,

form hat gesagt.:
Diese sollten aber im neuen Teil "jungfräulich" sein.

sag das doch gleich. Ich hatte das so verstanden, dass Du nur das Textfeld klonen willst...
Die Funktion musst Du aber auch für das Leeren des Textfeldes anpassen, da das Div nicht mehr als Kindknoten die Formularelemente enthält, wie in Svens Beispiel, sondern eine Tabelle. Den Zugriff könntest Du z.B. mit getElementsByTagName realisieren.

Für Deine Auswahllisten reicht es natürlich nicht, einen value zu setzen. Du müsstest die Options durchlaufen und das selected-Attribut auf false setzen und die Listen, die nicht sichtbar sein sollen, wieder ausblenden.

Dann musst Du Dir noch überlegen, wie Du das mit den IDs dann machen willst. Eine ID muss nämlich dokumenentweit eindeutig sein. Und da Deine hideSelect-Funktion den Zugriff ja über IDs steuert, wird das sonst wohl auch zu unerwarteten Ergebnissen führen.

LG

form · 11. August 2009

Ja, genau an dem Punkt bin ich jetzt. Da weiß auch keiner einen wirklichen Fix?!

Bin nicht der Javascript-Crack ;(

kuddeldaddeldu · 11. August 2009

Hi,

form hat gesagt.:
Ja, genau an dem Punkt bin ich jetzt.

an welchem der Punkte?

form hat gesagt.:
Bin nicht der Javascript-Crack ;(

Grundkenntnisse sollten aber schon vorhanden sein. Einen maßgeschneiderten, fertigen Code für Deine individuellen Bedürfnisse werde ich Dir hier nicht liefern.
Fang also einfach mal mit dem Textfeld an und versuche, das zu leeren. Und dann überlegst Du Dir eine sinnvolle Vergabe für die IDs. vorher brauchst Du mit dem Rest gar nicht anfangen, denn die Option-Values musst Du dann beim Klonen ja auch noch alle anpassen.

LG

BQM · 12. Dezember 2009

Hallo ich bin neu hier und als erstes will ich mich gleich bedanken für die tolle Forenarbeit, die Ihr hier leistet, wirklich spitze. Begeistert bin ich auch von diesem tollen Script, hätte allerdings noch eine Frage dazu und hoffe, dass Ihr mir vielleicht weiterhelfen könnt.
Ich habe das Script in ein User-spezifisches Formular eingebaut, was auch soweit wunderbar funktioniert. Wird nun also das Formular zum ersten Mal aufgerufen und mit Daten befüllt, lässt sich die Tabelle beliebig oft klonen, so wie gewünscht. Die Daten der Variablen "description" werden dann als string in der DB gespeichert, so weit, so gut.
Ruft nun der User das Formular erneut auf, werden die vorhanden Datensätze ausgelesen und in den jeweiligen Textfeldern wieder dargestellt.
Beispiel: Wurde die Tabelle 4 x geklont, enthält der "description-string" 4 Variablen , beim erneuten Aufruf des Formulars werden dann 4 Tabellen mit dem jeweiligen Inhalt dargestellt.

So nun endlich zum eigentlichen Problem:

Wird nun eine neue Tabelle angelegt (also geklont), wird der (erste) Inhalt der "description-Variablen" mit geklont. Es steht also der Text der ersten Tabelle in dem Textfeld der neuen Tabelle. Ist ja auch logisch, denn schließlich wird ja geklont.

Wie bekommt man es nun aber hin, dass eine neue Tabelle ohne den Inhalt der ersten geklont wird?

Code:

<script type="text/javascript">
<!--
function clone_this(button, objid){
    // Tabelle innerhalb des DIVs mit ID "new_passage" clonen
    // Achtung: Es dürfen keine Zeichen zwischen dem DIV- und dem TABLE-Tag stehen!
    var clone_me = document.getElementById(objid).firstChild.cloneNode(true);

    // Im Parent-DIV vor dem Kindknoten "button" einhängen
    button.parentNode.insertBefore(clone_me, button);
}

function remove_this(objLink)
{
objLink.parentNode.parentNode.parentNode.parentNode.parentNode.removeChild(objLink.parentNode.parentNode.parentNode.parentNode);
}
//-->
</script>

PHP:

$description = explode(",",$description);


for($i = 0; $i < count($description); $i++)
{

$form .= "<div id='new_table'><table width='100%' border='0' cellspacing='0' cellpadding='0'>
         <tr>
           <td>";
	if($i > 0)  {
$form .= "<a href='#' onclick='javascript:remove_this(this); return false;'>LÖSCHEN</a>";
       }  
	  
$form .= "</td>   
        </tr>
     <td><textarea name='description[]' rows='5'>".$description[$i]."</textarea></td>
       </tr>
       </table></div>";
}  

$form .= "<div>
           <input value='mehr' onclick='javascript:clone_this(this, \"new_table\");' type='button'></input> 
		    </div>";

Ich hoffe, ich hab's nicht zu ausführlich erklärt und Ihr könnt mir weiterhelfen.

Vielen Dank schon mal im Voraus.

Viele Grüße Andi

Formular dynamisch erweitern.

EnzoGo

Mitglied

Sven Mintel

Mitglied

EnzoGo

Mitglied

form

Mitglied

kuddeldaddeldu

Erfahrenes Mitglied

form

Mitglied

kuddeldaddeldu

Erfahrenes Mitglied

form

Mitglied

kuddeldaddeldu

Erfahrenes Mitglied

BQM

Grünschnabel

Neue Beiträge