Formular mit Array aus Radio-Feldern

[Moritz123]

Hallo,

ich habe hier ein merkwürdiges Problem: Ich habe ein Formular mit einer variablen Anzahl an Input-Feldern, die mit jQuery dynamisch hinzugefügt bzw entfernt werden können.
Dabei wird immer eine Gruppe bestehend aus einem Text-Feld, einem Select-Feld sowie einer Radiogroup bestehend aus zwei radios dynamisch zum DOM hinzugefügt.
Da ich bei der anschließenden Verarbeitung des Formulars ja nicht weiß, wie viele Inputs da übermittelt werden, arbeite ich mit Array-Feldern (im Beispiel ist eine Gruppe zu sehen, welche dann dynamisch vervielfacht werden kann):

<tr class="row-settlement-variable-noteventbased">
	<td><input type="text" name="settlement-variable-noteventbased[value][]"></td>
	<td><input type="radio" checked="checked" value="fixed" name="settlement-variable-noteventbased[type][]"> Eur<br/><input type="radio" value="percent" name="settlement-variable-noteventbased[type][]"> %</td>
	<td><input type="text" name="settlement-variable-noteventbased[threshold][]"></td>
	<td><img src="/public/img/icons/delete.png" class="remove-row"></td>
</tr>

Für das Select- und Text-Feld klappt das auch prima, nur bei den Radiobuttons ist das Verhalten (nachvollziehbar) ungewollt: Durch das hinzufügen weiterer Elemente kann ich nur noch innerhalb aller auswählen, statt wie gewollt innerhalb der einzelnen Gruppen.

Wie kann ich das so umsetzen, dass jede Gruppe individuell auswählbar bleibt?

Vielen Dank!

 

[Dr Dau]

Hallo!

Ist doch auch logisch:

Es kann immer nur einer der Radio-Buttons ausgewählt sein.

Daher mein Vorschlag, nehme Checkboxen:

Checkboxen sind eine Gruppe von ankreuzbaren Quadraten, bei denen der Anwender keine, eins oder mehrere auswählen kann.

Gruss Dr Dau

 

[Moritz123]

Hallo!

danke für deine Antwort. Problem bei Checkboxen: es können beide Optionen ausgewählt werden, was aber nicht möglich sein soll.
Gibt es keine Alternative mit Radio-Buttons?

 

[Maik]

Hi.

Gibt es keine Alternative mit Radio-Buttons?

Klingt zumindest hiernach: Radio Button beide wählbar ?

Radio-Buttons werden durch <input type="radio"> definiert (input = Eingabe). Jeder Radio-Button sollte einen internen Bezeichnernamen erhalten, und zwar mit dem Attribut name. Alle Radio-Buttons, die den gleichen Namen haben, gehören zu einer Gruppe, d.h. von diesen Buttons kann der Anwender genau einen markieren.

mfg Maik

 

[Dr Dau]

@Maik, es ist ja nur ein Radio-Button auswählbar, da beide das gleichen name-Attribut tragen.
Das Problem aber ist dass dynamisch noch mehr Gruppen hinzugefügt werden sollen.

Dazu müsste auch das name-Attribut dynamisch erstellt werden.
Ergo muss das Array nummeriert werden.
Beispiel (ich bin mir jetzt nicht 100%ig sicher, aber aus dem Kopf heraus meine ich dass es so korrekt sein müsste):

<tr class="row-settlement-variable-noteventbased">
    <td><input type="text" name="settlement-variable-noteventbased[1][value]"></td>
    <td><input type="radio" name="settlement-variable-noteventbased[1][type]" value="fixed" checked="checked"> Eur<br/>
        <input type="radio" name="settlement-variable-noteventbased[1][type]" value="percent"> %</td>
    <td><input type="text" name="settlement-variable-noteventbased[1][threshold]"></td>
    <td><img src="/public/img/icons/delete.png" class="remove-row"></td>
</tr>
<tr class="row-settlement-variable-noteventbased">
    <td><input type="text" name="settlement-variable-noteventbased[2][value]"></td>
    <td><input type="radio" name="settlement-variable-noteventbased[2][type]" value="fixed" checked="checked"> Eur<br/>
        <input type="radio" name="settlement-variable-noteventbased[2][type]" value="percent"> %</td>
    <td><input type="text" name="settlement-variable-noteventbased[2][threshold]"></td>
    <td><img src="/public/img/icons/delete.png" class="remove-row"></td>
</tr>
<tr class="row-settlement-variable-noteventbased">
    <td><input type="text" name="settlement-variable-noteventbased[3][value]"></td>
    <td><input type="radio" name="settlement-variable-noteventbased[3][type]" value="fixed" checked="checked"> Eur<br/>
        <input type="radio" name="settlement-variable-noteventbased[3][type]" value="percent"> %</td>
    <td><input type="text" name="settlement-variable-noteventbased[3][threshold]"></td>
    <td><img src="/public/img/icons/delete.png" class="remove-row"></td>
</tr>

Das sollte mit jQuery machbar sein..... da können die JavaScript-Experten aber sicherlich mehr zu sagen.

Du verarbeitest die Formulareingaben ja weiter, aber womit?
Bei PHP z.B. kannst du das Array auch mit count() zählen und dann in einer Schleife abarbeiten.

 

[Irresponder]

Nicht vergessen, ob solch wilde Array-Konstrukte wie gewünscht ankommen ist Server-Side bedingt, mit PHP klappt das i.d.R. - hat nix mit JavaScript zu tun ^^