✔ Feld anzeigen, wo geklickt wurde

[mychastic]

Hallo ich habe ein Problem. Ich habe eine Tabelle mit mehren Einträgen und für jeden Eintrag
gibt es eine Checkbox, die bei anklicken ein Textfeld hinter der Checkbox öffnet. Allerdings öffnet sich diese Textfeld immer nur hinter dem ersten Eintrag, egal auf welche Checkbox ich klicke

Quelcode sieht wie folgt aus:

	<table>
	<form method=POST name="addArticle" action={$SCRIPT_NAME}>
	<input type="hidden" name="action" value="addStorage">
	<tr>
		<td class="artikelkopf4">Artkelname</td>
		<td class="artikelkopf6">Einlagern</td>
		<td class="artikelkopf6">Serial eingeben</td>
	</tr>
	
	{section name="amount" loop=$arrival[0].amount}
	
	<tr>
		<td>{$article.name}</td>
		<td><input type="checkbox"name="storage"></td>
                <td><input type="checkbox" id="serial" name="serial" onchange="modifyField(this)">
                <input type="hidden" id="inputserial" name="inputserial" size="15"</td>		
	</tr>

	{/section}
	
	</table>

 

[OnlyFoo]

zeig uns doch noch modifyField
und lösch das id="..." soweit ich sehe ist das eine schleife, die mehrere Tabellenzeilen generiert... und jede zeile kriegt die selben ids... aber ne id darf nur einmal vorkommen...
und beim Textfeld fehlt ein >

 

[mychastic]

Stimmt, das mit der id macht Sinn
Aber wie kann ich das umgehen? Hab noch nicht viel mit Javascript gearbeitet

Die JS sieht so aus:

function modifyField(objCheckbox){
  if(objCheckbox.checked){
   document.getElementById('inputserial').type = "text";
  }else{
    document.getElementById('inputserial').type = "hidden";
  }
}

 

[mychastic]

Habe das ganze jetzt etwas abgeändert.

	<table>
	<form method=POST name="addStorage" action={$SCRIPT_NAME}>
	<input type="hidden" name="action" value="addStorage">
	<tr>
		<td class="artikelkopf5">blub</td>
		<td class="artikelkopf4">Artkelname</td>
		<td class="artikelkopf6">Einlagern</td>
		<td class="artikelkopf6">Serial eingeben</td>
	</tr>
	
	{section name="amount" start="0" loop=$arrival[0].amount}

	<tr>	
		<td>{counter}</td>
		<td>{$article.name}</td>
		<td><input type="checkbox" name="storage"></td>
		<td><input type="checkbox" name="serial" onChange="modifyField(this)"><input type="hidden" name="inputserial" size="15"</td>	
	</tr>
	
	{/section}
	
	</table>

Durch den Counter bekomme ich nun vor jedem Eintrag eine Zahl ausgegeben (1-5) wenn es 5 Artikel sind. Jeder Artikel erhält nun so auch eine Checkbox (eigentlich 2, aber nur die "serial" ist relevant). Kann ich nun durch den Counter jeder Checkbox eine eindeutige ID zuweisen oder kann ich das auch anders lösen?

 

[OnlyFoo]

wenn du schon {counter} hast, dann weiß denen doch ne eindeutige id alla: id='bla_{counter} zu. dann kannste mit modifyBla( '{counter}' ) und dann document.getElementById( "bla_" + argument0 ).machWas() die elemente ansprechen

 

[Sven Mintel]

Eigentlich brauchst du es garnicht unnötig komplizieren.
Das anzuzeigende Feld ist das letzte Element der <td> mit der dazugehörigen Checkbox, ideal um darauf zuzugreifen

Da der IE aber seine Probleme mit der type-Eigenschaft hat, würde ich das eher über style-display machen.
Und da der IE onchange erst nach onblur der Checkbox feuert, per onclick.

function modifyField(objCheckbox)
{
  objCheckbox.parentNode.lastChild.style.display=(objCheckbox.checked)?'inline':'none';
}

....

<td><input type="checkbox" id="serial" name="serial" onclick="modifyField(this)">
                <input type="text" style="display:none" id="inputserial" name="inputserial" size="15"></td>

 

[mychastic]

Ein dickes Dankeschön an Sven!!

/erledigt

 

[mychastic]

Wobei eine kleine Frage hätte ich dann noch

Ich kann nun jedes Feld an der richtigen Stelle aktivieren und deaktivieren. Wie spreche ich nun die einzelnen Felder an, wenn ich da eine Eingabe gemacht habe? Also letztendlich möchte ich für die Artikel optional eine Serial angeben können(durch diese aktivierbaren Eingabefelder) und diese dann per 1 Submit in einer Datenbanktabelle speichern/updaten.

 

[Sven Mintel]

du müsstest das name-Attribut aller mehrfach vorkommenden Formularfelder um eckige Klammern erweitern, also ca. so:

<td><input type="checkbox" id="serial" name="serial[]" onclick="modifyField(this)">
                <input type="text" style="display:none" id="inputserial" name="inputserial[]" size="15"></td>

Dann wird aus gleichnamigen Elementen ein Array übermittelt, den du über die entsprechenden Array-Methoden verarbeiten kannst.

Lasse dir dann einfach mal alles gesendete per

echo '<pre>'.print_r($_POST,true).'</pre>';

...ausgeben, dann siehst du, wie alles aufgebaut ist

 

[mychastic]

Vielen Dank! Klappt wunderbar!