如何在只单击一个星形按钮的情况下启用禁用按钮

how to enable a disabled button if only one star button is clicked

本文关键字:按钮 情况下 启用 一个 单击      更新时间:2024-02-23

我使用的是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' ?>");
    }

}

主要型号.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"设置为"优秀"、"良好"或任何属于点击按钮的文本。

所以,如果我需要把文本"优秀"、"优秀"等插入数据库,我该怎么做?你能好心帮我吗?

您只需使用Remove属性

$(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");
    });
});

代码的示例