Nach Klick auf Rdaio Button Sprung nach oben

  • Hallo zusammen,


    ich habe mein erstes HTML Formular mit Bootstrap fertig gestellt. Es ist responsive und es klappt wirklich so gut wie alles. Habe mir online TuT von SelfHTML durchgelesen und probiert.


    Im Formular kann bewertet werden, wenn der User eine Bewertung (Radio-Button) anklickt, springt die Seite automatisch an den Seitenanfang, natürlich nur, wenn die Seite nicht auf eine Seite passt. Auf dem Handy passiert das nicht, nur wenn ich Chrome so klein schiebe, dass gescrollt werden muss.


    Die Bewertung ist mit CSS als Star dargestellt... hier mal mein Code für eine Bewertung

    Den header habe ich weggelassen, hier aber noch das CSS für das rating:

    Kann jemand mir erklären, warum er nach oben springt? Und wenn ja, warum nicht auf dem iPhone sondern nur auf der Desktop-Variante?


    Vielen Dank,


    Erik

  • basti1012 danke dir, das klappt!


    Noch eine Frage, meine Bewertung steht ja in einer spalte... kann ich diese links oben in der Spalte anordnen? Ich habe es jetzt mit margin ausgerichtet, aber eleganter und saubere wäre doch, wenn das objekt sich automatisch links oben anordnet oder? Ich habe aktuell vertig-align: top

    aber es ist trotzdem nicht ganz links oben

  • ist doch, oder? Value =1 ist die Note 1, Ich speichere die Noten in der Datenbank, um später mit dem Schulnotenprinzip die Daten bewerten zu können

    Na gut das musst du im Endeffekt selber wissen, ich meine das immer andersrum zu kennen aber kann mich auch irren.
    Negative Margin Werte finde ich gerade nicht optimal, genau wie Float sollte man versuchen nicht zu nutzen.
    Ohne Float und minus Werten hätte ich so versucht.
    https://codepen.io/basti1012/pen/VwaYrdv

    Bei kleinen Bildschirmen sollte es dann untereinander stehen

  • danke dir, das baue ich noch mit ein.


    Kannst du mir ein kurzes Beispiel geben, wie ich aus meinem HTML Formular jetzt die Werte in die Datenbank (mysql, treiber pdo) einfüge bzw. aktuailisiere? DAs SQL statemant ist kein problem, aber wie ich nach dem speicher button das php ausführe weiß ich nicht... ist das mit javascript zu realisieren oder? Weil php ist ja serverseitig aber der client "drückt" ja auf update...


    Danke,


    Erik

  • moin,

    danke für den link, der hat geholfen... habe es hinbekommen, habe es gelöst mit:

    PHP
    1. <form class="form" method="post" action="<?php echo $_SERVER['PHP_SELF'];?>">

    und dann im PHP

    Die daten abgerufen, wobei "absenden" der Button fes Formulars ist.


    Dann einfach das UPDATE SQL über die mysql query ausgeführt... und anschließend auf eine andere Seite weitergeleitet... fertig!!!


    1.000 Dank basti1012


    Jetzt bastel ich noch ein paar Prüfmechanismen ein und dann ist meine erste HTML Seite mit Bootstrap und mobiler Ansicht fertig... den automatischen Dark-Mode habe ich auch schon mit drin :-D

  • Nachtrag...


    Ich komme aktuell nicht weiter bei der required Angabe...


    Die radio buttons sind ja als sterne dargestellt... wenn ich das attribut required hinzufüge und dann am Ende des Formulars auf meinen button drucke, passiert nix, erhalte auch keine Fehlermeldung.


    mein button am Ende des Formulars

    Code
    1. <div class="form-row">
    2. <div class="col-md-3 offset-md-9 text-center">
    3. <button type="submit" name="absenden" value="absenden" id="absenden" class="float-md-right btn btn-primary buttondremo">Bewertung an DREMO senden</button>
    4. </div>
    5. </div>


    und die radio buttons:

    Aber es passiert einfach nix... wenn ich beim button type=button statt submit mache, passiert nix... Bei submit zeit Chrome bei der "Untersuchungsfunktion" folgenden Fehler nach klick auf dem Button an:

    An invalid form control with name='ratingbd' is not focusable.


    hast du eine Idee, basti1012 ?

  • Du möchtest doch das zumindest ein Stern (Radio Button) angeklickt werden muss, bevor man Submit klickt?
    Ehrlich gesagt muss ich das erst auch testen.
    Alle Buttons require geben kann Theoretisch ja nicht klappen.
    Nur einen ja auch nicht,oder halt wie du es gemacht den ersten require geben das ergebe dann sinn.
    Da du ja Bootstrap nutzt muss ich da auch mal googeln.
    Habe mit Bootstrap so nix zu tun und kenne mich damit kaum aus.
    Bootstrap hat ja viel eigenen Kram,deswegen könnte es sein dass sie das anders machen.
    Melde mich später.

  • Alle Buttons require geben kann Theoretisch ja nicht klappen.
    Nur einen ja auch nicht,oder halt wie du es gemacht den ersten require geben das ergebe dann sinn.

    require für einen radio-Button oder für alle, das ist egal: https://stackoverflow.com/a/8287947 (in den Kommentaren zu der Antwort ist auch ein Link zur Quelle).


    PS: bei Sternen ist es üblich dass mehr Sterne besser sind, nicht notenmäßig je weniger desto besser.

  • require für einen radio-Button oder für alle, das ist egal:

    Gut zu wissen, danke,

    Das <form> Element muß aber trotzdem als parent vorhanden sein ,oder geht das auch ohne ?

    Vieleicht hat Bootstrap da eine andere ( eigene ) Syntax ,nur das ist nicht mein Wissen ?

    PS: bei Sternen ist es üblich dass mehr Sterne besser sind, nicht notenmäßig je weniger desto besser.

    So hatte ich es im Beitrag #4 auch gemeint, mehr Sterne gleich bessere Bewertung.

  • Das <form> Element muß aber trotzdem als parent vorhanden sein ,oder geht das auch ohne ?

    Vieleicht hat Bootstrap da eine andere ( eigene ) Syntax ,nur das ist nicht mein Wissen ?

    Ich kenne Bootstrap jetzt zwar nicht wirklich, aber selbst wenn das Formular über irgendwelche JS-Pfuschereien ersetzt würde, müsste als Fallback immernoch ein Formular (also <form>) vorhanden sein - Bootstrap ist letztendlich nur ein CSS-Framework und kann nicht zaubern.

  • Moin,


    es ist richtig, dass mehr Sterne = bessere Bewertung. Ich hatte aber das Bewertungssystem vor ein paar Jahres erstellt, allerdings nur für Desktop, jetzt halt auch mobil. Damals hatte ich mit Dropdown/Select und Schulnoten 1-6 gearbeitet. Diese Werte werden in einer Datenbank gespeichert, auf die dann weitere Auswertungen laufen.


    Ich wollte nicht alles umstellen, daher habe ich es so gelöst, dass 6 Sterne eine Schulnote 1 ist und so weiter...


    Aber das Problem mit dem required ist noch nicht gelöst oder? Ich probiere heute wieder weitere, halte euch auf dem Laufenden.


    Wäre cool, wenn wir das auch noch lösen würden :-)

  • Ließ dir mal den Link von tk1234 durch.
    Da wird beschrieben, wie es geht.
    Wenn du es nicht hinbekommen solltest, dann erstelle mal einen aktuellen kompletten Code bei Codepen ( mit HTML und CSS).
    Ganzer Code kann ab und zu wichtig sein, weil wenn das da oben dein aktueller Code ist fehlt schon mal dein <form> Element damit das klappt.

  • den link von tk1234 habe ich überlesen.... es lag an folgendem (im link von stackoverflow) schrieb jemand:

    Zitat

    If your radio buttons have been customised, for example the original icon for the radio button has been hidden via css display:none so that you can create your own radio button then you will might be getting the error.

    The way to fix it is to replace display:none with opacity:0

    Und, ich habe ja im CSS stehen:

    Code
    1. .rating:not(:checked) > input {
    2. position:absolute;
    3. display:none;
    4. clip:rect(0,0,0,0);
    5. }

    Ich habe das in:

    Code
    1. .rating:not(:checked) > input {
    2. position:absolute;
    3. opacity:0;
    4. /*display:none;*/
    5. clip:rect(0,0,0,0);
    6. }

    geändert, jetzt erscheint die Meldung, das ich einen Wert auswählen soll :-)


    Kurze Nachfrage noch: Kann ich die Meldung personalisieren und kann ich für verschiedenste required Felder unterschiedliche Meldungen bringen?


    Bsp.:

    Geschlecht required: Meldung: Bitte wählen Sie ein Geschlecht

    Alter required: Bitte geben Sie ihr Alter an

  • danke, damit hat es geklappt, habe aber nicht javascript genommen, sondern die html5 variante... auch ging nicht die Fehlermeldung zu nullen mit oninput sonder ich musste onvalid nehmen... hier der code:


    Vielen Dank für Eure Hilfe, habe sehr viel gelernt.

    Ließ dir mal den Link von tk1234 durch.
    Da wird beschrieben, wie es geht.
    Wenn du es nicht hinbekommen solltest, dann erstelle mal einen aktuellen kompletten Code bei Codepen ( mit HTML und CSS).
    Ganzer Code kann ab und zu wichtig sein, weil wenn das da oben dein aktueller Code ist fehlt schon mal dein <form> Element damit das klappt.

    das <form> Element ist ganz oben im code, ist dabei ;-)


    PHP
    1. <body class="pt-md-5">
    2. <div class="container">
    3. <form class="form" method="post" action="<?php echo htmlspecialchars($_SERVER['PHP_SELF']);?>">
    4. <header class="py-md-5">

    Also nochmal, vielen Dank an Euch... bis Bald :-D