Nach Klick auf Rdaio Button Sprung nach oben

ny_unity · 7. August 2020

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

Spoiler anzeigen

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

Spoiler anzeigen

Code

<style>
            body {
                background-color: #E4E8F1;
                font-family: 'Exo 2', sans-serif;
            }
            
            .selectfields {
                background-color: #9FA2A9;
                color: #fff;
                font-weight: bold;
                border-color: #fff;
                border-style: solid;
                border-width: 1px;
            }
            
            .selectfields:focus {
                background-color: #9FA2A9;
                color: #fff;
                font-weight: bold;
                border-color: #fff;
                border-style: solid;
                border-width: 1px;
            }
            
            h1{
                 color: #004088; 
                font-weight: bold;
            }
            
            label {
                font-weight: bold;
            }
            
            .buttondremo {
                color: #FFFFFF;
                font-weight: bold;
                border-width: 0px 0px 6px 0px;
                border-color: #013773;
                border-style: solid;
                border-radius: 0px;
                background-color: #1f508a;
                background-image: none;
                cursor: pointer;
            }
            
            .buttondremo:hover {
                color: #FFFFFF;
                font-weight: bold;
                border-width: 0px 0px 6px 0px;
                border-color: #013773;
                border-style: solid;
                border-radius: 0px;
                background-color: #ef7900;
                background-image: none;
                cursor: pointer;
            }
            
            .footerstyle {
                border-style: solid;
                border-width: 2px 0px 0px 0px;
                border-color: #fff;
                font-weight: bold;
            }
            
            .buttonsmall {
                display:flex; 
                justify-content: space-around;
            }
            
            .blockheader {
                background-color: #6E92BB;
                font-weight: bold;
                border-width: 1px;
                border-color: #000;
                border-style: solid;
                border-radius: 0px;
                background-image: none;
                padding: 4px;
                margin-bottom: 10px;
                margin-top: 10px
            }        
            
            .rating {
            float:left;
            }
            /* :not(:checked) is a filter, so that browsers that don't support :checked don't 
              follow these rules. Every browser that supports :checked also supports :not(), so
              it doesn't make the test unnecessarily selective */
            .rating:not(:checked) > input {
            position:absolute;
            top:-9999px;
            clip:rect(0,0,0,0);
            }

            .rating:not(:checked) > label {
            float:right;
            width:1.0em;
            /* padding:0 .1em; */
            overflow:hidden;
            white-space:nowrap;
            cursor:pointer;
            font-size:150%;
            /* line-height:1.2; */
            color:#9FA2A9;
            }

            .rating:not(:checked) > label:before {
            content: '★ ';
            }

            .rating > input:checked ~ label {
            color: #ef7900;
            }

            .rating:not(:checked) > label:hover,
    
            .rating:not(:checked) > label:hover ~ label {
            color: #ef7900;
            }
            
            .rating > input:checked + label:hover,
            
            .rating > input:checked + label:hover ~ label,
    
            .rating > input:checked ~ label:hover,
    
            .rating > input:checked ~ label:hover ~ label,
    
            .rating > label:hover ~ input:checked ~ label {
            color: #ef7900;
            }
            
            .rating > label:active {
            position:relative;
            top:0px;
            left:0px;
            }
    </style>

Alles anzeigen

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 · 7. August 2020

Bei mir geht es wenn du hier

Code

.rating:not(:checked) > input {
                      top:-9999px;    
            position:absolute;
            clip:rect(0,0,0,0);
            }

die Zeile mit den top raus nimmst , oder mit display:none; ersetzt

ny_unity · 7. August 2020

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

basti1012 · 7. August 2020

Ich weiß gerade nicht genau was du meinst.

EDIT:

Mal nee Frage.

sollten 6 Sterne nicht Sehr gut sein

und 1 Stern ungenügend ?

ny_unity · 7. August 2020

Ich meinte, dass die Bewertungssterne nicht bündig mit der Eigenschaft waren:

html-seminar.de/woltlab/attachment/2590/

habe es gelöst mit negativen margin

Code

.rating {

float:left;

margin-top: -5px;

}

html-seminar.de/woltlab/attachment/2589/

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

basti1012 · 7. August 2020

Zitat von ny_unity

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://basti1012.bplaced.net/…rdner=html-seminar&id=430
Bei kleinen Bildschirmen sollte es dann untereinander stehen.

ny_unity · 10. August 2020

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

basti1012 · 10. August 2020

Wenn du was in der DB speichern möchtest, brauchst du erstmal ein PHP Script was deine POST oder GET Daten im Empfang nimmt und dann damit weiter arbeitet.

Da gebe es das Affenformular (kann man so Googeln).

Oder über JS Ajax.
An besten einfach mal versuchen.

https://www.php-kurs.com/formularauswertung-mit-php.htm

Falls es nicht klappt nochmal melden

ny_unity · 11. August 2020

moin,

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

PHP

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

