SitePoint Sponsor

User Tag List

Results 1 to 11 of 11

Thread: rating script?

  1. #1
    SitePoint Wizard lukeurtnowski's Avatar
    Join Date
    Mar 2003
    Location
    Coronado
    Posts
    1,643
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)

    rating script?

    I have a star rating script similar to this (http://komodomedia.com/blog/samples/ratings.htm)
    How do I use the javascript onclick() property to make it so that it can be used for a form? So whatever selection I make (1-5) would appear in a combo box (with the values 1-5 in it). So that when the form is submitter the rating chosen would be used?
    Thank you....
    "Oh, and Jenkins--apparently your mother died this morning."

  2. #2
    ✯✯✯ silver trophybronze trophy php_daemon's Avatar
    Join Date
    Mar 2006
    Posts
    5,284
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    HTML Code:
    <form>
    
    <select name="rating" id="rating">
      <option value="1">1</option>
      <option value="2">2</option>
      ...
    </select>
    
    <ul class="star-rating">
      <li><a href="#" title="Rate this 1 star out of 5" class="one-star" onclick="document.getElementById('rating').selectedIndex=0">1</a></li>
      <li><a href="#" title="Rate this 2 stars out of 5" class="two-stars" onclick="document.getElementById('rating').selectedIndex=1">2</a></li>
    ...
    </form>
    Saul

  3. #3
    ♪♪ ♪ ♪ ♪ ♪♪ ♪ ♪♪ Markdidj's Avatar
    Join Date
    Sep 2002
    Location
    Bournemouth, South UK
    Posts
    1,551
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Code:
    <input name="star(n)" type="image" src="star.gif" onmouseover="this.src='filled_star.gif'">
    Then you can get the value of star(n).x and find which one was clicked server side. Hope it helps

    or using it with php daemons code you could use
    Code:
    onmouseover="this.src='filled_star.gif';document.getElementById('rating').selectedIndex=(n)"
    Using input type="image" would be my preference as you could hide whatever other method of javscript input system you would want to use, and it would still work without javascript
    LiveScript: Putting the "Live" Back into JavaScript
    if live output_as_javascript else output_as_html end if

  4. #4
    SitePoint Wizard lukeurtnowski's Avatar
    Join Date
    Mar 2003
    Location
    Coronado
    Posts
    1,643
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    woaw, I thought it might be something like that, thanks
    "Oh, and Jenkins--apparently your mother died this morning."

  5. #5
    SitePoint Wizard lukeurtnowski's Avatar
    Join Date
    Mar 2003
    Location
    Coronado
    Posts
    1,643
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    Is there a way to make the selection stick once a selection has been made?
    "Oh, and Jenkins--apparently your mother died this morning."

  6. #6
    ♪♪ ♪ ♪ ♪ ♪♪ ♪ ♪♪ Markdidj's Avatar
    Join Date
    Sep 2002
    Location
    Bournemouth, South UK
    Posts
    1,551
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Code:
    <span id="voteArea">
    <input type="image" name="star1" src="star.gif" />
    <input type="image" name="star2" src="star.gif" />
    <input type="image" name="star3" src="star.gif" />
    <input type="image" name="star4" src="star.gif" />
    <input type="image" name="star5" src="star.gif" />
    <input type="hidden" name="star" />
    </span>
    Code:
    stars=document.getElementsById("voteArea").getElementsByTagName("input");
    for(i=0;i<stars.length-2;i++){
    stars[i].onmouseover=function(){
    current_star=this.name.replace("star","");
    stars[stars.length-1].value=current_star;
    for(i=0;i<stars.length-2;i++){
    if(i<=current_star) stars[i].src="filled_star.gif"; else stars[i].src="star.gif";
    }
    }
    }
    Last edited by Markdidj; May 19, 2007 at 02:11. Reason: changed to allow any number of stars
    LiveScript: Putting the "Live" Back into JavaScript
    if live output_as_javascript else output_as_html end if

  7. #7
    ♪♪ ♪ ♪ ♪ ♪♪ ♪ ♪♪ Markdidj's Avatar
    Join Date
    Sep 2002
    Location
    Bournemouth, South UK
    Posts
    1,551
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Hey, saw your application and the image swapping doesnt seem to work in IE, although it looks nice in Firefox . Maybe change ".scr=str" to .setAttribute('src',str)". You could also use hollow gifs instead and change the background color to orange. This would also stop you needing 2 images. Also, on this type of input it's nice to give the input a cursorointer stlye. Looks good though
    LiveScript: Putting the "Live" Back into JavaScript
    if live output_as_javascript else output_as_html end if

  8. #8
    SitePoint Guru
    Join Date
    Sep 2006
    Posts
    731
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by lukeurtnowski View Post
    Is there a way to make the selection stick once a selection has been made?
    Knock yourself out
    Tab-indentation is a crime against humanity.

  9. #9
    SitePoint Wizard lukeurtnowski's Avatar
    Join Date
    Mar 2003
    Location
    Coronado
    Posts
    1,643
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    How do I change the ? into an *?
    Thanks though...
    "Oh, and Jenkins--apparently your mother died this morning."

  10. #10
    SitePoint Guru
    Join Date
    Sep 2006
    Posts
    731
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by lukeurtnowski View Post
    How do I change the ? into an *?
    Thanks though...
    I assume you're answering my post - do you mean that on your system those unicode star characters don't display? If some browsers still don't support them, then a graphical version can be easily produced.
    Tab-indentation is a crime against humanity.

  11. #11
    SitePoint Guru
    Join Date
    Sep 2006
    Posts
    731
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    For compatibility, the code has been changed to use graphics.
    Tab-indentation is a crime against humanity.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •