Aufruf div container endet mit mehreren Instanzen

[mischu]

Hallo Zusammen,
ich habe auf einer Seite mehrer buttons, welche einen div container aktivieren (show / hide). Der Container enthält buttons, slider und Textfelder. Mit Click auf einer der buttons wird eine button-spezifische ID durch eine Funktion übergeben, mit der Grundwerte aus einer Datenbank für die im div container hinterlegten Schalter, Textfelder, etc. ausgelesen werden. Ein im div container hinterlegter button sendet die dann vom User tatsächlich eingestellten Werte weiter. Das Grundprinzip funktioniert wunderbar.

Das Problem:

1. Wenn ich nur einen button (z.B. button_1) nutze, werden die Daten wunderbar weiterversendet.
2. Wenn ich als nächstes button_2 benutze, werden die Daten auch wie gewünscht weitergeleitet. Aber die schon vorher versandten Daten des button_1 werden auch nochmals versandt.
3. Klicke ich vor dem Versand der eingestellten Daten zwischen verschiedenen buttons hin und her, werden beim nächsten Versand alle Daten der angeklickten buttons versendet, obwohl ich nur die Daten des aktuell ausgewählten buttons versenden möchte.
4. Fazit: jeder klick auf einen button baut eine zusätzliche parallele Instanz auf. Beim klick auf <push data> (Versand des dargestellten div containers) werden die Inhalte aller Instanzen versendet.

Frage:
Wie kann ich bei <push data> oder anklicken eines anderen button die alte Instanz killen? Wenn dies nicht möglich sein sollte, gibt es die Möglichkeit eines Handlers, welche die Daten der Clients (buttons) sammelt und diese an den div container weitergibt, dass nur eine Instanz geöffnet ist? Möchte das Ganze in Javascript lösen, da ich keine Erfahrung mit Ajax habe.

Das muss doch irgendwie gehen

?
Grüße

 

[Fips]

Es wäre auf jeden Fall hilfreich, wenn Du deinen Code posten würdest.

Guckst du hier.

 

[mischu]

Hier ist ein vereinfachter Code. Wenn ich auf einen button klicke und das Formular abschicke, werden die jeweiligen Daten korrekt abgeschickt. Springe ich jedoch im HTML zwischen den drei Buttons (ohne das form abzuschicken), wird zu jedem angeklickten Button eine Instanz aufgebaut. Beim Abschicken der Daten von der zuletzt erstellten Instanz (das zuletzt ausgefüllte form), werden diese Daten auch an alle vorherigen nicht versandten versendet.

Ich brauche also einen Befehl, welcher beim hin und herspringen zwischen den buttons und jeweils nicht abgesendeten form die vorherige Instanz / das form löscht. Also einen automatisierten Befehl "submit" / kill / reset. Dies könnte in der function "showform", bevor das neue form aktiviert wird, stattfinden.

Vielleicht hat jemand eine Lösung. Manchmal sind es die kleinen Dinge die man partout nicht sieht...

Ich verwende kein Ajax und kenn mich da leider noch nicht aus. Möchte das Ganze aktuell nur mit Javascript lösen.

Vielen Dank!
Grüße

HTML

<button type="onclick= "showform('eingabeblock_1','ID_1')"> Test 1 </button>
<button type="onclick= "showform('eingabeblock_1','ID_2)"> Test 2 </button>
<button type="onclick= "showform('eingabeblock_1','ID_3')"> Test 3 </button>


<div id="form_1">
<form id="eingabeblock_1">

<p>ON / OFF</p>
<label class="switch">
<input type="checkbox" id="schalter_1">
<span class="sliderswitch"></span>
</label>

<p>brightness</p>
<label class="slidecontainer">
<input type="range" id="rg_schalter_1" min="0" max="100" step="1" value="100" class="slider">
<label>

<p>color-level</p>
<label class="slidecontainer1">
<input type="range" id="rg_schalter_2" min="0" max="100" step="1" value="100" class="slider">
<label>
<button type="submit" id="button_1">Push data</button>
</form>
</div>


Javascript

function showform(formsheet, id){
// Gewünschtes form wird ausgewählt
switch (formsheet){
case "Eingabeblock_1": insertdata_1(formsheet, id);
break;
case "Eingabeblock_2": insertdata_2(formsheet, id);
break;
case "Eingabeblock_3": insertdata_3(formsheet, id);
break;
}
}

function insertdata_1(formsheet, id){

// Zuerst werden hier vorgespeicherte Grunddaten in das Form eingegeben
// User kann diese selber auf gewünschte level einstellen

document.getElementById("button_1").addEventListener("click",furtheractions);
function furtheractions() {

// Daten werden weiterverarbeitet

}
}

 

[mischu]

Vielen Dank für Deine Hilfe!! Funktioniert top!! Habe meine Fehler soweit begriffen .