我知道这个问题已经在堆栈溢出中重复了但是我问这个问题,因为我没有通过尝试那些得到正确答案。我使用codeigniter而且我有一个用户表单可以评价产品。我需要知道的是,当点击一个星形按钮并提交时我需要在db中插入是否点击了哪个星形按钮。如果点击了第五个按钮,它将显示"优秀"文本。如果点击第4个按钮,它将显示" good"文本。所以我需要用户'评级将被插入db.So请指导我该怎么做?
<form name="myForm7" method="post" action="<?php echo 'http://localhost/ci/businessRateCtrl/insertIntoBusinessReview/'. $Vehicleid; ?>" >
<h1><div class="rating" style="width:200px;float:left;padding-left:1px">
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<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>
<script type="text/javascript">
var rateText;
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');
rateText=document.getElementById('rateText').textContent
document.getElementById('rating').value = rateText;
}
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);
}
}
$(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");
});
});
function cancelConfirm(){
return confirm("Are you sure you want to cancel and leave this page?");
}
</script>
<style type="text/css">
.active{
color:yellow;
}
#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>
从下面的代码中,它将属于clicked按钮的文本分配到rateText标签中。现在我需要通过此表单将该文本传递给我的控制器&#39;动作属性(作为参数)。任何人都可以建议我解决这个问题的方法。
document.getElementById('rateText').textContent = star.getAttribute('data-rate');
我想到了一种我不知道它是否正确的方法。下面我提到了强文中添加的部分。如果这是正确的,我想知道如何将这个javascript变量放入表格中。 action属性作为将其发送到控制器的参数。
**var rateText;**
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');
**rateText=document.getElementById('rateText').textContent**
}
P.S我添加了你在这里提到的代码。但它刷新页面并显示相同的页面。并在网址中显示类似这样的内容
表格&#39;动作属性我只使用过 行动=&#34; businessRateCtrl / insertIntoBusinessReview /&#39; $ Vehicleid;?&GT;&#34; 上面的代码。但我不知道它是如何附加的 http://localhost/ci/businessRateCtrl/loadReviewPage/ 进入网址。请有人帮帮我吗?我现在正在寻找这个小时的解决方案。
答案 0 :(得分:1)
我不清楚你现在在做什么。你可以设置一个隐藏的输入然后你提交,这似乎是你想要做的?
或者你可以做一个不需要提交的ajax请求,这意味着没有刷新通常可以提供更好的用户体验
在此处详细了解ajax请求:http://api.jquery.com/jquery.ajax/
P.S。页面底部有一些例子。
要通过表单提交,请在表单中添加隐藏的输入:
<input type="hidden" id="rating" value="" />
然后当你想在你的函数中分配它的值时:
function starClickHandler(event) {
var star = event.currentTarget;
setActive(star, false);
setActive(star, true);
document.getElementById('rateText').textContent = star.getAttribute('data-rate');
rateText=document.getElementById('rateText').textContent
document.getElementById('rating').value = rateText;
}
我认为这应该有效,正如其他人所说的那样,使用数值代替字符串来保存在数据库中可能更好
答案 1 :(得分:1)
我可以建议使用jquery和ajax调用而不是javascript吗? 使用ajax调用你可以获得你的星星的价值并传递到一个php页面,将其保存到数据库中,这里重新加载页面是一个简单的例子:
HTML 你还好吗
jquery的
$('.rate-star').click(function(){
var ratestar=$(this).data('rate');
$.ajax({
type: "POST",
url: "../ajax/ajax-rate.php",//here your php page
cache: false,
dataType: "json",
data: {
rate: ratestar
},
success: function (data) {
//if the ajax is done correctly enter in success
if(data.error==false){
$('#rateText').html(ratestar);
}else{
//handle your error
}
},
error: function (e, t, n){
//if there are some problems with the ajax request enter here
}
});
});
php ajax-rate.php
<?php
if(isset($_POST['rate'])){
$rate=$_POST['rate'];
//now save it into the db as you usually do
$message['message']='some message if you need';
$message['error']=false //this is not the error ajax function but it can helps you in the susseccs ajax function to handle errors
echo json_encode($message);
}
?>