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');
}

Show.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  

Javascript：

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> 元素作为样式点可以相当容易。当您将带有for 属性的<label> 连接到它所属的<input> 元素的ID 时，它就变成了可点击的。这意味着每当我点击标签时，输入也会被点击并因此被选中。

所以你隐藏输入并设置标签的样式。在 CSS 中，您会根据当前选择的输入说明点击标签的外观。 :checked 伪选择器在这里是真正的救星。

将所有这些放在您的表单中，使当前选定的单选按钮与正确的 name 和 value 对一起发送到服务器，而无需执行任何 JavaScript。

查看下面的 sn-p 以查看它的工作原理。 JavaScript 部分可以忽略，因为它只是一个演示。

/**
 * For demonstration purposes.
 * Logs the currently submitted 'rating' value.
 */
const form = document.querySelector('form');
form.addEventListener('submit', event => {
  const formData = new FormData(event.target);
  const rating = formData.get('rating');
  console.log(rating);
  event.preventDefault();
});

.star-input {
  display: none;
}

.star {
  color: gold;
}

.star-input:checked + .star ~ .star {
  color: white;
}

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css">
<form>
  <input type="radio" class="star-input" name="rating" id="star-1" value="1">
  <label for="star-1" class="star"><i class="fas fa-star"></i></label>
  <input type="radio" class="star-input" name="rating" id="star-2" value="2">
  <label for="star-2" class="star"><i class="fas fa-star"></i></label>
  <input type="radio" class="star-input" name="rating" id="star-3" value="3">
  <label for="star-3" class="star"><i class="fas fa-star"></i></label>
  <input type="radio" class="star-input" name="rating" id="star-4" value="4">
  <label for="star-4" class="star"><i class="fas fa-star"></i></label>
  <input type="radio" class="star-input" name="rating" id="star-5" value="5" checked>
  <label for="star-5" class="star"><i class="fas fa-star"></i></label>
  <button type="submit">Send</button>
</form>