• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

[FRAGE] Klone mit eindeutiger ID

M

mastermueller

New member
Hi,
Ich bin Javascript Anfänger und habe ein Problem damit, Knoten zu klonen, weil sämtliche ID's mitgeklont werden. Hab schon viel gegooglet und Aussagen gefunden, was man wohl tun könnte - nur leider nie mit Codebeispiel, dann bringt das wenig zum Nachvollziehen... Ich mach mal n Beispiel, was ich machen will:

HTML: 
<html>
<head>
<title>test</title>
<script type="text/javascript">
<!--
function clone(button, objid)
{
	tmpvalue = document.test.elements['param[]'][1].value;

	document.test.elements['param[]'][1].value = '';

	var clone_me = document.getElementById(objid).firstChild.cloneNode(true);
	button.parentNode.insertBefore(clone_me, button);

	document.test.elements['param[]'][1].value = tmpvalue;
}

function remove_this(objLink)
{
	objLink.parentNode.parentNode.parentNode.parentNode.parentNode.removeChild(objLink.parentNode.parentNode.parentNode.parentNode);
}
//-->
</script>
</head>
<body>
<form name="test" method="post" action="test2.php">
	<input name="param[0]" value="0" type="hidden">
	
	<div id="hidden" style="visibility:hidden; display:none">
	<div id="table"><table>
		<tr><td>
			<input name="param[]" type='hidden' value="0">
			Parameter: <input name="param[]" type="checkbox" value="1">
		</td>
		<td>
			<span style="margin-left:2em;"></span><input value="-" onclick="javascript:remove_this(this)" type="button">
		</td>
		</tr>
	</table></div>	
	</div>

	<div>
		<input  style="margin-top:2em;" value="+" onclick="javascript:clone(this, 'table');" type="button">
		<button type="submit" name="sent">Submit</button>
	</div>
</form>

<?php
if(isset($_POST['sent'])){
	for ($i = 0; $i < count($_POST['param']); $i++) {
		print $i . ": " . $_POST['param'][$i] . "<br>";
	}
}
?>
</body>
</html>

Das Klonen der Elemente funktioniert hier schon. Ich weiß auch, dass ich mittels
Code: 
<input name="test[0]" type="checkbox" value='1'><input type='hidden' value='0' name='test[0]'>
nicht angeklickte Checkboxen abfragen kann. Problem ist jetzt, dass, sobald ich zB. <input name="param[1]"... in die Tabelle schreibe, nicht mehr klonen kann. Wenn ich allerdings keinen Namen angebe, haben das versteckte Feld und die Checkbox verschiedene Namen, was auch nicht sein soll. Kann man das irgendwie mit Javascript lösen?

Also nochmal in Kurz, was ich will: Checkboxen klonen, die auch beim nicht-anklicken mit dem Trick oben übertragen werden können und am Ende sämtliche Werte der Checkboxen in einem Array haben (und höchstens konstant viele mehr, in diesem Fall hier zB wohl 2 mehr).

Vielen Dank im Voraus für Vorschläge
 
Zuletzt bearbeitet von einem Moderator:
Hab ich dich richtig verstanden? Du willst einfach alle Checkboxen, egal ob angeklickt oder nicht clonen?

Da würde ich dir gerne die clone() Funktion (.clone() | jQuery API Documentation) von JQuery zeigen, diese kann sehr einfach HTML Elemente klonen.
 
Ich dachte, durch posten von Code wird es klar, was ich will.. Also nicht alle auf einmal klonen, sondern immer beim Klick auf den "+" Button eine weitere erstellen. Ich schau mir grad mal deinen Link an

EDIT: Also, wenn ich das richtig sehe, ist das auch nicht besser, als das was ich oben mache. Der kopiert auch sämtliche Attribute mit. Genau das will ich ja nicht!
 
Zuletzt bearbeitet:
Nebenbei:

  1. das Auskommentieren des script-Blocks ist unnötigt und stammt aus dem Steinzeitalter von JS.
  2. Code: 
    objLink.parentNode.parentNode.parentNode.parentNode.parentNode.removeChild(objLink.parentNode.parentNode.parentNode.parentNode);
    geht kürzer und einfacher:
    Code: 
    objLink.parentNode.parentNode.removeChild(objLink.parentNode);
 
Okay, danke... Fällt dir auch was zu meinem eigentlichen Problem ein? (Nämlich, das name-Feld eindeutig zu benennen)

Zu deinem 2. Punkt: Nee, dann löscht er nicht das, was ich will.

- - - Aktualisiert - - -

Also nochmal zur Verdeutlichung ein Screenshot. Das ist mit meinem Code oben entstanden. "+" und "-" funktionieren auch. Das Problem sind jetzt die Checkboxen. Ich will beim Submit sowohl die angeklickten, als auch die nicht angeklickten übertragen. Im Standardfall werden nur angeklickte übertragen. Daher der Trick mit den versteckten Feldern. Normal geht man dann hin und gibt dem versteckten Feld und der Checkbox den gleichen Namen. Dann wird entweder der Wert des versteckten Feldes übertragen (falls die Checkbox nicht angeklickt ist), oder eben der der Checkbox. Meine Frage ist jetzt: Wie kann ich den Checkboxen immer paarweise (ein verstecktes Element und eine Checkbox) gleiche Namen geben, aber jedem Paar einen anderen?
 

Anhänge

  • screen.png
    screen.png
    4 KB · Aufrufe: 2
Zuletzt bearbeitet:
Hi,

du kannst die input-Elemente des geklonten Knotens ermitteln, deren name-Attribut mit param beginnt. In einer Schleifen vergibst du diesen neue Namen (z.B. erweitert durch die Anzahl der bisherig geklonten Tabellen, siehe Beispiel).
Code: 
    function clone(button, objid) {
        var tmpvalue = document.test.elements['param[]'][1].value,
            clone_me,
            tables = button.parentNode.querySelectorAll('table').length; // Anzahl der bisherigen geklonten Tabellen ermitteln

        // Elemente leeren
        document.test.elements['param[]'][1].value = '';

        // Element klonen
        clone_me = document.getElementById(objid).querySelector('table').cloneNode(true);
        // Namen tauschen
        Array.prototype.slice.call(
            clone_me.querySelectorAll('input[name*=param]')
        ).forEach(function(input) {
            input.name = "param" + tables + "[]";
        });

        button.parentNode.insertBefore(clone_me, button);
        document.test.elements['param[]'][1].value = tmpvalue;
    }

    function remove_this(objLink) {
        objLink.parentNode.parentNode.parentNode.parentNode.parentNode.removeChild(objLink.parentNode.parentNode.parentNode.parentNode);
    }
Ciao
Quaese
 
Was ich nicht verstehe: wo ist hier im kompletten Code eigentlich eine eindeutige ID?
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben