Change input type number value using jquery

Question

All the other attribute changes seem to work fine inside the modal. The rating button inside the modal doesn't load its value on loading. But the inspect element seems to display the proper rating value. I am new to php and jquery. Kindly excuse me from silly programming methodologies implemented in the above mentioned code. Any help would be deeply appreciated.

HTML :

<div class="item" style="width: 400px; height: 230px">
  <!-- Link trigger modal -->
  <a data-img-url="upload/&lt;?php echo $row['image_name'] ?&gt;" data-toggle=
  "modal" href="#myModal" id="<?php echo $row['image_id'] ?>" onclick=
  "modalload(this.id, '&lt;?php echo $row['image_title'] ?&gt;' , '&lt;?php echo $row['image_description'] ?&gt;', &lt;?php echo $TAVG ?&gt; );"><img class="img-responsive carousal_scale"
  src="upload/%3C?php%20echo%20$row['image_name']%20?%3E"></a>

  <div class="carousel-caption">
    <p><?php echo $row['image_title'] ?></p>
  </div>
</div><!-- Modal -->

<div class="modal fade modal-dialog modal-content" id="myModal" tabindex="-1">
  <div class="modal-header">
    <button class="close" data-dismiss="modal" type=
    "button"><span>&times;</span><span class="sr-only">Close</span></button>

    <h2 class="modal-title" id="myModalLabel"></h2>
  </div>

  <div class="modal-body well">
    <img class="img-responsive carousal_scale" src=""> <input class="rating"
    data-size="xs" id="" max="5" min="0" onchange="test(this.id, this.value);"
    step="0.1" style="alignment-adjust: auto;" type="number" value="">
  </div>

  <div>
    <p style="text-align: center; font-size: 15px;"></p>
  </div>

  <div class="modal-footer">
    <button class="btn btn-default" data-dismiss="modal" type=
    "button">Close</button>
  </div>
</div>

JS :

 $(document).ready(function() {
   $(".rating-kv").rating();
 });

 function modalload(id, title, description, avg) {
   alert(avg);
   //    alert(description);     
   $('#myModal img').attr('src', $('#' + id).attr('data-img-url'));
   $('#myModal input').attr('value', avg);
   $('#myModal input').attr('id', id);
   $('#myModal h2').text(title);
   $('#myModal p').text(description);
 }

 function test(id, val) {
   var pic_id = id;
   var pic_val = val;
   $.ajax({
     type: 'POST',
     url: 'rating.php',
     data: {
       'pic_id': pic_id,
       'pic_val': pic_val
     },
   }).done(function(data) {
     //  alert(data);      
   });
 }

Answer 1

"The rating button inside the modal doesn't load its value on loading." You currently have your modalload() function only activate on click of an a tag so your rating isn't going to get it's value/id populated on load, but rather on click.

Try this instead inside your modalload() function,

$('.rating').attr('value', avg);
$('.rating').attr('id', id);

Also, note that there is no jQuery rating() function, and that you have no element with the class rating-kv in your HTML, therefore the below code will do nothing.

$(".rating-kv").rating();

In other words, you have a lot of bad coding practices and incomplete code. You should consider revising what you have and re posting it.