Sterne rating falsch herum

NoRefer

Ich habe einige radiobutton die zur Bewertung gedacht sind, das funktioniert auch prima. Da die button nicht sonderlich schön sind, habe ich sie durch sterne ersetzt.
Dazu diese CSS

HTML

.rating {
     unicode-bidi: bidi-override;
     text-align: center;
 }
.rating > span {
    font-size: 2em;
    display: inline-block;
    position: relative;
    width: 1.1em;
}
.rating > *:hover,
.rating > *:hover ~ span,
.rating:not(:hover) > input:checked ~ span {
    color: transparent;
}
.rating > *:hover:before,
.rating > *:hover ~ span:before,
.rating:not(:hover) > input:checked ~ span:before {
    content: "\2605";
    position: absolute;
    left: 0;
    color: gold;
}


.rating > input {
    direction: ltr;
    margin-right:-2.5em;
    margin-left:0;
    top:3px;
    width:2em;
    height:2em;
    position:relative;
    z-index:2;
    opacity:1;
}

Alles anzeigen

Das Problem ist, dass die Sterne von Rechts nach Links einblenden:

Kann mir jemand von euch sagen, wie ich es schaffe, dass sie von Links nach Rechts eingeblendet werden?

Arne Drews

Postest Du bitte auch das HTML dazu?

NoRefer

Zitat von Arne Drews

Postest Du bitte auch das HTML dazu?

Na klar:

HTML

<div id="form_wrapper">
        <form name="techform" action=/tech/3 method="post">


            <input type="hidden" name="_token" value="hFFRHqcH9VV2b8I49tOODlsappyakYAXe4BmRcWz">


            <div class="form_row">
                <div class="form_links">
                    <table>
                        <div>
                                                            <tr>
                                    <td>
                                        <label for="$crit">Price:</label>
                                    </td>
                                    <td class="rating">

                                            <input type="hidden" name="criteria_id_1" value="1">
                                            <input class="ltr" type="radio" name="score_1" value="1">
                                            <span>☆</span>
                                            <label class=star-1 for="star-1"></label>


                                        
                                            <input type="hidden" name="criteria_id_1" value="1">
                                            <input class="ltr" type="radio" name="score_1" value="2">
                                            <span>☆</span>
                                            <label class=star-2 for="star-2"></label>


                                        
                                            <input type="hidden" name="criteria_id_1" value="1">
                                            <input class="ltr" type="radio" name="score_1" value="3">
                                            <span>☆</span>
                                            <label class=star-3 for="star-3"></label>


                                        
                                            <input type="hidden" name="criteria_id_1" value="1">
                                            <input class="ltr" type="radio" name="score_1" value="4">
                                            <span>☆</span>
                                            <label class=star-4 for="star-4"></label>


                                        
                                            <input type="hidden" name="criteria_id_1" value="1">
                                            <input class="ltr" type="radio" name="score_1" value="5">
                                            <span>☆</span>
                                            <label class=star-5 for="star-5"></label>


                                                                            </td>
                                </tr>
                                                            <tr>
                                    <td>
                                        <label for="$crit">Scalability:</label>
                                    </td>
                                    <td class="rating">

                                            <input type="hidden" name="criteria_id_2" value="2">
                                            <input class="ltr" type="radio" name="score_2" value="1">
                                            <span>☆</span>
                                            <label class=star-1 for="star-1"></label>


                                        
                                            <input type="hidden" name="criteria_id_2" value="2">
                                            <input class="ltr" type="radio" name="score_2" value="2">
                                            <span>☆</span>
                                            <label class=star-2 for="star-2"></label>


                                        
                                            <input type="hidden" name="criteria_id_2" value="2">
                                            <input class="ltr" type="radio" name="score_2" value="3">
                                            <span>☆</span>
                                            <label class=star-3 for="star-3"></label>


                                        
                                            <input type="hidden" name="criteria_id_2" value="2">
                                            <input class="ltr" type="radio" name="score_2" value="4">
                                            <span>☆</span>
                                            <label class=star-4 for="star-4"></label>


                                        
                                            <input type="hidden" name="criteria_id_2" value="2">
                                            <input class="ltr" type="radio" name="score_2" value="5">
                                            <span>☆</span>
                                            <label class=star-5 for="star-5"></label>


                                                                            </td>
                                </tr>
                                                            <tr>
                                    <td>
                                        <label for="$crit">Performance:</label>
                                    </td>
                                    <td class="rating">

                                            <input type="hidden" name="criteria_id_3" value="3">
                                            <input class="ltr" type="radio" name="score_3" value="1">
                                            <span>☆</span>
                                            <label class=star-1 for="star-1"></label>


                                        
                                            <input type="hidden" name="criteria_id_3" value="3">
                                            <input class="ltr" type="radio" name="score_3" value="2">
                                            <span>☆</span>
                                            <label class=star-2 for="star-2"></label>


                                        
                                            <input type="hidden" name="criteria_id_3" value="3">
                                            <input class="ltr" type="radio" name="score_3" value="3">
                                            <span>☆</span>
                                            <label class=star-3 for="star-3"></label>


                                        
                                            <input type="hidden" name="criteria_id_3" value="3">
                                            <input class="ltr" type="radio" name="score_3" value="4">
                                            <span>☆</span>
                                            <label class=star-4 for="star-4"></label>


                                        
                                            <input type="hidden" name="criteria_id_3" value="3">
                                            <input class="ltr" type="radio" name="score_3" value="5">
                                            <span>☆</span>
                                            <label class=star-5 for="star-5"></label>


                                                                            </td>
                                </tr>
                                                            <tr>
                                    <td>
                                        <label for="$crit">Usability:</label>
                                    </td>
                                    <td class="rating">

                                            <input type="hidden" name="criteria_id_4" value="4">
                                            <input class="ltr" type="radio" name="score_4" value="1">
                                            <span>☆</span>
                                            <label class=star-1 for="star-1"></label>


                                        
                                            <input type="hidden" name="criteria_id_4" value="4">
                                            <input class="ltr" type="radio" name="score_4" value="2">
                                            <span>☆</span>
                                            <label class=star-2 for="star-2"></label>


                                        
                                            <input type="hidden" name="criteria_id_4" value="4">
                                            <input class="ltr" type="radio" name="score_4" value="3">
                                            <span>☆</span>
                                            <label class=star-3 for="star-3"></label>


                                        
                                            <input type="hidden" name="criteria_id_4" value="4">
                                            <input class="ltr" type="radio" name="score_4" value="4">
                                            <span>☆</span>
                                            <label class=star-4 for="star-4"></label>


                                        
                                            <input type="hidden" name="criteria_id_4" value="4">
                                            <input class="ltr" type="radio" name="score_4" value="5">
                                            <span>☆</span>
                                            <label class=star-5 for="star-5"></label>


                                                                            </td>
                                </tr>

                                                    </div>
                        <tr></tr>


                        <tr>
                            <td>
                                Level:
                                <select name="level">
                                    <option selected='selected' value="1">Strategic</option>
                                    <option  value="2">Tactical</option>
                                    <option  value="3">Operative</option>
                                </select>
                            </td>
                        </tr>


                        <tr>
                            <td>
                                <input type="submit" name="action" value="Next">
                            </td>
                        </tr>


                    </table>


                    
                </div>
            </div>
        </form>
    </div>

Alles anzeigen

Arne Drews

Für mich sieht Dein HTML auf den ersten Blick schon mal invalide aus.

HTML

<label class=star-1 for="star-1"></label>

dürfte zwar nicht zu einem Fehler führen, aber zumindest dafür sorgen, dass die Interpretation Browser abhängig ist.

Zudem - aber das müsste ich selber nochmal nachlesen - kannst Du meines Wissen nach nicht für mehrere Elemente denselben Namen verwenden. Oder zumindest macht das keinen Sinn.

djheke

Habe mal versucht Dein Formular zu vereinfachen.

HTML

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Salon Lifestyle by Sonja Nergiz</title>
<style>
#form_wrapper fieldset {
 border:none;
 padding:0;
}
#form_wrapper legend {
 margin-top:11px;
 width:100px;
 float:left;
}


#form_wrapper fieldset label:before {
 content:"\2606" ;
 color:#000;
 font-size:2rem;
}


#form_wrapper fieldset input:checked + label:before {
 content:"\2605" ;
 color:#000;
}


#form_wrapper fieldset input {
 display:none;
}


#form_wrapper select {
 display:block;
}


</style>
</head>
<body>
<div id="form_wrapper">
<form name="techform" action=/tech/3 method="post">


<input type="hidden" name="_token" value="hFFRHqcH9VV2b8I49tOODlsappyakYAXe4BmRcWz">


<fieldset>
 <legend>Price:</legend>
  <input type="hidden" name="price_1">
  <input type="checkbox" name="price_star_1" id="price_star_1">
  <label for="price_star_1"></label>


  <input type="hidden" name="price_2">
  <input type="checkbox" name="price_star_2" id="price_star_2">
  <label for="price_star_2"></label>


  <input type="hidden" name="price_3"">
  <input type="checkbox" name="price_star_3" id="price_star_3">
  <label for="price_star_3"></label>


  <input type="hidden" name="price_4">
  <input type="checkbox" name="price_star_4" id="price_star_4"">
  <label for="price_star_4"></label>


  <input type="hidden" name="price_4">
  <input type="checkbox" name="price_star_5" id="price_star_5">
  <label for="price_star_5"></label>
</fieldset>   

<fieldset>
 <legend>Scalability:</legend>
  <input type="hidden" name="scalability_1">
  <input type="checkbox" name="scalability_star_1" id="scalability_star_1">
  <label for="scalability_star_1"></label>

  <input type="hidden" name="scalability_2">
  <input type="checkbox" name="scalability_star_2" id="scalability_star_2">
  <label for="scalability_star_2"></label>

  <input type="hidden" name="scalability_3">
  <input type="checkbox" name="scalability_star_3" id="scalability_star_3">
  <label for="scalability_star_3" ></label>

  <input type="hidden" name="scalability_4">
  <input type="checkbox" name="scalability_star_4" id="scalability_star_4">
  <label for="scalability_star_4"></label>

  <input type="hidden" name="scalability_5">
  <input type="checkbox" name="scalability_star_5" id="scalability_star_5"">
  <label for="scalability_star_5"></label>
</fieldset>


<fieldset>
 <legend>Performance:</legend>
  <input type="hidden" name="performance_1">
  <input type="checkbox" name="performance_star_1" id="performance_star_1">
  <label for="performance_star_1"></label>

  <input type="hidden" name="performance_2">
  <input type="checkbox" name="performance_star_2" id="performance_star_2">
  <label for="performance_star_2"></label>

  <input type="hidden" name="performance_3">
  <input type="checkbox" name="performance_star_3" id="performance_star_3">
  <label for="performance_star_3"></label>

  <input type="hidden" name="performance_4">
  <input type="checkbox" name="performance_star_4" id="performance_star_4">
  <label for="performance_star_4"></label>

  <input type="hidden" name="performance_4"">
  <input type="checkbox" name="performance_star_5" id="performance_star_5"">
  <label for="performance_star_5"></label>
</fieldset>


<fieldset>
<legend>Usability:</legend>
  <input type="hidden" name="usability_1">
  <input type="checkbox" name="usability_star_1" id="usability_star_1">
  <label for="usability_star_1"></label>

  <input type="hidden" name="usability_2">
  <input type="checkbox" name="usability_star_2" id="usability_star_2"">
  <label for="usability_star_2"></label>

  <input type="hidden" name="usability_3">
  <input type="checkbox" name="usability_star_3" id="usability_star_3">
  <label for="usability_star_3"></label>

  <input type="hidden" name="usability_4">
  <input type="checkbox" name="usability_star_4" id="usability_star_4"">
  <label for="usability_star_4"></label>

  <input type="hidden" name="usability_5">
  <input type="checkbox" name="usability_star_5" id="usability_star_5">
  <label for="usability_star_5"></label>
</fieldset>


  <select name="level">
   <option selected='selected' value="1">Strategic</option>
   <option  value="2">Tactical</option>
   <option  value="3">Operative</option>
  </select>

  <input type="submit" name="action" value="Next">


                      
 </form>
</div>
</body>
</html>

Alles anzeigen

Und zu Deinem Problem. Du hast direction:rtl vergessen zu notieren.

Code

.rating {
     unicode-bidi: bidi-override;
     direction:rtl; /* Diese Angabe fehl bei Dir ! */
     text-align: center;
 }

Arne Drews

Er will ja aber glaube ich ltr, wenn ich #1 richtig lese? Und da ltr default ist, benötigt er die Angabe nicht.

NoRefer

Zitat von djheke

Und zu Deinem Problem. Du hast direction:rtl vergessen zu notieren.

Vielen Dank schonmal dafür, das Problem daran ist allerdings, dass er mir die Sortierung der Werte damit zerstört. Optisch 5 Sterne würden der value=1 entsprechen, während 1 Stern der value=5 entsprechen würde.

djheke

Hier habe ich mal das Formular weiter gekürzt. Kannst ja mal probieren, ob es in puncto CSS funktioniert.

HTML

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Rating</title>
<style>




#form_wrapper fieldset label {
  unicode-bidi: bidi-override;
  direction: rtl;
}


#form_wrapper fieldset {
 border:none;
 padding:0;
}
#form_wrapper legend {
 margin-top:11px;
 width:100px;
 float:left;
}


#form_wrapper fieldset label:before {
 content:"\2606" ;
 color:red;
 font-size:2rem;
}


#form_wrapper fieldset input:checked ~ label:before {
 content:"\2605" ;
 color:red;
}


#form_wrapper fieldset input {
 display:none;
}


#form_wrapper select {
 display:block;
}


</style>
</head>
<body>


<form id="form_wrapper" name="" action="" method="post">


<fieldset>
 <legend>Price:</legend>
  <input type="radio" name="price" id="price_star_1"><label for="price_star_1"></label>
  <input type="radio" name="price" id="price_star_2"><label for="price_star_2"></label>
  <input type="radio" name="price" id="price_star_3"><label for="price_star_3"></label>
  <input type="radio" name="price" id="price_star_4"><label for="price_star_4"></label>
  <input type="radio" name="price" id="price_star_5"><label for="price_star_5"></label>
</fieldset>   

<fieldset>
 <legend>Scalability:</legend>
  <input type="radio" name="scalability" id="scalability_star_1"><label for="scalability_star_1"></label>
  <input type="radio" name="scalability" id="scalability_star_2"><label for="scalability_star_2"></label>
  <input type="radio" name="scalability" id="scalability_star_3"><label for="scalability_star_3"></label>
  <input type="radio" name="scalability" id="scalability_star_4"><label for="scalability_star_4"></label>
  <input type="radio" name="scalability" id="scalability_star_5"><label for="scalability_star_5"></label>
</fieldset>


<fieldset>
 <legend>Performance:</legend>
  <input type="radio" name="performance" id="performance_star_1"><label for="performance_star_1"></label>
  <input type="radio" name="performance" id="performance_star_2"><label for="performance_star_2"></label>
  <input type="radio" name="performance" id="performance_star_3"><label for="performance_star_3"></label>
  <input type="radio" name="performance" id="performance_star_4"><label for="performance_star_4"></label>
  <input type="radio" name="performance" id="performance_star_5"><label for="performance_star_5"></label>
</fieldset>


<fieldset>
<legend>Usability:</legend>
  <input type="radio" name="usability" id="usability_star_1"><label for="usability_star_1"></label>
  <input type="radio" name="usability" id="usability_star_2"><label for="usability_star_2"></label>
  <input type="radio" name="usability" id="usability_star_3"><label for="usability_star_3"></label>
  <input type="radio" name="usability" id="usability_star_4"><label for="usability_star_4"></label>
  <input type="radio" name="usability" id="usability_star_5"><label for="usability_star_5"></label>
</fieldset>

</form>
</body>
</html>

Alles anzeigen

Und, reicht es nich aus die Radio-Buttons auszuwerten?

NoRefer

Das Problem ist immer noch das direction: rtl

Ich habe dein Beispiel mal mit values versehen die ich brauche:

HTML

<fieldset>
 <legend>Price:</legend>
  <input type="radio" name="price" id="price_star_1" value="1"><label for="price_star_1"></label>
  <input type="radio" name="price" id="price_star_2" value="2"><label for="price_star_2"></label>
  <input type="radio" name="price" id="price_star_3" value="3"><label for="price_star_3"></label>
  <input type="radio" name="price" id="price_star_4" value="4"><label for="price_star_4"></label>
  <input type="radio" name="price" id="price_star_5" value="5"><label for="price_star_5"></label>
</fieldset>

Wenn ich jetzt bei Price 5 Sterne absende (GET) bekomme das:

Code

?price=1

