Priority field in html form

Question

I need to create a priority field in my HTML form. Currently i am using radio buttons but it does not suffice my needs. The radio button should change background color onclick depending on the level of priority. Also i am not able to read the values to the controller.

The priority field should change colors according to the matrix above. In the form only the first row is present for the priority field. This is the HTML i am using for priority

`       <input type="radio" id="1" class="priority">
        <input type="radio" id="2" class="priority">
        <input type="radio" id="3" class="priority">
        <input type="radio" id="4" class="priority">
        <input type="radio" id="5" class="priority">`

I am using spring MVC framework.

Any help would be appreciated

Answer 1

As per your requirement you can use jQuery plugin Colourful rating system. It comes with good options so that you can set the color as required.

DEMO

example as follows:

the HTML

<ul id="rating">
   <li><a href="#">This is just a piece of crap</a></li>
   <li><a href="#">Nothing too new or interesting</a></li>
   <li><a href="#">Not bad, I like it</a></li>
   <li><a href="#">I would like to see more of this</a></li>
   <li><a href="#">This is the best thing I've seen</a></li>
</ul>

CSS

#rating { list-style:none; }
#rating li { display:inline; float:left; }
#rating li a { display:block; width:80px; height:80px; border:1px solid #888; background-color:#333;
   text-indent:-9999px; box-shadow:0 0 5px #888; border-radius:40px; }

#ratinginfo { clear:left; width:350px; }
#ratinginfo p { text-align:center; padding:10px;
   box-shadow:0 0 5px #888; border-radius:40px; }

After we're done loading jQuery and the Color plugin, we're ready to use jQuery to now animate the circles to the right colour and display the text.

// Variable to set the duration of the animation
var animationTime = 500;

// Variable to store the colours
var colours = ["bd2c33", "e49420", "ecdb00", "3bad54", "1b7db9"];

// Add rating information box after rating
var ratingInfobox = $("<div />")
   .attr("id", "ratinginfo")
   .insertAfter($("#rating"));

// Function to colorize the right ratings
var colourizeRatings = function(nrOfRatings) {
   $("#rating li a").each(function() {
      if($(this).parent().index() <= nrOfRatings) {
         $(this).stop().animate({ backgroundColor : "#" + colours[nrOfRatings] } , animationTime);
      }
   });
};

// Handle the hover events
$("#rating li a").hover(function() {

   // Empty the rating info box and fade in
   ratingInfobox
      .empty()
      .stop()
      .animate({ opacity : 1 }, animationTime);

   // Add the text to the rating info box
   $("<p />")
      .html($(this).html())
      .appendTo(ratingInfobox);

   // Call the colourize function with the given index
   colourizeRatings($(this).parent().index());
}, function() {

   // Fade out the rating information box
   ratingInfobox
      .stop()
      .animate({ opacity : 0 }, animationTime);

   // Restore all the rating to their original colours
   $("#rating li a").stop().animate({ backgroundColor : "#333" } , animationTime);
});

// Prevent the click event and show the rating
$("#rating li a").click(function(e) {
   e.preventDefault();
   alert("You voted on item number " + ($(this).parent().index() + 1));
});

for complete documentation and source code click HERE

Answer 2

I am not sure if i understud your question correct, but if so this demo code (jsfiddle) might help. (its just a demo, and would still have to be adapted for your needs)

It simply sets the color class on the Click event of every RadioButton.

CSS

.color1 {
    background:red;
}
.color2 {
    background:green;
}
.color3 {
    background:yellow;
}

HTML

<div class="priority">
    <input type="radio" name="1" id="1">
    <input type="radio" name="1" id="2">
    <input type="radio" name="1" id="3">
    <input type="radio" name="1" id="4">
    <input type="radio" name="1" id="5">
</div>

Script

$(function () {
    $(".priority input").on("click", function () {
        $(".priority").attr("class", "priority color" + this.id);
    });
})

tested with Chrome 34+

Answer 3

UPDATE: updated FIDDLE

add value attribute to the radio buttons like

<input type="radio" name="1" id="r1" value="a rating">

then some script to read the radio button values like:

var htmlStr = $(this).attr("value");
$(".indicator").html(htmlStr); 

I've tried some workaround for the sake of "changing color" in this Fiddle

Added this html, to act as the radio buttons that changes color:

<div class="circ"></div>
<div class="circ"></div>
<div class="circ"></div>
<div class="circ"></div>
<div class="circ"></div>

with this css, to take it under the radio buttons:

.circ{
    height: 12px;
    width: 12px;
    border-radius: 50%;
    background: gray;
    display: inline-block;
    position: relative;
    bottom: 20px;
    margin-left: 5px;
    margin-right: 4px;
}

Then add z-index: 9 to the radio button css rule to make it stay on top of the .circ divs and be clickable. Finally, add opacity: 0 to make it invisible, so the .circ divs under will appear on screen. Now you can change the color of the .circ divs accordingly using some script.

PS: You can't just edit radio button's background color, instead use background images