Input.value ohne ID oder Klasse identifizieren

[Simuletsplay]

Hallo zusammen,

ich bin gerade dabei eine Seite zu erstellen, wo sich Trainer anmelden um ihre Sportler für einen Wettkampf anzumelden.
Da natürlich jeder X-Beliebige Anzahl an Sportlern hat, wir pro Sportler folgende "Kachel" angelegt:

<div class="col-lg-3 col-md-6 col-sm-12 p-3">
                    <div class="p-3 bg-light rounded">
                        <div class="row">
                            <div class="col">
                                <input type="text" placeholder="Name" class="form-control" name="name">
                            </div>
                            <div class="col">
                                <input type="text" placeholder="Vorname" class="form-control" name="vorname">
                            </div>
                        </div>
                        <div class="row mt-3">
                            <div class="col">
                                Geburtsdatum:
                                <input type="date" placeholder="Geburtsdatum" class="form-control" name="gdatum">
                            </div>
                        </div>
                        <div class="row mt-3">
                            <div class="col">
                                <input type="number" placeholder="Gewicht" class="form-control" name="gewicht">
                            </div>
                        </div>
                        <div class="row mt-3">
                            <div class="col">
                                <input type="number" placeholder="Kämpfe" class="form-control" name="kampfe" min="0">
                            </div>
                            <div class="col">
                                <input type="number" placeholder="Siege" class="form-control" name="siege" min="0">
                            </div>
                            <div class="col">
                                <input type="number" placeholder="Verloren" class="form-control" name="niederlagen" min="0">
                            </div>
                            <div class="col">
                                <input type="number" placeholder="Unends." class="form-control" name="unendschieden" min="0">
                            </div>
                        </div>
                        <div class="row mt-3">
                            <div class="col">
                                <button class="btn btn-sm btn-success" onclick="save()"><i class="material-icons">check</i></button>
                            </div>
                        </div>
                    </div>
                </div>

Bestätigt wird unten die Eingabe mit dem Button.

Ich suche jetzt nach einer Möglichkeit um die Values von den Inputs zu holen.
Irgendwie mit Parents oder sowas.

Bin leider noch relativ neu in JS, aber lerne täglich dazu!

Grüße
Ben

[Christian Marquardt]

https://www.w3schools.com/jsref/met_...entsbyname.asp

Das Beispiel ist dort falsch
var x = document.getElementsByName("fname")[0].name;

Warum die nun keine ID haben dürfen, erschließt sich nicht

[Simuletsplay]

Ich konnte mir bisher nicht ganz erschließen, wie ich unterschiedliche IDs setzen soll...
Es kann ja der Fall sein, dass schon welche vorab dort sind und jetzt neue nur dazu kommen. Würde ich also mit nem Counter arbeiten würde der ja immer bei 0 oder 1 starten...

passiert das öfter habe ich mehrmals diese ID vergeben

Oder kann ich die Divs 1. Ordnung im Haupt-Div zählen?

Bsp:

ROW
   COL
      ....
   COL
      COL
      COL
   COL

Bei diesem Bsp müsste dann 3 rauskommen, da ich ja nur die COL/DIV 1. Ordnung brauche und nicht die, die weiter "darin" sind

[Christian Marquardt]

https://jquery.com/download/

Alle inputs bekommen eine ID die aus dem wofür sie stehen besteht und der ID des Users

<input id="gdatum_USERID" type="date" placeholder="Geburtsdatum" class="form-control" name="gdatum">
oder
<input id="gewicht_USERID" type="number" placeholder="Gewicht" class="form-control" name="gewicht">

Damit hat jedes Inputfeld eine eigene ID

Es kann bsp nun ein Event an jedem inputfeld gesetzt werden, welches mit einer ID beginnt

$('input[id^="gdatum_"]').change(function () {
});

Es wird ein change Ereignis an alle Inputs mit gdatum gebunden
Die ID bekommt man dann mit

$('input[id^="gdatum_"]').change(function () {
id = $(this).attr("id").replace("gdatum_", "");
});

Hole die ID von dem Element, welches das Ereignis ausgelöst hat und entferne den statischen Teil der ID