how to take javascript variable into php

Question

I know this question has repeated in stack overflow but i'm asking this question as i didn't got a correct answer from trying those.i'm using codeigniter and i have a form where user can rate a product. What i need to know is,when a star button is clicked and submit i need to insert into db whether which star button is clicked.If 5th button is clicked it'll display "Excellent" text. If 4th button is clicked it'll display "good" text. So i need the users' rating to be inserted into the db.So please guide me how can i do that?

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

From below code it assign the text which is belong to clicked button , into rateText label.now i need that text to be pass to my controller through this forms' action attribute( as a parameter). Can anyone suggest me a way to solve this problem.

document.getElementById('rateText').textContent = star.getAttribute('data-rate');

and i thought of a way i don't know whether it's correct .and below i've mentioned the added part in strong text. If this is correct I want to know how to get this javascript variable into the forms' action attribute as a parameter to send it to the controller.

               **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 I added the code as you have mentioned here .But it is refresh the page and the same page is displaying. and in the url it shows something like this

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

in forms' action attribute i have used only action="businessRateCtrl/insertIntoBusinessReview/'.$Vehicleid;?>" above code. but i don't know how it is appending http://localhost/ci/businessRateCtrl/loadReviewPage/ into the url. Please anyone help me ? I was searching a solution for this hours now.

Answer 1

It is unclear to me what you are doing right now. you can either set a hidden input which you then submit, which seems what you are trying to do?

Or you can do an ajax request which wouldn't require to do a submit, meaning no refresh which usually gives a much better user experience

Read more about ajax requests here: http://api.jquery.com/jquery.ajax/

P.S. there are examples at the bottom of the page.

For submitting it through a form, ad a hidden input to your form:

<input type="hidden" id="rating" value="" />

and then when you want to assign its value in your function:

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;

                }

I think that should work, as others have said it's probably better to use numeric values instead of strings to save in your database

Answer 2

can I suggest use jquery and ajax call instead of javascript? with ajax call you can get the value of your stars and pass to a php page for save it into a database witouth reloading the page here is a quick example:

html your is ok

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);
}
?>

here some docs http://api.jquery.com/jquery.ajax/