1つの星のボタンがクリックされた場合に無効にされたボタンを有効にする方法

Question

私はcodeigniterを使用しています。私のコードは以下に示されています。送信ボタンを最初から無効にする必要があり、ユーザがスターボタンを選択すると、その送信ボタンだけを有効にする必要があります。どうすればそれを達成できますか？誰でも私を導いてください。なぜなら私はインターネットから貼り付けられたjavascriptコードを理解していないからです。

businessRateView.php

<?php $Vehicleid=$details['id']; ?> 
          <form action="<?php echo 'http://localhost/ci/businessRateCtrl/insertIntoBusinessReview/'.$Vehicleid?> " method="POST"> 

          <h2>Rate Ad</h2> 
          <p>All field marked with * are required</p> 
          <div style="color:red"> 
         <?php 
          $CI =& get_instance(); 
          $CI->load->library('form_validation'); 
          echo validation_errors(); 
         ?> 
         </div> 

          <div class="spacer-20"></div> 
          <h4>Your rating*</h4> 


          <h1><div class="rating" style="width:200px;float:left;padding-left:1px"> 
           <span class="rate-star" data-rate="Excellent">&bigstar;</span> 
           <span class="rate-star" data-rate="Good" >&bigstar;</span> 
           <span class="rate-star" data-rate="Okay" >&bigstar;</span> 
           <span class="rate-star" data-rate="Unsatisfied" >&bigstar;</span> 
           <span class="rate-star" data-rate="Terrible" >&bigstar;</span> 
           </div> 
          </h1> 

          <div style="float:right;padding-right:450px"> 
          <h3><label id="rateText" name="lblrating"></label></h3> 
          </div> 


          <div class="spacer-20"></div> 



          <h4>Write your review</h4> 
           <div class="spacer-20"></div> 
          <label class="col-md-4"> Title </label> 
          <input type="text" name="reviewTitle" placeholder="Title your review" class="form-control">  

          <div class="spacer-20"></div> 

          <label class="col-md-4">Your review </label>  
          <textarea rows="10" cols="103" name="review" placeholder="Write your review" class="form-control"></textarea> 
          <div class="spacer-20"></div> 
          <a class="btn btn-primary btn-lg" href=<?php echo 'http://localhost/ci/adpreview_ctrl/getad_preview/'.$Vehicleid?> onclick="return cancelConfirm();">Cancel</a> 

          <input type="submit" name="submitreview" class="btn btn-primary btn-lg" value="SUBMIT"> 

          </form> 
         </div> 
        </section> 
        </div> 
       </div> 
      </div> 
     </div> 
      <script type="text/javascript"> 
        window.onload = function() { 
        var starList = document.getElementsByClassName('rate-star'); 
        var numOfStars = starList.length; 

         for(var i = 0; i < numOfStars; i++) { 
          starList[i].addEventListener('click', starClickHandler, false); 
         } 
        } 

         function starClickHandler(event) { 
          var star = event.currentTarget; 

          setActive(star, false); 
          setActive(star, true); 
          document.getElementById('rateText').textContent = star.getAttribute('data-rate'); 
         } 

         function setActive(element, isActive) { 
          if(isActive) { 
          element.classList.add('active'); 
          element.nextElementSibling && setActive(element.nextElementSibling, isActive); 
          } 
          else { 
          element.classList.remove('active'); 
          element.previousElementSibling && setActive(element.previousElementSibling, isActive); 
          } 
          } 



         function cancelConfirm(){ 
          return confirm("Are you sure you want to cancel and leave this page?"); 
         } 

      </script> 

      <style type="text/css"> 
         #rateText{ 

        text-align:right; 

         } 
         .rating { 
          unicode-bidi: bidi-override; 
          direction: rtl ; 
           } 


           .rating > .rate-star.active, 
           .rating > .rate-star:hover, 
           .rating > .rate-star:hover ~ .rate-star { 
            color: #FFFF00; 
            cursor: default; 
            } 
      </style> 

businessRateCtrl.php

public function loadReviewPage($vehicleid){ 


    $data=array(); 
    $data['details']['id']=$vehicleid; 

    $this->load->view('pages/templates/header'); 
     $this->load->view('pages/businessRateView',$data); 
     $this->load->view('pages/templates/footer'); 



} 

public function insertIntoBusinessReview($Vehicleid){ 

     $data=array(); 
    $data['details']['id']=$Vehicleid; 

$this->form_validation->set_rules 
     (
      'lblrating', 
      'lblrating', 
      'required', 
      array 
      (
       'required'  => 'You have not provided Rating', 

      ) 
     ); 


      if ($this->form_validation->run() == FALSE) 
     { 
      $this->load->view('pages/templates/header'); 
      $this->load->view('pages/businessRateView',$data); 
      $this->load->view('pages/templates/footer'); 

     } 

else{ 
      $this->main_model->insertIntoBusinessReview($Vehicleid); 
     //$_SESSION['ads']=$_SESSION['ads']+1; 
     $this->session->set_flashdata('success_msg', 'Thank you! We will post your review soon'); 
     redirect("<?php echo 'http://localhost/ci/adpreview_ctrl/getad_preview/'.'$Vehicleid' ?>"); 

    } 

}

mainmodel.php

パブリック関数insertIntoBusinessReview（$ Vehicleid）{

上記のコードから

$rating = $_POST['lblrating']; 

    if(($_POST['reviewTitle'])!==null || ($_POST['review'])!==null) 
    { 
    $title=$_POST['reviewTitle']; 
    $review=$_POST['review']; 

    $data=array('Vehicleid'=>$Vehicleid,'rating'=>$rating,'title'=>$title,'review'=> $review,'reviewPoster'=>$this->session->userdata['logged_in']['email']); 
    $this->db->insert('businessreviews',$data); 
    } 

    $data=array('Vehicleid'=>$Vehicleid,'rating'=>$rating,'reviewPoster'=>$this->session->userdata['logged_in']['email']); 
    $this->db->insert('businessreviews',$data); 


} 

ここ

function starClickHandler(event) { 
          var star = event.currentTarget; 

          setActive(star, false); 
          setActive(star, true); 
          document.getElementById('rateText').textContent = star.getAttribute('data-rate'); 

それは、「エクセレント」「良い」または任意のテキストがクリックされたボタンに属するにラベル「rateText」に設定してください。

「Excellent」、「Good」などのテキストを入力してdbに挿入する必要がある場合はどうすればよいですか？あなたは私を助けるほど親切なことができますか？

Answer 1

あなただけRemove attribute

$(document).ready(function(){ 
    $(".rating .rate-star").click(function(){ 
     $(".active").removeClass("active"); 
     $(".rate-star:lt("+($(this).index()+1)+")").addClass("active"); 
     $("#rateText").html($(this).data("rate")); 
     $("#submitreview").removeAttr("disabled"); 
    }); 
}); 

Sample of your code