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 部分可以忽略，因为它只是一个演示。

/**

 * 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>