clone_me.getElementsByTagName('TEXTAREA')[0].value='';document.getElementById(objid).getElementsByTagName('TABLE').length<script type="text/javascript">
<!--
function clone_this(objid){
var clone_me = document.getElementById(objid).firstChild.cloneNode(true);
clone_me.getElementsByTagName('TEXTAREA')[0].value='';
clone_me.getElementsByTagName('TEXTAREA')[1].value='';
document.getElementById('insert_tab').appendChild(clone_me);
}
function nolink(){
document.getElementById('ubutt').firstChild.style.display = "none";
}
function nolink2(){
document.getElementById('dbutt').lastChild.style.display = "none";
}
function tr_down(row_id){
var table = document.getElementById('main_tab');
var row = document.getElementById(row_id);
var next_row = row.nextSibling;
var next_after_row = next_row.nextSibling;
table.insertBefore(row, next_after_row);
}
function tr_up(row_id){
var table = document.getElementById('main_tab');
var row = document.getElementById(row_id);
var prev_row = row.previousSibling;
while (prev_row.nodeType != 1){
prev_row = prev_row.previousSilbing;
}
table.insertBefore(row, prev_row);
}
function tr_first(row_id){
var table = document.getElementById('main_tab');
var row = document.getElementById(row_id);
var first_row = document.getElementById(row_id).firstChild;
table.insertBefore(row, first_row);
}
function tr_last(row_id){
var table = document.getElementById('main_tab');
var row = document.getElementById(row_id);
var last_row = document.getElementById(row_id).lastChild.nextSibling;
var last_after_row = last_row.nextSibling;
table.insertBefore(row, last_after_row);
}
function CountChar(desc, countfield, maxlimit){
var t = document.getElementById(desc).value;
var rest = maxlimit - t.length;
if (t.length > maxlimit) {
t = t.substring(0,maxlimit);}
else
{countfield.value = maxlimit - t.length;}
}
//-->
</script>$v = 0;
$form .= "<table border='1'><tbody id='main_tab'>";
for($i = 0; $i < count($description2); $i++){
$v++;
$form .= "<tr id='ctr_".$i."'><td>
<div id='new_passage'><table border='1'><tr>
<td>Art.-Nr.: $v</td><td rowspan='2'> </td>
<td><textarea name='description3a[]' rows='2'>".$description3a[$i]."</textarea></td>
<td rowspan='2'>
<input value='Artikel löschen' onclick='op.value=\"branchartikph\";op3.value=\"del".$i."\";' type='submit'></input>
<a href='#' onclick='javascript:tr_first(\"ctr_".$i."\"); nolink(); return false;' id='ubutt'>an erste Stelle</a><br>
<a href='#' onclick='javascript:tr_last(\"ctr_".$i."\"); nolink2(); return false;' id='dbutt'>an letzte Stelle</a><br><br>
<a href='#' onclick='javascript:tr_up(\"ctr_".$i."\"); nolink(); return false;' id='ubutt'>nach oben</a><br>
<a href='#' onclick='javascript:tr_down(\"ctr_".$i."\"); nolink2(); return false;' id='dbutt'>nach unten</a><br>
</td></tr>
<td> </td>
<td><textarea cols='50' rows='5' name='description2[]' id='desc2' onkeydown='CountChar(\"desc2\",this.form.remLendesctow,10000)' onkeyup='CountChar(\"desc2\",this.form.remLendesctow,10000)'>$description2[$i]</textarea><br>Zeichen max.:<input class='tbox' type=box name=remLendesctow size=5 value=10000></td>
</tr>
</table>
</div>
</td></tr>";
}
$form .= "</td></tr></tbody></table>
<div id='insert_tab'></div><table border='1'><tr><td>
<input value='Neuen Artikel hinzufügen' onclick='javascript:clone_this(\"new_passage\"); op.value=\"submit\";' type='submit'></input>
</td></tr></table>";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> </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> </td> </tr></div></div> </table> <input type="button" value="weiteren angeben" onclick="clone_this(this)"> </div> </div> </div> da </body> </html>
Array.prototype.slice.call(clone_me.querySelectorAll('input[name="Telefonnummer[]"]')).forEach(function(input) {
input.value = "";
})Beispiel:
Erläuterung:Code:<html> <head> <title>Test</title> <script type="text/javascript"> <!-- 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> </head> <body> <form> <div> <input type="text"size="20"name="textfeldname[]"><br> <input type="button"value="noch eins"onclick="clone_this(this)"> </div> </form> </body> </html>
Der Button und das Textfeld stehen in einem <div>(kann auch was anderes sein...span bspw)
Beim Aufruf wird der Funktion der Button als Objekt übergeben...dadurch hat man Zugriff auf alle seine Eigenschaften.
if(objButton.parentNode)
Abfrage, ob der Button einen Elternknoten hat...in DOM-Browsern ist dies der Fall...der Elternknoten ist das <div>
tmpNode=objButton.parentNode.cloneNode(true);
Von diesem Elternknoten wird eine Kopie erstellt
objButton.form.appendChild(tmpNode);
diese Kopie wird ans Ende des Formulars gehängt
...der Inhalt des grad erstellten Textfeldes wird gelöscht... der wurde nämlich mitgeklontCode: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; } }
Danach habsch noch als Feature das Ändern des angeklickten Buttons eingefügt...sein Wert wird auf "entfernen" geändert...wenn man jetzt draufklickt, wird dieser Button incl. des dazugehörigen Textfeldes wieder gelöscht.
(kannst du natürlich rausnehmen, wenn du es nicht brauchst)
Auf das Durchnummerieren der Textfelder hab ich verzichtet....das wäre unnützer Mehraufwand.
In PHP kannst du durch die Klammer in "textfeldname[]" auch so bequem auf die Textfelddaten zugreifen.
Testbeispiel
<form>
<div class="parentNode">
<div style='display:block; float:left; clear:both;'>
Eingabe:
</div>
<div style='display:block; float:left; clear:both;'>
<input type="text" size="20" name="textfeldname[]">
</div>
<div style='display:block; float:left; clear:both;'>
<input type="button" value="noch eins" onclick="clone_this(this)">
</div>
</div>
</form>var getParent = function(node) {
var parent = node.parentNode,
className = "parentNode";
while (parent.parentNode && !parent.classList.contains(className)) {
parent = parent.parentNode;
}
return parent === document ? null : parent;
},
clone_this = function(objButton) {
var parent = getParent(objButton),
tmpNode,
children;
if (parent) {
tmpNode = parent.cloneNode(true);
objButton.form.appendChild(tmpNode);
children = objButton.form.lastChild.querySelectorAll('input');
for (j = 0; j < children.length; ++j) {
if (children[j].type == 'text') {
children[j].value = '';
break;
}
}
objButton.value = "entfernen";
objButton.onclick = function() {
this.form.removeChild(parent);
}
}
};
