Formular dynamisch erweitern

N

newbi_1

Mitglied
Guten Morgen,

Ich möchte eine Tabelle innerhalb eines Formulars erweitern klappt wunderbar - dank des Eintrags Nr. 178663 .

Aber ich möchte eine Überschrift haben, die genau so aussieht wie die Tabelle (Spaltenbreite).
PHP: 
<html>
<head>
<title>Test</title>
<script type="text/javascript">
  function clone_this(button, objid){
    // Achtung: Es dürfen keine Zeichen zwischen dem DIV- und dem TABLE-Tag stehen!
    var clone_me = document.getElementById(objid).firstChild.cloneNode(true);
    button.parentNode.insertBefore(clone_me, button);
  }

</script>
</head>
<BODY bgcolor="#cccccc">

<FORM  ACTION='ausgabe.php' METHOD='POST' NAME='Eingabeformular' >
<TABLE  cellspacing="0" border="1">
    <TD colspan=6 align=center><P class=ueber>Werte</TD>
    <TR>
      <TD><center><P class=ueber>Gr&ouml;sse</TD>
      <TD><center><P class=ueber>Wert</TD>
      <TD><center><P class=ueber>Wert</TD>
      <TD><center><P class=ueber>Wert</TD>
    </TR>
</TABLE> 
<div id="neue_spalte"><table name="cloneTable" cellspacing="0" border="1">
    <TR>
    <TD><SELECT name='groesse[]' size=1>
      <OPTION name='groesse' value=''>[bitte w&auml;hlen]</OPTION>
      <OPTION name='groesse' value='1 te Wahl'>1</OPTION>
      <OPTION name='groesse' value='2 te Wahl'>2</OPTION>
        </SELECT>
    </TD>
    <TD><INPUT TYPE='TEXT' NAME='wert1[]'></TD>
    <TD><INPUT TYPE='TEXT' NAME='wert2[]'></TD>
    <TD><INPUT TYPE='TEXT' NAME='wert3[]'></TD>
    </tr>
  </table> 
</div>

  <input value=" Werte eingeben " onclick="javascript:clone_this(this, 'neue_spalte');" type="button"></input>

 <CENTER><INPUT ALIGN=CENTER TYPE=SUBMIT VALUE='  Werte speichern   '>

</FORM>

Wie mache ich das! Leider habe ich keine Idee mehr und stelle mich wohl etwas doof an!.
 
Moin,

probiers mal so(die unwichtigen Sachen für das Erweitern habe ich mal entfernt und das Markup etwas "repariert":-) )
Code: 
<script type="text/javascript">
  function clone_this(btn){
    tbl=btn.parentNode.parentNode.parentNode;
    tbl.insertBefore(tbl.rows[tbl.rows.length-2].cloneNode(true),tbl.rows[tbl.rows.length-1]);
    
  }

</script>
<FORM  ACTION='ausgabe.php' METHOD='POST' NAME='Eingabeformular' >
  <TABLE  cellspacing="0" border="1"> 
   <TR>
    <TH colspan=4>Werte</TH>
   </TR>
   <TR>
    <TH>Gr&ouml;sse</TH>
    <TH>Wert</TH>
    <TH>Wert</TH>
    <TH>Wert</TH>
  </TR>
  <TR>
    <TD>
      <SELECT>
        <OPTION>[bitte w&auml;hlen]</OPTION>
        <OPTION>1</OPTION>
        <OPTION>2</OPTION>
      </SELECT>
    </TD>
    <TD><INPUT></TD>
    <TD><INPUT></TD>
    <TD><INPUT></TD>
  </TR>
  <TR>
    <TH colspan=4>
      <INPUT type="submit"/>
      <INPUT value=" Werte eingeben " onclick="javascript:clone_this(this);" type="button"/>
    </TH>
  </TR>
</TABLE> 
</FORM>
 
Das war super!
Es funktioniert - Ich verstehs zwar nicht wieso. Woher weiss denn das clonen wo es ansetzen muss?
Aber danke danke und nochmals danke :)
 
Hallo leider ist der Mensch ist ja nie zufrieden.
Folgende Frage drängt sich noch auf

Ich habe ein einfaches Formular und wenn im Feld 1 ein bestimmter Wert eingegebn wird, dann wird ein weiteres Feld ausgegraut.
Aber ich erweitere mein Formular ja nun dynamisch.

PHP: 
// Wert überprüfen, ob < oder Leerzeichen und dann folgendes sperren
		function checkWERT(wert1) {
			if(wert1.length > 0) {
				if (wert1.indexOf('<') == -1) {
					alert("Nur folgendes Zeichen '<' oder Leerzeichen ist  erlaubt");
					document.Eingabeformular.wert1.focus();
					return false;
				} else { 
					document.Eingabeformular.wert2.disabled = true;
				}
			} else {
				document.Eingabeformular.wert2disabled = false;
			}
		}


Formular sieht wie oben aus nur ein Input verändert sich .


PHP: 
<TD><INPUT  NAME='wert1[]' onChange='checkWERT(this.value)'></TD>

Wenn ich das Programm mit dynamischer Erweiterung aufrufe, dann wird zwar der Wert überprüft, die Warnung kommt aber der focus springt schon nicht ins Feld, geschweige, dass die Felder ausgegraut werden.

Schwierig schwierig und ich bin mit meinem Latein am Ende.
:(:(:(
 
Das geht vom Prinzip her genauso wie das clonen.

Das Dokument besteht aus einer Knotenstruktur, dort kann man sich mit diversen Methoden bewegen.

Beim Clonen:
Code: 
tbl=btn.parentNode.parentNode.parentNode;
parentNode liefert den Elterknoten eines Elementes.
Beim Button ist parentNode -> <td>
davon parentNode-><tr>
davon parentNode-><table>

Code: 
tbl.insertBefore(tbl.rows[tbl.rows.length-2].cloneNode(true),tbl.rows[tbl.rows.length-1]);
es wird die vorletzte <tr> dieser Tabelle geclont, und vor der letzten <tr> eingefügt.

Zur neuen Problemstellung:
Code: 
<script type="text/javascript">
  function clone_this(btn){
    tbl=btn.parentNode.parentNode.parentNode;
    tbl.insertBefore(tbl.rows[tbl.rows.length-2].cloneNode(true),tbl.rows[tbl.rows.length-1]);
    
  }
function checkWERT(e) 
{
  
  if(e.value.length) 
  {
    if (!e.value.match(/^[\s\<]+$/)) 
    {
      alert("Nur folgendes Zeichen '<' oder Leerzeichen ist  erlaubt");
      e.focus();
      return false;
    } 
    else 
    { 
      e.parentNode.parentNode.getElementsByTagName('input')[1].disabled = true;
    }
  } 
  else 
  {
    e.parentNode.parentNode.getElementsByTagName('input')[1].disabled = false;
  }
}  
</script>
<FORM  ACTION='ausgabe.php' METHOD='POST' NAME='Eingabeformular' >
  <TABLE  cellspacing="0" border="1"> 
   <TR>
    <TH colspan=4>Werte</TH>
   </TR>
   <TR>
    <TH>Gr&ouml;sse</TH>
    <TH>Wert</TH>
    <TH>Wert</TH>
    <TH>Wert</TH>
  </TR>
  <TR>
    <TD>
      <SELECT>
        <OPTION>[bitte w&auml;hlen]</OPTION>
        <OPTION>1</OPTION>
        <OPTION>2</OPTION>
      </SELECT>
    </TD>
    <TD><INPUT name="wert1[]" onchange="checkWERT(this)"></TD>
    <TD><INPUT name="wert2[]"></TD>
    <TD><INPUT></TD>
  </TR>
  <TR>
    <TH colspan=4>
      <INPUT type="submit"/>
      <INPUT value=" Werte eingeben " onclick="javascript:clone_this(this);" type="button"/>
    </TH>
  </TR>
</TABLE> 
</FORM>

Es wird sich wieder nach oben bewegt in der Knotenstruktur, diesmal nur bis zur aktuellen <tr>
Code: 
e.parentNode.parentNode
...und dort das 2. <input>-Element ausgewählt:
Code: 
getElementsByTagName('input')[1]

(Beachte, das Indizes bei 0 beginnen, mit 1 selektiert man also das 2.Element)

Eine Auswahl anhand des Namens ist auf diesem Weg zwar nicht möglich, aber wenn man weiss, das wievielte Element man sucht, sollte das schon passen.
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück