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
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
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+
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>This is just a piece of crap</li>
<li>Nothing too new or interesting</li>
<li>Not bad, I like it</li>
<li>I would like to see more of this</li>
<li>This is the best thing I've seen</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
Related
Ive been thinking about this for days... seems simple but I can't wrap my head around it!
We want to make a simple booking form, where people chose a day and then see two columns of available time slots. I already generate a lost of these.
Now I need to display this in buttons, so they can be pressed and only 1 is selected. So if they choose 2pm Wednesday, and then another, the first goes back to the standard color...
This value needs to be loaded in a hidden field to pass on to the next page.
Having searched it seems like the colors are best done in jquery and the hidden field can be populated easily with vanilla js, that part I have working... Help, how add the color change?
ps this is on a bootstrap 3.4 template, not that that should matter but maybe
<input type="button" id = "booktime" onclick="change(this)" class="btn btn-default" value=" & thishour & ">
function change(bookingtime) {
document.getElementById("myInput").value= bookingtime.value;
}
var links = $('#booktime');
links.click(function() {
links.css('background-color', 'white');
$(this).css('background-color', 'purple');
});
Consider the following HTML and jQuery example.
$(function() {
$(".booking label").click(function() {
var $self = $(this).parent();
$("input", $self).trigger("click");
$(".checked").removeClass("checked");
$self.addClass("checked");
});
$("form").submit(function(e) {
e.preventDefault();
var formData = new FormData(this);
for (var pair of formData.entries()) {
console.log(pair[0] + ', ' + pair[1]);
}
});
});
.booking ul {
list-style: none;
padding: 0;
width: 100px;
}
.booking li {
border: 1px outset rgb(224, 224, 224);
border-radius: 6px;
background: #eee;
padding: 7px;
text-align: center;
margin-bottom: 3px;
font-family: Arial, sans-serif;
}
.booking li.checked {
background: #aaf;
}
.booking li:hover {
background: #ccc;
}
.booking li input {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
<div class="booking">
<ul>
<li>
<input type="radio" id="time-0000" name="time" value="12:00">
<label for="time-0000">12:00 AM</label>
</li>
<li>
<input type="radio" id="time-0100" name="time" value="01:00">
<label for="time-0100">1:00 AM</label>
</li>
<li>
<input type="radio" id="time-0200" name="time" value="02:00">
<label for="time-0200">2:00 AM</label>
</li>
<li>
<input type="radio" id="time-0300" name="time" value="03:00">
<label for="time-0300">3:00 AM</label>
</li>
<li>
<input type="radio" id="time-0400" name="time" value="04:00">
<label for="time-0400">4:00 AM</label>
</li>
</ul>
</div>
<button type="submit">Save</button>
</form>
Most of the User Interface is all CSS. You can make it a bit mo9re custom and include a better look and feel with additional JavaScript. The default function of the Radio Button will help.
Radio buttons are normally presented in radio groups (a collection of radio buttons describing a set of related options). Only one radio button in a group can be selected at the same time.
This will help each button retain a State, either Checked or Unchecked. only one can be checked at a time, so we can simple clear the Styling from any other and apply it to the one clicked upon.
I can come up with a really long way around (toggle a opens a and closes b and c, toggle b opens b and closes a and c) but I'm wondering if there is a smarter/quicker option.
http://jsfiddle.net/kbZDv/1/
$(".toggle_container").hide();
$("p.trigger").click(function(){
$(this).toggleClass("active").next().slideToggle("normal");
});
The page: http://orionhistoricalsociety.org/videos/
Remove active class from existing trigger classes, then toggle class as you have been:
$("p.trigger").click(function(){
//removed active class from all p.trigger elements
$("p.trigger").removeClass("active");
//hide shown toggle_containers
$(".toggle_container").hide();
//show requested toggle_container
$(this).toggleClass("active").next().slideToggle("normal");
});
How about using radio buttons?
Here's my idea: CSS can hide the buttons and use a label to provide a way to select them, then the CSS can only show content for "checked" radio buttons.
Example below:
.option_container { margin: 10px 0px; }
.option_container > .block { background:#f0f0f0; }
/* Option styles */
.option_container > label { cursor: pointer; }
.option_container > input[type="radio"] { display: none; }
.option_container > input[type="radio"] ~ .block { display: none; }
.option_container > input[type="radio"]:checked ~ .block { display: block; }
<div class="option_container">
<input id="option1" type="radio" name="option" value="option1" />
<label for="option1">Click here to expand and reveal more information</label>
<div class="block">Content goes here.</div>
</div>
<div class="option_container">
<input id="option2" type="radio" name="option" value="option2" />
<label for="option2">Click here to expand and reveal more information</label>
<div class="block">Content goes here.</div>
</div>
Note: According to MDN, ":checked" is not supported by IE < 9
I am using image radio buttons which are working fine. However one of the radio buttons needs to be checked by default. However when this is set, it will not display the border around the checked image as it will when you click to select.
I have tried quite a few different things such has checked via html as well as javascript onload to no avail.
(Note there is only one radio button to select, this is because currently there is no 2nd option however there will be in the near future hence why we are pre checking it)
Any ideas?
<script type="text/javascript">
$(document).ready(function() {
$("a.radio-color-picture").click(function(){
var $id = $(this).attr('id');
$("a.radio-color-picture").removeClass('radio-color-border');
$("a#" + $id).addClass('radio-color-border');
});
});
function set_radio($inputid) {
$("input#" + $inputid).click();
}
</script>
<style type="text/css">
a.radio-color-picture {
border: 2px solid transparent;
display: inline-block;
height: 160px;
margin-right: 10px;
text-decoration: none;
width: 160px;
}
a.radio-color-picture:hover {
border:2px solid #d13a7a;
}
a.radio-color-border {
border:5px solid #d13a7a;
}
a#color {
background: url("<?php echo get_bloginfo('wpurl');?>/wp-content/themes/Impreza/_customimages/thumbnail.jpg") no-repeat scroll 0 0 white;
}
.hidden {
left: -10000px;
position: absolute;
top: -1000px;
}
</style>
<input type="radio" value="CHAR" name="color" id="color" class="hidden" checked="checked" />
<a id="color" href="javascript:set_radio('color');" class="radio-color-picture"> </a>
Cheers :)
This could actually be done much simpler :
Demo
Javascript :
$(document).ready(function(){
$('a.radio-color-picture').click(function(){
$(this).prev('input.hidden').click();
return false;
});
});
HTML (make sure you use unique ids !)
<input type="radio" value="CHAR" name="color" id="color" class="hidden" />
<a data-idinput="color" id="link" class="radio-color-picture"> </a>
<input type="radio" value="CHAR2" name="color" id="color2" class="hidden" checked="checked" />
<a data-idinput="color2" id="link2" class="radio-color-picture"> </a>
<input type="radio" value="CHAR3" name="color" id="color3" class="hidden" />
<a data-idinput="color3" id="link3" class="radio-color-picture"> </a>
And this is the main trick in CSS (only for IE >= 9) :
input.hidden:checked + a {
border:5px solid #d13a7a;
}
Edit : Demo for older versions of IE compatibility
to show the css to default checked you have to add the css 'class' or 'id' by default to the pre checked radio button and its respective href tag.
first is trouble with my overlapped divs, they're supposed to be overlapping each other but the thing is that upon loading the page, the box-shadow style are overlapped too, which I do not want, and would like to fix it.
the box shadow i want for each div is box-shadow: 0 0 2px #acacac;
but upon loading the page since there are 3 divs overlapped together the box shadow looks like it's been set to box-shadow: 0 0 6px #acacac;.
second is trying to simplify my jquery code.I've been trying to figure out a way to just uncheck all selected radio buttons upon checking a specific radio button, rather than having a long line of jquery code. something in the line of "if this radio button checked, uncheck checked radio button"
heres the
Jsfiddle(http://jsfiddle.net/cQca5/3/)
hopefully I find a solution, thanks!
JS: Simple as that. Hide all the divs and show what you want.
$(document).ready(function(){
$('input[type="radio"]').click(function(){
$('.div_style').css('display','none');
$('#'+$(this).val()).fadeIn();
});
});
CSS: display:none in .div_style
.div_style{
position:absolute;
border:1px solid #acacac;
width:750px;
height:500px;
border-radius:2px;
box-shadow: 0 0 2px #acacac;
top:40px;
left:0px;
display:none;
background:#FFF;
}
#diva{
z-index:1;
}
#divb{
}
#divc{
}
HTML: the attr name should be the same. Display:block for the first div.
<div>
<label><input type="radio" name="radio" value="div1" checked> 1st</label>
<label><input type="radio" name="radio" value="div2"> 2nd</label>
<label><input type="radio" name="radio" value="div3"> 3rd</label>
</div>
<div class="div_style" style='display:block;' id="div1">div1</div>
<div class="div_style" id="div2">div2</div>
<div class="div_style" id="div3">div3</div>
Heres a optimized jsFiddle solcing all the problems at once:
http://jsfiddle.net/cQca5/5/
Regards.
I have this markup one of my web pages,
<div class="radio-spoof">
<input type="radio" name="enquiry" value="General enquiry" class="radio"/>
<div class="checked"></div>
</div>
<label for="general_enquiry">General enquiry</label>
<div class="radio-spoof">
<input type="radio" name="enquiry" value="Request a brochure" class="radio" checked="true"/>
<div class="checked"></div>
</div>
<label for="request_a_brochure">Request a brochure</label>
Basically what I am doing is trying to spoof some radio buttons, so I can have good looking ones, when a radio is checked I want to display .checked which is set to display:none by default. I need to check for a checked radio button on DOMReady and when ever a radio is clicked, currently I have this page, but it does not seem to be making the selection of the .checked div correctly.
if($('input[type=radio]:checked')) {
console.log("!");
$(this).parent().children('div').show();
}
I would expect the code above the select the radio buttons parent, and then look for a child div (.checked) and show it. Am I mistaken?
`
$(function(){
$(':radio').change(function(){
var $this = $(this);
console.log($this);
$(':radio[name='+this.name+']').next().hide();
if($this.is(':checked')){
$this.next('.checked').show();
}
});
});
For above issue, i have done solution on codebins. So, try it on http://codebins.com/codes/home/4ldqpb6
Solution:
$(document).ready(function() {
$('input[type=radio]').each(function() {
if ($(this).is(':checked')) {
$(this).next('.checked').show();
}
$(this).click(function() {
if ($(this).is(':checked')) {
$(this).next('.checked').show();
}
});
});
});
demo you need to register an event when check box state changes : http://jsfiddle.net/FtPLS/2/ or http://jsfiddle.net/QCkpG/1/
Also I reckon you should use .next instead of .children.
if you want to hide .checked just do this => $('.checked').hide()
you could use $('input[type=radio]').is(':checked') for your check/uncheck condition.
Hope this helps the cause, :)
code
$(function() {
// here ==> $('.checked').hide(); will hide all the div with checked class
$('input').click(function() { // can use .change instead if you want
if ($('input[type=radio]').is(':checked')) {
alert('!')
$(this).parent().next('div').show(); // whatever you wanna show or
//$(this).next('div').show();
}
});
});
It seems to me that you're trying to get custom-styled radiobuttons? A pretty cool way without JS I had in a project was this (adapted to your code):
HTML
<div class="radio-spoof">
<input id="radio-1" type="radio" name="enquiry" value="General enquiry" class="radio"/>
<label for="radio-1">General enquiry</label>
</div>
CSS
.radio-spoof input {
position: absolute;
left: -9999px;
} /* not display: none so it is tabbable */
.radio-spoof label {
display: inline-block;
padding-left: 35px; /* width of your custom image + spacing to text */
height: 30px;
line-height: 30px; /* height of your custom image */
background: url(your/custom/image) center left no-repeat;
}
.radio-spoof input:checked + label {
background-image: url(your/custom/active/image);
}
The checkbox toggles everytime the label gets clicked, they're connected through input id and label for, and the label gets the input style.
If you want the checkboxes to look like default if they're not checked you can set it up like this:
CSS
.radio-spoof input + label { display: none }
.radio-spoof input:checked {
position: absolute;
left: -9999px;
}
.radio-spoof input:checked + label {
display: inline-block;
padding-left: 35px; /* width of your custom image + spacing to text */
height: 30px;
line-height: 30px; /* height of your custom image */
background: url(your/custom/image) center left no-repeat;
}
Then you have default radios and if they're checked the label takes their place...