我正在使用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">★</span>
<span class="rate-star" data-rate="Good" >★</span>
<span class="rate-star" data-rate="Okay" >★</span>
<span class="rate-star" data-rate="Unsatisfied" >★</span>
<span class="rate-star" data-rate="Terrible" >★</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
public function 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”标签设置为“优秀”，“好”或文本属于所点击的按钮。
所以，如果我需要取“优秀”，“好”等文本并将其插入数据库，我该怎么做？能帮助我吗？
答案 0 :(得分：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");
});
});