Convert numbers into star rating using XML

Question

I am curious on how to interpret this same tutorial, but how can I use this to convert XML to PHP to display the stars. Tutorial

Here is my code:

<form action="xmlprocessad.php" method="POST" id="myform">
  <div class="step4-inputs">
      <input type="text" name="newrating">
          <span class="stars">**Class that displays stars**
               <span></span>
           </span>
       </input
   </div>
</form>

Here is the JQuery Code :

$(function() {          
  $('.submit-btn3').click(function() {
  $('p').html('<spanclass="stars">'+parseFloat($('input[name=newrating]').val())+'</span>');
            $('span.stars').stars();
        });         
        $('.submit-btn3').click();
    });

    $.fn.stars = function() {
        return $(this).each(function() {
            $(this).html($('<span />').width(Math.max(0, (Math.min(5, parseFloat($(this).html())))) * 16));
        });
    }

For some reason though, it won't convert my numbers to this star image, can someone please help me understand why? Thank you!

Looks like you are missing the css that sets the background image containing the stars. — jeroen, Mar 05 '14 at 22:10
@jeroen my fault for not including that into this, but I do have the code. Is there some reason why it is not displaying? — cheyneosy, Mar 05 '14 at 22:13

fsperrle · Answer 1 · 2014-03-05T22:54:05.207

0

You're just missing a space

 $('p').html('<span class="stars">'+parseFloat($('input[name=newrating]').val())+'</span>');

This should fix it.

Edit:

<form action="xmlprocessad.php" method="POST" id="myform">
  <div class="step4-inputs">
    <input type="text" name="newrating" />
    <span class="stars">**Class that displays stars**</span>
  </div>
</form>

Apart from that, did you use your browsers console to check if the function was actually called? I'm not an expert with JS, but shouldn't you declare your function before you try to call it?

edited Mar 05 '14 at 22:54

answered Mar 05 '14 at 22:23

fsperrle

1,262
1
14
26

@hjpotter92 it does fire off in the console when running the function but it seems that when I type a number in for example, it will not fill the stars depending on that number. It just fills it as a 5 star rating every review I add. – cheyneosy Mar 05 '14 at 23:31

Convert numbers into star rating using XML

1 Answers1