Die Frage ist also, wie bekomme ich es hin die Sterne direction zu verändern, ohne die radiobutton direction zu ändern.

djheke

Das sollte klappen

HTML

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Rating</title>
<style>




#form_wrapper fieldset label {
  unicode-bidi: bidi-override;
  direction: ltr;
}


#form_wrapper fieldset {
 border:none;
 padding:0;
}
#form_wrapper legend {
 margin-top:11px;
 width:100px;
 float:left;
}


#form_wrapper fieldset label:before {
 content:"\2605" ;
 color:black;
 font-size:2rem;
}


#form_wrapper fieldset input:checked ~ label:before {
 content:"\2606" ;
 color:black;
}


#form_wrapper fieldset input {
 display:none;
}


#form_wrapper select {
 display:block;
}


</style>
</head>
<body>


<form id="form_wrapper" name="" action="" method="post">


<fieldset>
 <legend>Price:</legend>
  <label for="price_star_1">1</label><input type="radio" name="price" id="price_star_1">
  <label for="price_star_2">2</label><input type="radio" name="price" id="price_star_2">
  <label for="price_star_3">3</label><input type="radio" name="price" id="price_star_3">
  <label for="price_star_4">4</label><input type="radio" name="price" id="price_star_4">
  <label for="price_star_5">5</label><input type="radio" name="price" id="price_star_5">
</fieldset>   

<fieldset>
 <legend>Scalability:</legend>
  <label for="scalability_star_1">1</label><input type="radio" name="scalability" id="scalability_star_1">
  <label for="scalability_star_2">2</label><input type="radio" name="scalability" id="scalability_star_2">
  <label for="scalability_star_3">3</label><input type="radio" name="scalability" id="scalability_star_3">
  <label for="scalability_star_4">4</label><input type="radio" name="scalability" id="scalability_star_4">
  <label for="scalability_star_5">5</label><input type="radio" name="scalability" id="scalability_star_5">
</fieldset>


<fieldset>
 <legend>Performance:</legend>
  <label for="performance_star_1">1</label><input type="radio" name="performance" id="performance_star_1">
  <label for="performance_star_2">2</label><input type="radio" name="performance" id="performance_star_2">
  <label for="performance_star_3">3</label><input type="radio" name="performance" id="performance_star_3">
  <label for="performance_star_4">4</label><input type="radio" name="performance" id="performance_star_4">
  <label for="performance_star_5">5</label><input type="radio" name="performance" id="performance_star_5">
</fieldset>


<fieldset>
<legend>Usability:</legend>
  <label for="usability_star_1">1</label><input type="radio" name="usability" id="usability_star_1">
  <label for="usability_star_2">2</label><input type="radio" name="usability" id="usability_star_2">
  <label for="usability_star_3">3</label><input type="radio" name="usability" id="usability_star_3">
  <label for="usability_star_4">4</label><input type="radio" name="usability" id="usability_star_4">
  <label for="usability_star_5">5</label><input type="radio" name="usability" id="usability_star_5">
</fieldset>

</form>
</body>
</html>

Alles anzeigen

Valuewerte im Label zur Orientiereung eingetragen und keine Hover-Funktionalität.

NoRefer

Zitat von djheke
Das sollte klappen
Code
...
Valuewerte im Label zur Orientiereung eingetragen und keine Hover-Funktionalität.

Ja so geht es tatsächlich, damit kann ich auf jeden Fall schonmal arbeiten, vielen vielen Dank!
Das Hauptproblem wäre damit beseitigt, jedoch sind jetzt standardmäßig alle Sterne (optisch) gesetzt, bis das ein Stern geklickt wird. Dafür finde ich gerade keine Lösung per CSS (per PHP würde ich nur ungerne am Design arbeiten).

Hier mal das derzeitige Beispiel:

HTML

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Rating</title>
<style>




#form_wrapper fieldset label {
  unicode-bidi: bidi-override;
  direction: ltr;
}


#form_wrapper fieldset {
 border:none;
 padding:0;
}
#form_wrapper legend {
 margin-top:11px;
 width:100px;
 float:left;
}


#form_wrapper fieldset label:before {
 content:"\2605" ;
 color:gold;
 font-size:2rem;
}


#form_wrapper fieldset input:checked ~ label:before {
 content:"\2606" ;
 color:black;
}


