Formular in mehrere Bereiche unterteilen?

Dsimon24

Lt. Junior Grade
Dabei seit
Aug. 2016
Beiträge
410
Moin zusammen,

leider habe ich ein Problem, bei dem ich mal ein paar Tipps brauche, wie ich es lösen könnte.

Ich habe ein Formular mit, sagen wir mal, 15 Input-Felder. Jetzt möchte ich die Input-Felder
aber auf bspw. 5 Views unterteilen und dann gesammelt per POST über Submit absenden.

Wie kann ich diese Teilung am besten realisieren? Ich denke mal, da macht JS und CSS sinn?
Leider habe ich aber absolut keine Idee, wie ich das am besten umsetzen kann. Ich brauche
keinen Code von euch, aber vielleicht ein paar Ansätze, wie ich es realisieren kann.

VG, David
 

Mihawk90

Commander
Dabei seit
Jan. 2008
Beiträge
2.526
Die gruppierten Felder jeweils in ein <fieldset>, diese kannst du dann mit einer CSS Klasse und JS anzeigen oder eben nicht.
Solange alles innerhalb desselben <form> Elements ist, werden auch versteckte Felder übermittelt. Sofern man dem Fieldset ein form= mitgibt, muss es nicht mal innerhalb sein (s. Link oben)
 
Zuletzt bearbeitet:

Dsimon24

Lt. Junior Grade
Ersteller dieses Themas
Dabei seit
Aug. 2016
Beiträge
410
Hmm, klappt noch nicht so richtig. Mache ich was falsch?

Code:
<style>
    .formHidden {
        display:none;
    }
    .formShown {
        display:inline;
    }
</style>


<form method="POST" action="index.php">

    <fieldset class="formShown" id="f1">

        <div class="form-group row">
            <label for="vorname" class="col-md-4 col-form-label text-md-right">Vorname</label>

            <div class="col-md-6">
                <input id="vorname" type="text" class="form-control" name="vorname"
                    value="<?= $bewerber->getVorname() ?>">
            </div>
        </div>

        <button onclick="myFunction()">Click me</button>

    </fieldset>

    <fieldset class="formHidden" id="f2">

        <div class="form-group row">
            <label for="nachname" class="col-md-4 col-form-label text-md-right">Nachname</label>

            <div class="col-md-6">
                <input id="nachname" type="text" class="form-control" name="nachname"
                    value="<?= $bewerber->getNachname() ?>">
            </div>
        </div>

    </fieldset>

</form>


<script>
    function myFunction() {
        document.getElementById('f1').className='formHidden';
        document.getElementById('f2').className='formShown';
    }
</script>
So müsste doch eigentlich nach Klick auf den Button der erste Teil
verschwinden und der zweite Teil angezeigt werden - oder?
 

DerGoblin2k

Ensign
Dabei seit
Nov. 2014
Beiträge
138
Moin,

schau mal nach classList.toggle() das könnte Dir weiterhelfen.

Ungefähr so:

Code:
var element = document.getElementById('f1');
element.classList.toggle("formHidden");
Gruß
/gob
 

Mihawk90

Commander
Dabei seit
Jan. 2008
Beiträge
2.526
Ja, funktioniert bei mir auch.
Das Problem ist nur, dass das <button> Element auch gleich das Formular absendet, wodurch die Seite neu geladen wird und es aussieht als würde nichts passieren.

Dazu muss das click event abgebrochen werden, wozu du das event objekt zurückgeben musst.
 

Mihawk90

Commander
Dabei seit
Jan. 2008
Beiträge
2.526
Ja, das wäre die andere Möglichkeit.

Ich hab auch gerade mal ausprobiert ob man es rein mit CSS Selektoren hinkriegt, aber die Sibling-Selektoren sind leider nur für darauffolgende Elemente 🤦‍♂️
 

Dsimon24

Lt. Junior Grade
Ersteller dieses Themas
Dabei seit
Aug. 2016
Beiträge
410
Dazu muss das click event abgebrochen werden, wozu du das event objekt zurückgeben musst.
Das scheint mein Problem zu sein. Wenn ich es mit DIVs löse, funktioniert es auch -
aber die Seite läd dann neu. Wie kann ich das am besten realisieren, das click
event abzubrechen?

Edit: Ich versuche das jetzt mal mit class='btn'.
Das klappt. Ich habe die Bereiche nun in DIVs gesetzt und realisiere es so:
Code:
  function go1to2() {
    document.getElementById('div1').style.display = 'none';
    document.getElementById('div2').style.display = 'block';
  }
