Formular in mehrere Bereiche unterteilen?

[Dsimon24]

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]

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)

 

[Dsimon24]

Hmm, klappt noch nicht so richtig. Mache ich was falsch?

<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]

Moin,

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

Ungefähr so:

var element = document.getElementById('f1');
element.classList.toggle("formHidden");

Gruß
/gob

 

[Mihawk90]

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.

 

[DerGoblin2k]

oder den Button durch ein anderes Element mit class="btn" oder so ersetzen

 

[Mihawk90]

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]

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:

  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]

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

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)

 

[DerGoblin2k]

Normalerweise event.preventDefault(), aber irgendwie krieg ich es gerade auch nicht hin... steh wohl auf dem Schlauch

Dann müsste er nen Eventlistener anmelden, oder ?

 

[Mihawk90]

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]

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]

Das hab ich probiert, s. Codepen Link.
Aber irgendwie komme ich da gerade nicht auf das event object

 

[DerGoblin2k]

Also so hat es bei mir jetzt funktioniert:

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 :

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

 

[Mihawk90]

Hm ja, nur gerade keine Ahnung wieso es mit dem Attribut nicht geht 🤔

 

[DerGoblin2k]

Hm ja, nur gerade keine Ahnung wieso es mit dem Attribut nicht geht 🤔

Arrrgh ... js is a bitch

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

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

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

Gruß
Gob

 

[Mihawk90]

mh wow das ding muss beim übergeben event heißen...? Wieder was gelernt 🤦‍♂️

 

[DerGoblin2k]

Gerade noch mal ohne Argument getestet, läuft auch (jedenfalls in chrome)

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

und dann:

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

 

[Mihawk90]

Vermutlich weil dann event global weitergegeben wird, ich hatte es ja mit einem Argument getestet

 

[kim88]

Das einfachste währe dem button einen type zu geben:

<!-- 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>