rateYo jquery plugin function star rating codeigniter/php

Question

HTML:

<div id="submit-review">
<form action="<?=base_url()?>story/submit_review/<?=$story['story_id']?>" method="post">
<div class="form-group">
  <label for="review-rating">Rate the story</label>
  <div id="review-rating"></div>
</div>
<div class="form-group">
  <label for="review-content">Write your review</label>
  <textarea class="form-control" name="review-content"></textarea>
</div>
<button class="btn btn-default">Post Review</button>
</form>
</div>

<script>
$(function () {
    tinymce.init({ 
    selector:'textarea' 
    });

    $("#review-rating").rateYo({
    starWidth:"25px" 
    });
});
</script>

Controller:

public function submit_review(){
    $story_id = $this->uri->segment(3);
    $review_content = $this->input->post('review-content');
}

I tried experimenting with the jquery script provided by the website:

$(function () {
 
  var $rateYo = $("#rateYo").rateYo();
 
  $("#getRating").click(function () {
 
    /* get rating */
    var rating = $rateYo.rateYo("rating");
 
    window.alert("Its " + rating + " Yo!");
  });
 
  $("#setRating").click(function () {
 
    /* set rating */
    var rating = getRandomRating();
    $rateYo.rateYo("rating", rating);
  });
});

But i keep having problems, I don't have any background in jquery. I've done javascript validation but that was years ago. I could relearn but then i'd have to start with javascript first.

My idea is to somehow set a value to a hidden input type inside my <form> then just get it from there via post in CI.

  <input id='review-rating' type="hidden" value=""></input>
    
  var $rateYo = $("#review-rating").rateYo();

  $("#submit-review").click(function () {
    var rating = $rateYo.rateYo("review-rating");
    $("#hidden-rating").val(rating);
    window.alert("Its " + rating + " Yo!");
  });

But i could not test the above code if it works or not because whenever i try to add it, my other jquery functions won't work. I'm using rateYo plugin and tinymce.

This is my current scripts:

$(function () {

    tinymce.init({ 
    selector:'textarea' 
    });

    $("#story-rating").rateYo({
    rating: <?=$story['rating']?>,
    readOnly: true
    });
  
    <?php if(isset($reviews['your_review']) AND $reviews['your_review'] != NULL){ ?>
    $("#my-rating").rateYo({
    rating: <?=$your_review_rating?>,
    readOnly: true,
    starWidth: "25px"
    });
    <?php } ?>

    $("#review-rating").rateYo({
    starWidth:"25px" 
    });
  
    <?php foreach($reviews['other_reviews'] as $id=>$row){ ?>
    $("#rating-<?=$id?>").rateYo({
    rating: <?=$row['rating']?>,
    readOnly: true,
    starWidth: "25px"
    });
    <?php }  ?>

}); 

I barely got the above to work.

Anyway, my question is, how do i pass the rateYo value to my CI controller? if my above idea is of sound logic, then can you write how the syntax should look like here?

I guess i'm learning jquery as i need them, albeit messy.(i can't concentrate reading wall of texts/codes, i learn better by trying them)

Answer 1

Okay so while i was waiting for any answer. I read a quick tutorial on W3school.(i find w3school a reliable source for tutorials on anything, any other tutorials are either too complex or assumes the reader knows everything there is to know that leaves them confused)

So i changed the code abit:

var rating = $("#review-rating").rateYo("rating");
$("#hidden-rating").val(rating);

I've attached the above code to a button click event.

Now i can finally get the value from the controller:

$this->input->post('hidden-rating');

Still i'll wait for even better answers.