Question

我知道这个问题已经在堆栈溢出中重复了但是我问这个问题，因为我没有通过尝试那些得到正确答案。我使用codeigniter而且我有一个用户表单可以评价产品。我需要知道的是，当点击一个星形按钮并提交时我需要在db中插入是否点击了哪个星形按钮。如果点击了第五个按钮，它将显示＆＃34;优秀＆＃34;文本。如果点击第4个按钮，它将显示＆＃34; good＆＃34;文本。所以我需要用户＆＃39;评级将被插入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">&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>

 <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我添加了你在这里提到的代码。但它刷新页面并显示相同的页面。并在网址中显示类似这样的内容

http://localhost/ci/businessRateCtrl/loadReviewPage/base_url();?%3EbusinessRateCtrl/insertIntoBusinessReview/base_url();

表格＆＃39;动作属性我只使用过行动=＆＃34; businessRateCtrl / insertIntoBusinessReview /＆＃39; $ Vehicleid;？＆GT;＆＃34; 上面的代码。但我不知道它是如何附加的 http://localhost/ci/businessRateCtrl/loadReviewPage/ 进入网址。请有人帮帮我吗？我现在正在寻找这个小时的解决方案。

Answer 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;

                }

我认为这应该有效，正如其他人所说的那样，使用数值代替字符串来保存在数据库中可能更好

Answer 2

我可以建议使用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);
}
?>

这里是一些文档 http://api.jquery.com/jquery.ajax/

如何将javascript变量带入php

2 个答案: