moving from php to jquery

[freemancomputer]

I just added a .show for a div to a page where users can rate movies, works just fine as it is. I would like to change it up a bit by showing an image for the number rating that they gave it, 1-5. I have something like it set up in php that does that if they leave the page and come back. I would like this to work as soon as they click on the rate button. but im not sure how to add that to the .show. Any pointers would be helpful.

Thanks

Here is what I have with the php that finds the rating and shows the correct image and the scrip for the rating form.

<?PHP
if($rank>=1){
include"scripts/connect.php" ;
mysql_connect('localhost',$username,$password);
@mysql_select_db($database) or die( "Unable to select database");
$userquery_show_rating = mysql_query("SELECT * FROM rateing WHERE (movie_id='$id') AND (user_id='$loggedinusername')");

if (mysql_num_rows($userquery_show_rating) > 0) {

$user_rating_show = mysql_result($userquery_show_rating,$i,"rating");
?>
            <tr>
<td><span class="rulemain">Your Rating:</span><br>
<?PHP if($user_rating_show==1){
?>
<img src="beer_mug_finish.jpg"  alt="" name="beer_mug" width="50" height="50">
<?PHP
}
?>
<?PHP
if($user_rating_show==2){
?>
<img src="beer_mug_finish.jpg"  alt="" name="beer_mug" width="50" height="50">
<img src="beer_mug_finish.jpg"  alt="" name="beer_mug" width="50" height="50">
<?PHP
}
?>
<?PHP
if($user_rating_show==3){
?>
<img src="beer_mug_finish.jpg"  alt="" name="beer_mug" width="50" height="50">
<img src="beer_mug_finish.jpg"  alt="" name="beer_mug" width="50" height="50">
<img src="beer_mug_finish.jpg"  alt="" name="beer_mug" width="50" height="50">
<?PHP
}
?>
<?PHP
if($user_rating_show==4){
?>
<img src="beer_mug_finish.jpg"  alt="" name="beer_mug" width="50" height="50">
<img src="beer_mug_finish.jpg"  alt="" name="beer_mug" width="50" height="50">
<img src="beer_mug_finish.jpg"  alt="" name="beer_mug" width="50" height="50">
<img src="beer_mug_finish.jpg"  alt="" name="beer_mug" width="50" height="50">
<?PHP
}
?>
<?PHP
if($user_rating_show==5){?>
<img src="beer_mug_finish.jpg"  alt="" name="beer_mug" width="50" height="50">
<img src="beer_mug_finish.jpg"  alt="" name="beer_mug" width="50" height="50">
<img src="beer_mug_finish.jpg"  alt="" name="beer_mug" width="50" height="50">
<img src="beer_mug_finish.jpg"  alt="" name="beer_mug" width="50" height="50">
<img src="beer_mug_finish.jpg"  alt="" name="beer_mug" width="50" height="50">
<?PHP
}
?>

</tr>
<br>
<?php
                    }


        else {
        ?>
        <script type="text/javascript">
$(function() {
      $('#add-rating').submit(function(event) {
            event.preventDefault()
            $(this).hide('fast');
            var movie_rating_s = $('#add-rating [name="MOVIE_RATING"]:checked').val();
            var movie_id_s = $('#add-rating [name="MOVIE_ID"]').val();
            var movie_title_s = $('#add-rating [name="MOVIE_TITLE"]').val();
            var user_id_s = $('#add-rating [name="USER_ID"]').val();
            $.ajax({type: 'POST', url: 'movie_watched.php', cache: false, timeout: 10000,
                  data: {rating: movie_rating_s, movie: movie_id_s, title: movie_title_s, user: user_id_s},
                  success: function() {
                        $('#div_show').text('You have rated ' + movie_title_s + ' at a ' + movie_rating_s).show('fast');
                  },
                  error: function() {
                        $('#div_show').text('There is a problem').show('fast');
                  }
            });
      });
});
</script>
<form id="add-rating">
  <input type="radio" name="MOVIE_RATING" value="1" > 1
  <input type="radio" name="MOVIE_RATING" value="2" > 2
  <input type="radio" name="MOVIE_RATING" value="3" checked="yes"> 3
  <input type="radio" name="MOVIE_RATING" value="4" > 4 
  <input type="radio" name="MOVIE_RATING" value="5" > 5 <br>
  <input type="hidden" name="MOVIE_ID" value="<?php echo $id; ?>">
  <input type="hidden" name="MOVIE_TITLE" value="<?php echo stripslashes($title); ?>">
  <input type="hidden" name="USER_ID" value="<?php echo $loggedinusername; ?>">
<input type="submit" value="Rate">
</form>
<div id="div_show" class="rulesub">
</div>

<?php
}
}
?>

</td>
</tr>

[urtrivedi]

1) I am adding following code to line number 13 as

<div id='showrateimg'>

2) I am adding follwing code to line number 57

</div></td>

3) I am rewriting your success function

  success: function() {
                        $('#div_show').text('You have rated ' + movie_title_s + ' at a ' + movie_rating_s).show('fast');

//additional code

        $("#showrateimg").html(" ");

        for(i=1;i<=movie_rating_s;i++)
        {
                     $("#showrateimg").append("<img src='beer_mug_finish.jpg'  alt='' width='50' height='50'>");
                }





            },