HTML：将星级评分提交到我的 SQL 数据库

Question

我目前有一个工作评论表，用户可以写一篇关于酒店的评论。到目前为止，它需要一个标题和正文，但我现在希望实施星级评级，以便用户选择一个评级并将其提交到我的数据库。我目前有用户可以提交标题和正文的代码，但是星级不会提交，也不会提交到我的数据库。谁能建议？

ReviewController.php

    public function store(Request $request)

{

    $this->validate($request, [

        'title' => 'required' ,

        'body' => 'required' ,

        'post_id' => 'required'

    ]);

    $review = new Review;

    $review->title = $request->input('title');

    $review->body = $request->input('body');

    $review->rating = $request->input('rating');

    $review->post_id = $request['post_id'];

    $review->save();

    return redirect('/posts')->with('success', 'post created');

}

显示.blade.php

    <h1>Reviews</h1>

@if(count($review) > 1)

    @foreach($review as $reviews)

        <div class= "well"> 

            <h3><a href="/reviews/{{$reviews->title}}">{{$reviews->title}} </a>{{$reviews->rating}}</h3><small>{{$reviews->created_at}}</small><br>

            <small>{{$reviews->body}}</small> 

           <br>

           <br>

        </div>

        @endforeach

        @else

    </p>no posts found</p>

    @endif     

@endsection  

Java脚本：

var count;

 function starmark(item)

{

  count=item.id[0];

  sessionStorage.starRating = count;

  var subid= item.id.substring(1);

    for(var i=0;i<5;i++)

      {

        if(i<count)

      {

    document.getElementById((i+1)+subid).style.color="orange";

      }

        else

      {

    document.getElementById((i+1)+subid).style.color="black";

    }

        }

            }

当我将其提交到我的数据库时，这些值显示为 NULL，但我希望它们的值介于 1-5 之间。

Answer 1

虽然<input>元素可以在表单中发送数据，但<span>元素不能。现在您正在使用 JavaScript 中的一个函数来模拟这种行为，方法是尝试从悬停或单击的范围中获取值。sessionStorage.starRating = count应该是将sessionStorage.setItem('starRating', count)值存储到会话存储中。但这不是罪魁祸首。不使用<span>元素，而是使用<input type="radio">元素来表示用户给出的评分。虽然样式看起来很难，但通过使用<label>元素作为样式点可以相当容易。当您将<label>带有属性的 连接到它所属for的元素的 id 时，它就变成可点击的了。<input>这意味着每当我单击标签时，输入也会被单击并因此被选中。因此，您隐藏输入并设置标签样式。在 CSS 中，您可以根据当前选择的输入说明点击标签的外观。:checked伪选择器在这里是真正的救星。将所有这些放在您的表单中，可以将当前选定的单选按钮发送到服务器，name并且value无需执行任何 JavaScript。查看下面的代码片段以查看它是否有效。JavaScript 部分可以忽略，因为它只是一个演示。/**&nbsp;* For demonstration purposes.&nbsp;* Logs the currently submitted 'rating' value.&nbsp;*/const form = document.querySelector('form');form.addEventListener('submit', event => {&nbsp; const formData = new FormData(event.target);&nbsp; const rating = formData.get('rating');&nbsp; console.log(rating);&nbsp; event.preventDefault();});.star-input {&nbsp; display: none;}.star {&nbsp; color: gold;}.star-input:checked + .star ~ .star {&nbsp; color: white;}<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css"><form>&nbsp; <input type="radio" class="star-input" name="rating" id="star-1" value="1">&nbsp; <label for="star-1" class="star"><i class="fas fa-star"></i></label>&nbsp; <input type="radio" class="star-input" name="rating" id="star-2" value="2">&nbsp; <label for="star-2" class="star"><i class="fas fa-star"></i></label>&nbsp; <input type="radio" class="star-input" name="rating" id="star-3" value="3">&nbsp; <label for="star-3" class="star"><i class="fas fa-star"></i></label>&nbsp; <input type="radio" class="star-input" name="rating" id="star-4" value="4">&nbsp; <label for="star-4" class="star"><i class="fas fa-star"></i></label>&nbsp; <input type="radio" class="star-input" name="rating" id="star-5" value="5" checked>&nbsp; <label for="star-5" class="star"><i class="fas fa-star"></i></label>&nbsp; <button type="submit">Send</button></form>