[FRAGE] Aufruf eines form über buttons - leider doppelte Ausgabe

[mischu]

Hallo Zusammen,
habe nach Jahren wieder mal was mit JavaScript zu tun... leider nicht mehr so flüssig wie früher...

Ich möchte im Bereich <article> mehrere Bilder als buttons positionieren. Beim klick auf eines der Bilder erscheint ein verstecktes Formular im Bereich <aside>. Das Formular wird dabei über eine Funktion aus dem button heraus sichtbar gemacht, gleichzeitig werden in dieser Funktion auch Werte mit übertragen. Das Formular wird zusätzlich aus einer anderen Quelle mit bildspezifischen Grunddaten gefüllt. Der spätere Versandt der Daten klappt wunderbar.
Da mehrere button auf das gleiche Formular zugreifen, kann ich nachdem das Formular einmal sichtbar ist, zwischen den verschieden button hin und her springen. Das Formular wird jeweils mit den dazugehörenden Grunddaten gefüllt.

Nun mein Problem:
Es scheint so, dass wenn ich zwischen den button hin und her springe, mehrere Instanzen des Formulars aufgebaut werden. Denn wenn ich das Formular abschicke, werden für alle angeklickten button Formulare abgeschickt. Habe auch einen reset() versucht (wenn man zwischen den button springt), komme aber nicht weiter. Um Hilfe wäre ich dankbar.

Grüße
Michael

HTML

<div class='positionButton_1' id="positionButton_1" onclick= "showform('Eingabeblock_1','Data1')">
</div>
<div class='positionButton_2' id="positionButton_2" onclick= "showform('Eingabeblock_1','Data2')">
</div>
<div class='positionButton_3' id="positionButton_3" onclick= "showform('Eingabeblock_1','Data3')">
</div>
<div class='positionButton_4' id="positionButton_4" onclick= "showform('Eingabeblock_1','Data4')">
</div>
<div class='positionButton_5' id="positionButton_5" onclick= "showform('Eingabeblock_1','Data5')">
</div>
	
<script type="text/javascript">
	var buttons_1 = document.getElementById("positionButton_1"); buttons_1.innerHTML = '<img src="Bilder/testbutton_1.png" />';
	var buttons_2 = document.getElementById("positionButton_2"); buttons_2.innerHTML = '<img src="Bilder/testbutton_1.png" />';
	var buttons_3 = document.getElementById("positionButton_3"); buttons_3.innerHTML = '<img src="Bilder/testbutton_1.png" />';
	var buttons_4 = document.getElementById("positionButton_4"); buttons_4.innerHTML = '<img src="Bilder/testbutton_1.png" />';
	var buttons_5 = document.getElementById("positionButton_5"); buttons_5.innerHTML = '<img src="Bilder/testbutton_1.png" />';
</script>

JavaScript

/*Bei Click wird zum Schalter zugehöriges Form geladen */
function showform(formsheet, data){
	// Gewünschtes form wird ausgewählt --> noch versteckt
	switch (formsheet){
			case 	"Eingabeblock_1":	insertdataform_1(formsheet, data);
								break;
			default:				console.log("Zum Schalter existiert kein formsheet");
	}
}

 

[mikdoe]

Zeig mal bitte die insertdataform_1
Und dann würde ich den Code etwas verkürzen, man braucht jedes Kommando immer nur ein mal und arbeitet mit Variablen und Schleifen. Dafür wurde das Ding ja erfunden.

 

[mischu]

Wie geschrieben, die automatisierte "Füllung" des form und das Absenden funktioniert wunderbar. Nur werden mit jedem Sendevorgang alle alten Vorgänge in der getätigten Reihenfolge wiederholt. Wie kann ich das form nach dem Absenden resetten/löschen, genauso muss das form beim springen zwischen den jeweiligen button (vor dem absenden) auch jeweils einen Reset/Löschung erfahren. Bin einfach zu lange aus der Materie. Wäre über Hilfe dankbar!

<form id="Eingabeblock_1" style="display: none;">
	<div>
		<label class="switch" id="schalter_1" name="schalter_1">
			<input type="checkbox" id="cb_schalter_1">>
			<span class="sliderswitch"></span>
		</label>
	</div>
	<div>
	   	...
	</div>
	<div>
	   	...
	</div>
	<button type="submit" id="button">push data</button>
</form>

function insertdataform_1(formsheet, path){
	// Aktueller Status wird aus der DB geladen --> form noch versteckt
		if (object[i].state.value == "true"){
			document.getElementById("cb_schalter_1").checked = false;
		}
	document.getElementById("Id_1").value = object[i];
	document.getElementById('Id_2').value = object[i];
			
	// form wird mit Grundaten zur Anzeige freigegeben
	document.getElementById(formsheet).style.display = "block";

	
	// Weiterverarbeitung der in form eingestellten / veränderten Werte
	document.getElementById("button").addEventListener("click", myfunction);
	
	function myfunction() {

	}
}

 

[mikdoe]

Ich verstehe nicht, was das werden soll

Warum sendest du die Daten nicht per AJAX? Dann hättest du z. B. auch kein Problem beim Neuladen der Seite, was ich hier zumindest für mitschuldig halte. Und der ganze Code wird viel ansehnlicher und wartbarer.
Und form's ein- und auszublenden ist immer unangenehm. Bin mir auch nicht sicher, ob das vorgesehen ist. Ich würd's lassen.

Nimm' jQuery.ajax(), das kann ich sehr empfehlen.

 

[mischu]

Danke für Deine Antwort. Sich in jQuery.ajax(), etc. einzuarbeiten macht für die Zukunft Sinn. Für mein kleines Projekt ist das aber mit "Kanonen auf Spatzen" geschossen. Ich kann mir nicht vorstellen, dass mein Problem nicht mit Javascript alleine gelöst werden kann.

Die Vorgehensweise:

1. Ich habe 5 buttons, die über die Funktion showform mit den Variablen id und form1 den dazugehörigen div container "definieren".
   showform(id,form1)
2. Innerhalb der Funktion showform() werden die Grunddaten anhand der id aus einem objektarray den Eingabefeldern des containers form1 zugeordnet. Der User kann diese wenn gewünscht abändern.
3. Bei drücken des button <push data> innerhalb des form1 containers werden diese Daten weiterversendet
4. Das funktioniert alles wunderbar

Das Problem:

• Wenn ich nur button_1 nutze, werden die Daten wunderbar weiterversendet.
• Wenn ich als nächstes button_2 benutze, werden die Daten auch weiterversendet. Aber die schon vorher versandten Daten des button_1 werden auch nochmals versandt.
• Klicke ich vor <push data> zwischen verschiedenen buttons hin und her, werden beim nächsten <push data> alle Daten der angeklickten buttons versendet, obwohl ich nur die Daten des aktuell ausgewählten buttons versenden möchte.
• Fazit: jeder klick auf einen button baut eine zusätzliche parallele Instanz auf. Beim klick auf <push data> werden die Inhalte aller Instanzen versendet.

Frage:
Wie kann ich bei <push data> oder anklicken eines anderen button die alte Instanz killen? Oder gibt es die Möglichkeit eines Handlers, welche die Daten der Clients (buttons) sammelt und diese an das form (div container) weitergibt, dass nur eine Instanz geöffnet ist?

Das muss doch irgendwie gehen

Grüße