Beiträge von NoRefer

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

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

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.

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.

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

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?

Beiträge von NoRefer

Sterne rating falsch herum

Sterne rating falsch herum

Sterne rating falsch herum

Sterne rating falsch herum

Sterne rating falsch herum

Sterne rating falsch herum