我目前有一個工作評論表，用戶可以寫一篇關于酒店的評論。到目前為止，它需要一個標題和正文，但我現在希望實施星級評級，以便用戶選擇一個評級并將其提交到我的數據庫。我目前有用戶可以提交標題和正文的代碼，但是星級不會提交，也不會提交到我的數據庫。誰能建議？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 之間。
1 回答
開心每一天1111
TA貢獻1836條經驗 獲得超13個贊
雖然<input>元素可以在表單中發送數據，但<span>元素不能?，F在您正在使用 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>
- 1 回答
- 0 關注
- 125 瀏覽
添加回答
舉報
0/150
提交
取消