第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全,請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問(wèn)題,去搜搜看,總會(huì)有你想問(wèn)的

HTML:將星級(jí)評(píng)分提交到我的 SQL 數(shù)據(jù)庫(kù)

HTML:將星級(jí)評(píng)分提交到我的 SQL 數(shù)據(jù)庫(kù)

PHP
三國(guó)紛爭(zhēng) 2022-12-23 14:28:39
我目前有一個(gè)工作評(píng)論表,用戶(hù)可以寫(xiě)一篇關(guān)于酒店的評(píng)論。到目前為止,它需要一個(gè)標(biāo)題和正文,但我現(xiàn)在希望實(shí)施星級(jí)評(píng)級(jí),以便用戶(hù)選擇一個(gè)評(píng)級(jí)并將其提交到我的數(shù)據(jù)庫(kù)。我目前有用戶(hù)可以提交標(biāo)題和正文的代碼,但是星級(jí)不會(huì)提交,也不會(huì)提交到我的數(shù)據(jù)庫(kù)。誰(shuí)能建議?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";    }        }            }當(dāng)我將其提交到我的數(shù)據(jù)庫(kù)時(shí),這些值顯示為 NULL,但我希望它們的值介于 1-5 之間。
查看完整描述

1 回答

?
開(kāi)心每一天1111

TA貢獻(xiàn)1836條經(jīng)驗(yàn) 獲得超13個(gè)贊

雖然<input>元素可以在表單中發(fā)送數(shù)據(jù),但<span>元素不能?,F(xiàn)在您正在使用 JavaScript 中的一個(gè)函數(shù)來(lái)模擬這種行為,方法是嘗試從懸?;騿螕舻姆秶蝎@取值。sessionStorage.starRating = count應(yīng)該是將sessionStorage.setItem('starRating', count)值存儲(chǔ)到會(huì)話(huà)存儲(chǔ)中。但這不是罪魁禍?zhǔn)住?/p>


不使用<span>元素,而是使用<input type="radio">元素來(lái)表示用戶(hù)給出的評(píng)分。雖然樣式看起來(lái)很難,但通過(guò)使用<label>元素作為樣式點(diǎn)可以相當(dāng)容易。當(dāng)您將<label>帶有屬性的 連接到它所屬for的元素的 id 時(shí),它就變成可點(diǎn)擊的了。<input>這意味著每當(dāng)我單擊標(biāo)簽時(shí),輸入也會(huì)被單擊并因此被選中。


因此,您隱藏輸入并設(shè)置標(biāo)簽樣式。在 CSS 中,您可以根據(jù)當(dāng)前選擇的輸入說(shuō)明點(diǎn)擊標(biāo)簽的外觀。:checked偽選擇器在這里是真正的救星。


將所有這些放在您的表單中,可以將當(dāng)前選定的單選按鈕發(fā)送到服務(wù)器,name并且value無(wú)需執(zhí)行任何 JavaScript。


查看下面的代碼片段以查看它是否有效。JavaScript 部分可以忽略,因?yàn)樗皇且粋€(gè)演示。


/**

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


查看完整回答
反對(duì) 回復(fù) 2022-12-23
  • 1 回答
  • 0 關(guān)注
  • 136 瀏覽

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購(gòu)課補(bǔ)貼
聯(lián)系客服咨詢(xún)優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)