Sollte es dennoch bessere Lösungen geben, bin ich dafür gerne bereit :)
 

Mihawk90

Commander
Dabei seit
Jan. 2008
Beiträge
2.526
Wie kann ich das am besten realisieren, das click
event abzubrechen?
Normalerweise event.preventDefault(), aber irgendwie krieg ich es gerade auch nicht hin... steh wohl auf dem Schlauch :D

Ich habe die Bereiche nun in DIVs gesetzt
Ob div oder fieldset macht mit dem class="btn" dann von der Formatierung keinen Unterschied mehr.
Fieldsets haben aber in der Handhabung des Formulars noch einige Möglichkeiten (ganzes fieldset deaktivieren z.B.), was mit einem div nur umständlich geht (dann muss man jedes Feld einzeln deaktivieren)
 

Mihawk90

Commander
Dabei seit
Jan. 2008
Beiträge
2.526
Das passiert automatisch dadurch, dass er das onclick Attribut verwendet.
Aber irgendwie krieg ich gerade das event-object nicht raus 🤔
Eigentlich sollte das mit onclick="myFunction(this)" gehen, aber irgendwie beinhaltet das dann gar nichts...

https://codepen.io/mihawk90/pen/LYYMQab

Anscheinend gerade irgendwo nen Denkfehler
 

DerGoblin2k

Ensign
Dabei seit
Nov. 2014
Beiträge
138
Das passiert automatisch dadurch, dass er das onclick Attribut verwendet.
Aber irgendwie krieg ich gerade das event-object nicht raus 🤔
Eigentlich sollte das mit onclick="myFunction(this)" gehen, aber irgendwie beinhaltet das dann gar nichts...
Mit (this) übergibt er
"<button onclick='myFunction(this)'>Click me</button>"

und ohne "undefined"
 

Mihawk90

Commander
Dabei seit
Jan. 2008
Beiträge
2.526
Das hab ich probiert, s. Codepen Link.
Aber irgendwie komme ich da gerade nicht auf das event object :D
 

DerGoblin2k

Ensign
Dabei seit
Nov. 2014
Beiträge
138
Also so hat es bei mir jetzt funktioniert:
Code:
window.onload = function() {
  var btn = document.getElementById("smt-btn");
    btn.addEventListener('click', function(e){
        document.getElementById('f1').className = "formHidden";
        document.getElementById('f2').className = "formShown";
        e.preventDefault();
    });
};
und den Button mit :

Code:
<button id="smt-btn">Click me</button>
 

DerGoblin2k

Ensign
Dabei seit
Nov. 2014
Beiträge
138
Hm ja, nur gerade keine Ahnung wieso es mit dem Attribut nicht geht 🤔
Arrrgh ... js is a bitch :D

<button onclick='myFunction(event)'>Click me</button>

(event) ... dann klappts auch mit dem Nachbarn ;)

Code:
function myFunction(e) {
  document.getElementById('f1').className='formHidden';
  document.getElementById('f2').className='formShown';
  //console.log(e)
  e.preventDefault();
}
Gruß
Gob
 

Mihawk90

Commander
Dabei seit
Jan. 2008
Beiträge
2.526
mh wow das ding muss beim übergeben event heißen...? Wieder was gelernt 🤦‍♂️
 

DerGoblin2k

Ensign
Dabei seit
Nov. 2014
Beiträge
138
Gerade noch mal ohne Argument getestet, läuft auch (jedenfalls in chrome)

<button onclick='myFunction()'>Click me</button>

und dann:

Code:
function myFunction() {
  document.getElementById('f1').className='formHidden';
  document.getElementById('f2').className='formShown';
  event.preventDefault();
}
 

Mihawk90

Commander
Dabei seit
Jan. 2008
Beiträge
2.526
Vermutlich weil dann event global weitergegeben wird, ich hatte es ja mit einem Argument getestet :)
 

kim88

Ensign
Dabei seit
Sep. 2016
Beiträge
181
Das einfachste währe dem button einen type zu geben:

HTML:
<!-- Mit type="button" sollte kein submit event gestartet werden -->
<button type="button" onclick="function();">Click me</button>

<!-- Mit type="submit" wird das Formular abgesendet, dieser Button einfach erst bei den letzten Feldern anzeigen -->
<button type="submit">Submit</button>
 
Top