und dann im PHP

Code

if(isset($_POST['absenden']))
        {
        //Ansprechpartner
        if(isset($_POST['asp']) and !empty($_POST['asp']))
            {
            $asp_sql = "'".$_POST['asp']."'";
            }
        else
            {
            $asp_sql = 'NULL';
            }
        }

Alles anzeigen

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

ny_unity · 11. August 2020

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

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

und die radio buttons:

Code

<div class="form-row">
                    <div class="col-12">
                        <div class="form-row">
                            <div class="col-12 col-sm-12 col-md-3">
                            <label for="bd">Bewertung</label>
                            </div>
                            <div class="col-12 col-sm-12 col-md-9 mt-n2 mt-md-0">
                                <div class="rating" style="vertical-align: top;">
                                      <input type="radio" id="star1bd" name="ratingbd" value="1" required/><label for="star1bd" title="Sehr gut!">1</label>
                                    <input type="radio" id="star2bd" name="ratingbd" value="2" /><label for="star2bd" title="Gut!">2</label>
                                    <input type="radio" id="star3bd" name="ratingbd" value="3" /><label for="star3bd" title="Befriedigend">3</label>
                                    <input type="radio" id="star4bd" name="ratingbd" value="4" /><label for="star4bd" title="Ausreichend">4</label>
                                    <input type="radio" id="star5bd" name="ratingbd" value="5" /><label for="star5bd" title="Mangelhaft">5</label>
                                    <input type="radio" id="star6bd" name="ratingbd" value="6" /><label for="star6bd" title="Ungenügend">6</label>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

Alles anzeigen

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 ?

basti1012 · 11. August 2020

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.

tk1234 · 11. August 2020

Zitat von basti1012

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.

basti1012 · 11. August 2020

Zitat von tk1234

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 ?

Zitat von tk1234

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.

tk1234 · 12. August 2020

Zitat von basti1012

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.

ny_unity · 12. August 2020

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

basti1012 · 12. August 2020

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.

ny_unity · 12. August 2020

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

.rating:not(:checked) > input {
            position:absolute;
            display:none;
            clip:rect(0,0,0,0);
            }

Ich habe das in:

Code

.rating:not(:checked) > input {
            position:absolute;
            opacity:0;
            /*display:none;*/
            clip:rect(0,0,0,0);
            }

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

basti1012 · 12. August 2020

Versuche es mal damit

https://stackoverflow.com/ques…custom-validation-message

ny_unity · 12. August 2020

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:

Code

<div class="form-row">
                    <div class="col-12">
                        <div class="form-row">
                            <div class="col-12 col-sm-12 col-md-3">
                            <label for="bd">Bewertung</label>
                            </div>
                            <div class="col-12 col-sm-12 col-md-9 mt-n2 mt-md-0">
                                <div class="rating" style="vertical-align: top;">
                                      <input type="radio" id="star1bd" name="ratingbd" value="1" required="" oninvalid="this.setCustomValidity('Wie bewerten Sie uns?')" onvalid="setCustomValidity('')" /><label for="star1bd" title="Sehr gut!">1</label>
                                    <input type="radio" id="star2bd" name="ratingbd" value="2" required="" oninvalid="this.setCustomValidity('Wie bewerten Sie uns?')" onvalid="setCustomValidity('')" /><label for="star2bd" title="Gut!">2</label>
                                    <input type="radio" id="star3bd" name="ratingbd" value="3" required="" oninvalid="this.setCustomValidity('Wie bewerten Sie uns?')" onvalid="setCustomValidity('')" /><label for="star3bd" title="Befriedigend">3</label>
                                    <input type="radio" id="star4bd" name="ratingbd" value="4" required="" oninvalid="this.setCustomValidity('Wie bewerten Sie uns?')" onvalid="setCustomValidity('')" /><label for="star4bd" title="Ausreichend">4</label>
                                    <input type="radio" id="star5bd" name="ratingbd" value="5" required="" oninvalid="this.setCustomValidity('Wie bewerten Sie uns?')" onvalid="setCustomValidity('')" /><label for="star5bd" title="Mangelhaft">5</label>
                                    <input type="radio" id="star6bd" name="ratingbd" value="6" required="" oninvalid="this.setCustomValidity('Wie bewerten Sie uns?')" onvalid="setCustomValidity('')" /><label for="star6bd" title="Ungenügend">6</label>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

Alles anzeigen

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

Zitat von basti1012

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

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

Also nochmal, vielen Dank an Euch... bis Bald

tk1234 · 12. August 2020

Zitat von ny_unity

PHP

<form class="form" method="post" action="<?php echo htmlspecialchars($_SERVER['PHP_SELF']);?>">

Warum der Aufwand? Lass das action-Attribut doch einfach ganz weg wenn das Formular auf die gleiche URL zeigen soll …

Nach Klick auf Rdaio Button Sprung nach oben

Jetzt mitmachen!

Teilen