Values are passing, but the alerts are not working in javaScript

Question

When user rates a specific product, I want the alert shown below to pop up, but they are not working. All values come from a table in a database. The data for input tag are working properly.

Here is my HTML code:

<input class="rating form-control input-star-rate" id="<?php if($jfeta3 != null) {  echo $jfeta3['product_id']; } else { echo $rateid; } ?>" name="<?php echo $arate_num; ?>" value="<?php echo $ratea; ?>" data-min="0" data-max="5" data-step="0.3" data-size="xs" style="display: none; text-align: center;"/>

Here is my javaScript code:

$(function(){
    $(document).ready(function(e) {
        var $stars = $('.input-star-rate');

        $stars.bind('change', function() {
            alert("comon akar");
            var $this = $(this); 
            alert($this);
            var ratingValue = $this.val();
            alert(ratingValue);
            var ratingValue2 = parseFloat(ratingValue);
            alert(ratingValue2);
        });
    });
 });

Here is my PHP code.

$product_id = $new['id'];
$jsqla3 = mysql_query("select * from user_star_rate where product_id='$product_id' and email='$visit_email'") or die(mysql_error());
$jfeta3 = mysql_fetch_assoc($jsqla3);

if($jfeta3 != null) {
   $ratea = $jfeta3['rate_value'];
   $arate_num = $new['rate_number'];
} else {
   $arate_num = $new['rate_number'];
   if($new['rate_number'] > 0){ 
      $ratea = $new['rate_score'] / $new['rate_number']; 
      $ratea2 = $new['rate_score'];
      $rateid = $new['id'];
      $ratenum = $new['rate_number'];
   }else{ 
      $ratea = $new['rate_score']; 
      $ratea2 = $new['rate_score'];
      $rateid = $new['id'];
      $ratenum = $new['rate_number'];
   }
}

@putvande Here is the Fiddle http://jsfiddle.net/Akarshani/pjnfykm5/ — Amare, Dec 15 '14 at 15:13
Your fiddle doesn't include jQuery. What version are you using? And only post the rendered HTML as the PHP is irrelevant to your question. — j08691, Dec 15 '14 at 17:23

score 2 · Answer 1 · edited May 23 '17 at 12:05

2

Basically for me it's working fine when changing the value manually by keyboard.

Please notice that the "change"-Event on input-fields is only triggered when losing focus.

If you are changing the value by jQuery for example (which I guess you are), then you should manually trigger the change event by adding a .trigger('change'); at the end.

A similar question can be found here: jQuery - Detect value change on hidden input field.

edited May 23 '17 at 12:05

Community

1
1

answered Dec 15 '14 at 15:03

Jeremy Zahner

501
2
12

When I am using this all alerts are giving at the page reloading. – Amare Dec 15 '14 at 17:28
@Sudda Please provide the jQuery/Javascript code you use to change the value. – Jeremy Zahner Dec 17 '14 at 08:48
@Sudda That is the code you already provided. How do you intend to change the value of the input field? Because the page load as itself does not trigger the "change" event. Since your field is hidden, how exactly does the user change the value? It's the script that changes the value that we need to provide you a solid solution. – Jeremy Zahner Dec 18 '14 at 09:51

score 1 · Answer 2 · answered Dec 15 '14 at 15:58

You can try the following piece of bits, basically you can track the change of an input with the keypress or keydown event.

var stars = $('.input-star-rate');

stars.bind('keydown', function() {
        alert("comon akar");
        var thisrate = $(this);
        alert(thisrate);
        var ratingValue = $(this).val();
        alert(ratingValue);
        var ratingValue2 = parseFloat(ratingValue);
        alert(ratingValue2);
 });

Here is the working fiddle http://jsfiddle.net/h7hnsyh7/ :) Hope this helps

The input is used for a star rating function. I want to give permission to the user to change the star rating value in each product. — Amare, Dec 15 '14 at 17:30

Values are passing, but the alerts are not working in javaScript

2 Answers2