#form_wrapper fieldset input {
 display:none;
}


#form_wrapper select {
 display:block;
}


</style>
</head>
<body>


<form id="form_wrapper" name="" action="" method="get">


<fieldset>
 <legend>Price:</legend>
  <label for="price_star_1"></label><input type="radio" name="price" id="price_star_1" value="1">
  <label for="price_star_2"></label><input type="radio" name="price" id="price_star_2" value="2">
  <label for="price_star_3"></label><input type="radio" name="price" id="price_star_3" value="3">
  <label for="price_star_4"></label><input type="radio" name="price" id="price_star_4" value="4">
  <label for="price_star_5"></label><input type="radio" name="price" id="price_star_5" value="5">
</fieldset>   

<fieldset>
 <legend>Scalability:</legend>
  <label for="scalability_star_1"></label><input type="radio" name="scalability" id="scalability_star_1" value="1">
  <label for="scalability_star_2"></label><input type="radio" name="scalability" id="scalability_star_2" value="2">
  <label for="scalability_star_3"></label><input type="radio" name="scalability" id="scalability_star_3" value="3">
  <label for="scalability_star_4"></label><input type="radio" name="scalability" id="scalability_star_4" value="4">
  <label for="scalability_star_5"></label><input type="radio" name="scalability" id="scalability_star_5" value="5">
</fieldset>


<input type="submit" name="action" value="Get">                    
</form>
</body>
</html>

Alles anzeigen

djheke

Upps! Hatte ich garnicht bemerkt, dass es so auch nicht funktioniert. Mir fällt jetzt nur noch ein die Reihenfolge im Marup zu ändern.

HTML

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Rating</title>
<style>




#form_wrapper fieldset label {
  unicode-bidi: bidi-override;
  direction: rtl;
}


#form_wrapper fieldset {
 border:none;
 padding:0;
}
#form_wrapper legend {
 margin-top:11px;
 width:100px;
 float:left;
}


#form_wrapper fieldset label:before {
 content:"\2606" ;
 color:gray;
 font-size:2rem;
}


#form_wrapper fieldset input:checked ~ label:before {
 content:"\2605" ;
 color:black;
}


#form_wrapper fieldset input , #form_wrapper b {
 position: absolute;
 clip: rect(1px, 1px, 1px, 1px);
}




 


</style>
</head>
<body>


<form id="form_wrapper" name="" action="" method="post">


<fieldset>
 <legend>Price:</legend>
 
  <input type="radio" name="price" id="price_star_5"><label for="price_star_5"><b>5 Sterne</b></label>
  <input type="radio" name="price" id="price_star_4"><label for="price_star_4"><b>4 Sterne</b></label>
  <input type="radio" name="price" id="price_star_3"><label for="price_star_3"><b>3 Sterne</b></label>
  <input type="radio" name="price" id="price_star_2"><label for="price_star_2"><b>2 Sterne</b></label>
  <input type="radio" name="price" id="price_star_1"><label for="price_star_1"><b>1 Stern</b></label>
</fieldset>   

<fieldset>
 <legend>Scalability:</legend>
  <input type="radio" name="scalability" id="scalability_star_5"><label for="scalability_star_5"><b>5 Sterne</b></label>
  <input type="radio" name="scalability" id="scalability_star_4"><label for="scalability_star_4"><b>4 Sterne</b></label>
  <input type="radio" name="scalability" id="scalability_star_3"><label for="scalability_star_3"><b>3 Sterne</b></label>
  <input type="radio" name="scalability" id="scalability_star_2"><label for="scalability_star_2"><b>2 Sterne</b></label>
  <input type="radio" name="scalability" id="scalability_star_1"><label for="scalability_star_1"><b>1 Stern</b></label>
</fieldset>
      <button type="reset">Eingaben zurücksetzen</button>
</form>
</body>
</html>

Alles anzeigen

NoRefer

Ich habe eine Lösung gefunden, dank euch! Ich habe noch ein hidden input inzugefügt der bei default checked ist:

HTML

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Rating</title>
<style>




#form_wrapper fieldset label {
  unicode-bidi: bidi-override;
  direction: ltr;
}


#form_wrapper fieldset {
 border:none;
 padding:0;
}
#form_wrapper legend {
 margin-top:11px;
 width:100px;
 float:left;
}


#form_wrapper fieldset label:before {
 content:"\2605" ;
 color:gold;
 font-size:2rem;
}


#form_wrapper fieldset input:checked ~ label:before {
 content:"\2606" ;
 color:black;
}


#form_wrapper fieldset input {
 display:none;
}


#form_wrapper select {
 display:block;
}


.hideMe {
 display:none;
}


</style>
</head>
<body>


<form id="form_wrapper" name="" action="" method="get">


<fieldset>
 <legend>Price:</legend>
  <label for="price_star_0" class="hideMe"></label><input  type="radio" name="price" id="price_star_0" checked>
  <label for="price_star_1"></label><input type="radio" name="price" id="price_star_1" value="1">
  <label for="price_star_2"></label><input type="radio" name="price" id="price_star_2" value="2">
  <label for="price_star_3"></label><input type="radio" name="price" id="price_star_3" value="3">
  <label for="price_star_4"></label><input type="radio" name="price" id="price_star_4" value="4">
  <label for="price_star_5"></label><input type="radio" name="price" id="price_star_5" value="5">
</fieldset>   

<fieldset>
 <legend>Scalability:</legend>
  <label for="scalability_star_0" class="hideMe"></label><input  type="radio" name="scalability" id="scalability_star_0" checked>
  <label for="scalability_star_1"></label><input type="radio" name="scalability" id="scalability_star_1" value="1">
  <label for="scalability_star_2"></label><input type="radio" name="scalability" id="scalability_star_2" value="2">
  <label for="scalability_star_3"></label><input type="radio" name="scalability" id="scalability_star_3" value="3">
  <label for="scalability_star_4"></label><input type="radio" name="scalability" id="scalability_star_4" value="4">
  <label for="scalability_star_5"></label><input type="radio" name="scalability" id="scalability_star_5" value="5">
</fieldset>


<input type="submit" name="action" value="Get">                    
</form>
</body>
</html>

Alles anzeigen

Übertragen in PHP sieht das Ganze vor dem Aufräumen des Codes derzeit so aus:

PHP

<div id="form_wrapper">
    <form name="techform" action={{ '/tech/'.$id }} method="post">


        {{csrf_field()}}


        <div class="form_row">
            <div class="form_links">
                <table>
                        @foreach($criteria as $crit)
                            <tr>
                                <td>
                                    <label for="$crit">{{ $crit->criteria }}:</label>
                                </td>
                                <td>
                                    <fieldset>
                                        <label for="{{ $crit->criteria."_0" }}" class="hideMe"></label>
                                        <input type="radio" name="{{ "score_".$crit->criteria_id }}" id="{{ $crit->criteria."_0" }}" value="0"
                                                @if(count($qscore) == 0 || $qscore[0]->criteria_id != $crit->criteria_id)
                                                    checked
                                                @endif
                                        >
                                    @for($i = 1; $i <= 5; $i++)


                                        <input type="hidden" name="{{ "criteria_id_".$crit->criteria_id }}" value="{{ $crit->criteria_id }}">
                                        <label for="{{ $crit->criteria."_".$i }}"></label>
                                        <input type="radio" name="{{ "score_".$crit->criteria_id }}" id="{{ $crit->criteria."_".$i }}" value="{{ $i }}"


                                        @foreach($qscore as $score)
                                            @if(isset($score->criteria_id) &&($score->criteria_id == $crit->criteria_id) && ($score->score == $i))
                                                checked
                                            @endif
                                        @endforeach
                                        >
                                    @endfor
                                    </fieldset>
                                </td>
                            </tr>
                        @endforeach
                    <tr></tr>


                    <tr>
                        <td>
                            Level:
                            <select name="level">
                                <option  value="1" @if($tech->level_id == 1) selected @endif >Strategic</option>


                                <option  value="2" @if($tech->level_id == 2) selected @endif >Tactical</option>


                                <option  value="3" @if($tech->level_id == 3) selected @endif >Operative</option>


                            </select>
                        </td>
                    </tr>


                    <tr>
                        <td>
                            <input type="submit" name="action" value="Save">
                        </td>
                    </tr>


                </table>


                @include ('layouts.errors')


            </div>
        </div>
    </form>
</div>

Alles anzeigen

Nochmal vielen Dank djheke und Arne Drews für eure Hilfe

Tags