Dynamisches Formular mit Auswahl über Modal

[LudwigM]

Hallo,
ich möchte eine unbekannte Anzahl an Datenreihen je 3 Werten aufnehmen. Dafür liegt ein Entwurf vor:

Über das "Plus" kann eine neue Zeile hinzugefügt werden, die auf Grundlage einer Template hinzugefügt wird. Über das "Minus" kann die entsprechende Zeile entfernt werden. Für die Werte der ersten Spalte, soll aus einer Tabelle (DataTable) ein Eintrag gewählt werden. Dafür soll ein Modal geöffnet werden. Derzeit ist meine Idee so, dass beim Klick in ein Element der ersten Spalte das Modal öffnet, und dann die Auswahl erfolgen kann. Dann besteht das Problem, wie man die ID in das Element bekommt, da alle Elemente der Spalte den gleichen Namen txtersteSpalte[] haben. Außerdem soll im Textfeld nicht die ID sondern eine Bezeichnung stehen, die ID ist für die Submit-Methode.

Ein Versuch mit Javascript:

        var wrapper = $("#wrapper"); //wrapper für alle Zeilen
        $(wrapper).on('click', '.openmodal', function(e){
            $("#modal").modal("show");      
            $("#btnCloseModal").on('click', function() {                    
                e.target.value = $("#txtID").val(); //txtID enthählt die ausgewählte ID im Modal
                $(e.target).parent().next().children().val("some other text from the modal for the second column");
            });
        });

Bei der ersten Auswahl funktioniert es noch, bei jeder weiteren werden jedoch auch in die zuvor ausgewählten Felder überschrieben.
Hat jemand eine Idee? Vielleicht auch eine ganz andere Vorgehensweise?


Gruß Ludwig

 

[LudwigM]

Die erste Grafik ist das Formular auf der Hauptseite. Beim Klick in ein Feld der ersten Spalte öffnet sich das Modal das die DataTable enthalten soll. Dort wählt der Benutzer per Select-Plugin eine Zeile aus, auf deren Grundlage Daten in die Zeile des Formulars in der geklickt wurde übernommen wird.
Die DataTable existiert noch nicht, erstmal enthält das Modal nur eine Textbox, um die "Übergabe" zu testen.

Mit diesem Code konnte ich es beheben:

let wrapperTarget;
$(wrapper).on('click', '.openmodal', function(e){
    wrapperTarget = e.target;
    //$("#divModalBody").html(data_table_html);
    $("#modal").modal("show");
}); 

$("#btnCloseModal").on('click', function() {   
    wrapperTarget.value = $("#txtUserInput").val();
    $(wrapperTarget).parent().next().children().val($("#txtUserInput").val() + " data");
});

HTML des Modals:

Spoiler: Code

<div class="modal fade" id="modal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
    <div class="modal-content">
        <div class="modal-header">
        <h5 class="modal-title" id="modalTitle">Modal title</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body" id="divModalBody">
            <input type="text" id="txtUserInput" name="tbxComment" class="form-control" placeholder="Bemerkung">
                  
        </div>
        <div class="modal-footer">
        <button type="button" class="btn btn-secondary" id="btnCloseModal" data-bs-dismiss="modal">Schließen</button>
        </div>
    </div>
    </div>
</div>

Für eine andere, bessere Lösung bin ich offen...

 

[LudwigM]

In dem Code sehe ich gar nicht, wie die Daten in das Modal kommen, das ist auskommentiert.

Soweit bin ich noch nicht erstmal ist nur eine Textbox zum Testen für eine händische Eingabe vorhanden. Aber geplant ist es so: per PHP die SQL - Anfrage ausführen und eine HTML-Tabelle daraus generieren. Per JS die DataTable initialisieren...

Heißt das, dass das Problem gelöst ist?

Sieht derzeit so aus... Es sei denn jemand hat noch eine bessere Idee. So funktioniert es erstmal