JS function conflicting with CSS style

JS function conflicting with CSS style - javascript

I have a radio button part into a large form which is styled in a way that when it's hovered or checked, it has a different background color. Though, I have an important js function for the rest of the form which keeps the style from working. It took me time to understand that the conflict came from that function, but I have no clue on how to solve this.
Here's what I got:
$("#general-form").on("click", "label", function() {
name_input = $(this).children("input").attr("name");
if (name_input) {
onglet = obj_critere_form.simulation_encours;
$("#simul_" + onglet + " input[name='" + name_input + "']").focus();
}
return false
});
obj_critere_form = new critere_form();
obj_critere_form.initialize();
#general-form .radio-toolbar input[type="radio"],
p {
display: none;
}
#general-form .radio-toolbar label {
display: inline-block;
background-color: #ddd;
padding: 4px 11px;
font-family: Arial;
font-size: 16px;
cursor: pointer;
}
#general-form .radio-toolbar label:hover {
background-color: #bbb;
}
#general-form .radio-toolbar input[type="radio"]:checked+label {
background-color: #bbb;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="general-form">
<div class="radio-toolbar">
<h2>Options:</h2>
</br>
<input type="radio" id="radio1" name="radios" value="a1">
<label for="radio1">option 1</label>
<input type="radio" id="radio2" name="radios" value="a2">
<label for="radio2">option 2</label>
<input type="radio" id="radio3" name="radios" value="a3">
<label for="radio3">option 3</label>
</div>
</div>

The problem is return false; in the click handler. That's equivalent to event.preventDefault();. The default action of clicking on a label is to click on the element that the label is associated with by the for attribute; return false; prevents that from happening, so clicking on the label doesn't check the button.
I'm not sure why you have that in the click handler in the first place. All it does is prevent clicking on the label from working.
$("#general-form").on("click", "label", function() {
name_input = $(this).children("input").attr("name");
if (name_input) {
onglet = obj_critere_form.simulation_encours;
$("#simul_" + onglet + " input[name='" + name_input + "']").focus();
}
//return false
});
//obj_critere_form = new critere_form();
//obj_critere_form.initialize();
#general-form .radio-toolbar input[type="radio"],
p {
display: none;
}
#general-form .radio-toolbar label {
display: inline-block;
background-color: #ddd;
padding: 4px 11px;
font-family: Arial;
font-size: 16px;
cursor: pointer;
}
#general-form .radio-toolbar label:hover {
background-color: #bbb;
}
#general-form .radio-toolbar input[type="radio"]:checked+label {
background-color: #bbb;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="general-form">
<div class="radio-toolbar">
<h2>Options:</h2>
</br>
<input type="radio" id="radio1" name="radios" value="a1">
<label for="radio1">option 1</label>
<input type="radio" id="radio2" name="radios" value="a2">
<label for="radio2">option 2</label>
<input type="radio" id="radio3" name="radios" value="a3">
<label for="radio3">option 3</label>
</div>
</div>

In this case it looks like you're using a library for the form which could have it's own styles.
Use this at the end of the CSS you need to come through but use it sparingly and with caution.
//example
color: blue !important;

Related

Change css of HTML element from typescript/javascript

I am using star rating widget in one of my HTML forms in my React JS application.
I am referring this widget https://www.everythingfrontend.com/posts/star-rating-input-pure-css.html.
When user clicks rating from one of five star, the user information gets saved to server.
The stars remain selected when user clicks on any star.
I want to reset the stars back to unselected when the response comes back from server for user's next action.
I dont know how to do that using Typescript/Javascript.
I tried changing it like below :
let ratingElement = document.querySelectorAll("#ratingField > label");
if (ratingElement.length > 0) {
for (let i = 0; i < ratingElement.length; i++) {
ratingElement[i].style.color = "#ddd";
}
}
Using the above code, the color gets reset. But there are other properties in CSS like hover,checked,unchecked on the widget.
How to add those properties to reset the stars same like its initial stage?
Below is my CSS for the widget:
.rating {
border: none;
float: left;
}
.rating > input {
display: none;
}
.rating > label:before {
margin: 5px;
font-size: 25px;
font-family: FontAwesome;
display: inline-block;
content: "\f005";
}
.rating > label {
color: #ddd;
float: right;
}
.rating > input:checked ~ label, /* show gold star when clicked */
.rating:not(:checked) > label:hover, /* hover current star */
.rating:not(:checked) > label:hover ~ label {
color: #ffd700;
} /* hover previous stars in list */
.rating > input:checked + label:hover, /* hover current star when changing rating */
.rating > input:checked ~ label:hover,
.rating > label:hover ~ input:checked ~ label, /* lighten current selection */
.rating > input:checked ~ label:hover ~ label {
color: #ffed85;
}
And my HTML code is like :
<fieldset
className="rating"
style={{ marginLeft: 5, marginRight: 5 }}
id="ratingField"
>
<input type="radio" id="star5" name="rating" value="5" />
<label
onClick={() => this.shortlist(5)}
className="full"
htmlFor="star5"
title="Awesome"
/>
<input type="radio" id="star4" name="rating" value="4" />
<label
onClick={() => this.shortlist(4)}
className="full"
htmlFor="star4"
title="Pretty good"
/>
<input type="radio" id="star3" name="rating" value="3" />
<label
onClick={() => this.shortlist(3)}
className="full"
htmlFor="star3"
title="Average"
/>
<input type="radio" id="star2" name="rating" value="2" />
<label
onClick={() => this.shortlist(2)}
className="full"
htmlFor="star2"
title="Kinda bad"
/>
<input type="radio" id="star1" name="rating" value="1" />
<label
onClick={() => this.shortlist(1)}
className="full"
htmlFor="star1"
title="Worst"
/>
</fieldset>
Can anyone help?

Use the browser inspector to understand what's the initial status of your stars widget (classes, inline styles, etc.). My advice is to not use inline styles.
After that you have to restore your initial classes, you can do it with:
document.getElementById("MyElement").classList.add('MyClass');
document.getElementById("MyElement").classList.remove('MyClass');
If there is even something like "checked" you can do:
// Check
document.getElementById("checkbox").checked = true;
// Uncheck
document.getElementById("checkbox").checked = false;
In your case you can uncheck element just with:
document.getElementById("star1").checked = false;
For each element checked you can uncheck it this way.

let ratingElement = document.querySelectorAll("#ratingField input[type=radio]:checked");
ratingElement.forEach( function( obj, idx ) {
console.log(obj);
obj.checked = false;
});
Check this fiddle - https://jsfiddle.net/8bk37a5j/16/
You dont need to set styes in javascript. Just change the "checked" value to true/false and the rest should be handled in CSS.

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<link href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css"/>
<script>
$(document).ready(function(){
$('input[type="radio"]').click(function(){
$('input[type="radio"]').next('label').css('background-position','0 -16px')
for(var i=1;i<=parseInt($(this).attr('name'));i++)
{
$('input[name="'+i+'"]').next('label').css('background-position','0 0')
}
})
$('#reset').click(function(){
$('input[type="radio"]').next('label').css('background-position','0 -16px')
})
})
</script>
<style>
.rating {
overflow: hidden;
display: inline-block;
}
.rating-input {
float: right;
width: 16px;
height: 16px;
padding: 0;
margin: 0 0 0 -16px;
opacity: 0;
}
.rating-star {
cursor: pointer;
position: relative;
display: block;
width: 16px;
height: 16px;
background: url('https://www.everythingfrontend.com/samples/star-rating/star.png') 0 -16px;
}
.rating-star:hover {
background-position: 0 0;
}
</style>
<body>
<span class="rating">
<input type="radio" class="rating-input"
id="rating-input-1-5" name="1">
<label for="rating-input-1-5" class="rating-star"></label>
<input type="radio" class="rating-input"
id="rating-input-1-4" name="2">
<label for="rating-input-1-4" class="rating-star"></label>
<input type="radio" class="rating-input"
id="rating-input-1-3" name="3">
<label for="rating-input-1-3" class="rating-star"></label>
<input type="radio" class="rating-input"
id="rating-input-1-2" name="4">
<label for="rating-input-1-2" class="rating-star"></label>
<input type="radio" class="rating-input"
id="rating-input-1-1" name="5">
<label for="rating-input-1-1" class="rating-star"></label>
<input type="button" value="Reset" id="reset">
</span>
</body>
</html>

Radio input as a div

In the snippet below you will see that I am styling a radio button to look like a button. I am wanting these buttons to work just as the radio button would in its normal state. Right now both radio buttons are taking on the active class from my javascript on page load. This should only happen if they are selected.
Also, the fadeToggle from the if-statement that produces the extra input under the radio buttons is functioning as if the radio buttons are checkboxes. I have to click on the same button twice to de-activate it. I think this is based on the issue above.
Does anyone have any ideas what I am doing wrong?
var rsvpAns = $('.radioTransform');
rsvpAns.click(function() {
$('.radio', this).prop('checked', !$('.radio', this).prop('checked')).change();
var radioCheck = $('.radio', this).val();
$('.radioTransform', this).toggleClass('active');
console.log(radioCheck);
if (radioCheck == 'Yes') {
$('#ansYes').fadeToggle(400);
}
});
.radio {
display: none;
}
#pushR {
margin-right: 25px;
}
.radioTransform {
width: 220px;
display: inline-block;
vertical-align: top;
background: #dbc8ca;
cursor: pointer;
padding: 15px 0;
}
.radioTransform.active {
background: red;
}
.radioAnswer {
font-family: 'Open Sans', sans-serif;
font-size: .9rem;
text-align: center;
}
#ansYes {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form id="rsvpForm">
<div class="formField">
<div class="radioTransform" id="pushR">
<span class="radioAnswer">YES</span>
<input type="radio" value="Yes" class="radio">
</div>
<div class="radioTransform">
<span class="radioAnswer">NO</span>
<input type="radio" value="No" class="radio">
</div>
</div>
<div class="formField" id="ansYes">
<label class="label">How are you doing?</label>
<input type="text" class="input">
</div>
<input type="submit" value="Submit RSVP" id="submit">
</form>

You don't need Javascript at all for this - only some intelligent CSS and a slight restructuring of your markup. This change will even increase the semantic value and accessibility of your solution.
I have only added Javascript for some console.logging so you see the snippet works.
Please note that in order to make radio buttons work like expected, they need to share the name attribute, otherwise both can be "on".
const radios = Array.from(document.querySelectorAll('[name="yesno"]'))
for (const radio of radios) {
radio.addEventListener('change', function() {
value.textContent = document.querySelector('[name="yesno"]:checked').value
})
}
.radio {
display: none;
}
.radioAnswer {
width: 220px;
display: inline-block;
vertical-align: top;
background: #dbc8ca;
cursor: pointer;
padding: 15px 0;
transition-duration: .4s;
position: relative;
}
.radioAnswer::before {
display: inline-block;
content: "";
border-width: 0 2px 2px 0;
border-color: transparent;
border-style: solid;
width: 0;
height: 0;
transition: width .4s linear .1s,
height .2s linear 1.6s;
position: absolute;
left: 10px;
top: 50%;
transform: rotate(35deg) translateY(-50%);
transform-origin: center right;
}
input[type=radio]:checked+.radioAnswer {
background: #0a0;
color: #fff;
}
input[type=radio]:checked+.radioAnswer::before {
border-color: #fff;
transform: rotate(35deg) translateY(-50%);
height: 1.5em;
width: .8em;
transition: all .4s linear 0s, width .4s linear .1s, height .2s linear .3s
; position: absolute;
}
.radioAnswer {
font-family: 'Open Sans', sans-serif;
font-size: .9rem;
text-align: center;
}
<input type="radio" value="Yes" class="radio" name="yesno" id="yes">
<label class="radioAnswer" for="yes">Yes</label>
<input type="radio" value="No" class="radio" name="yesno" id="no">
<label class="radioAnswer" for="no">NO</label>
<p>Selected Value: <strong id="value"></strong></p>

Your if condition block only works when you clicked yes button. Then what if you clicked No, for this condition you can have else statement. And here in this code radioTransform div don't have active class on load.
var rsvpAns = $('.radioTransform');
rsvpAns.click(function() {
$('.radio', this).prop('checked', !$('.radio', this).prop('checked')).change();
var radioCheck = $('.radio', this).val();
console.log(radioCheck);
$(this).toggleClass('active');
if (radioCheck == 'Yes') {
$('#ansYes').fadeToggle(400);
if($(this).next('.radioTransform').hasClass('active')){
$(this).next('.radioTransform').removeClass('active');
}
} else {
$('#ansYes').fadeOut(400);
if($(this).prev('.radioTransform').hasClass('active')){
$(this).prev('.radioTransform').removeClass('active');
}
}
});
.radio {
display: none;
}
#pushR {
margin-right: 25px;
}
.radioTransform {
width: 220px;
display: inline-block;
vertical-align: top;
background: #dbc8ca;
cursor: pointer;
padding: 15px 0;
}
.radioTransform.active {
background: red;
}
.radioAnswer {
font-family: 'Open Sans', sans-serif;
font-size: .9rem;
text-align: center;
}
#ansYes {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form id="rsvpForm">
<div class="formField">
<div class="radioTransform" id="pushR">
<span class="radioAnswer">YES</span>
<input type="radio" value="Yes" class="radio">
</div>
<div class="radioTransform">
<span class="radioAnswer">NO</span>
<input type="radio" value="No" class="radio">
</div>
</div>
<div class="formField" id="ansYes">
<label class="label">How are you doing?</label>
<input type="text" class="input">
</div>
<input type="submit" value="Submit RSVP" id="submit">
</form>

In order to achieve the toggling effect of the radio button with the backgrounds, $('.radioTransform', this).toggleClass('active'); will not be enough.
First, taking into consideration it is already inside a click handler which is attached to $('.radioTransform'), when you add this as second argument of $('.radioTransform', this).toggleClass('active'); you are telling it to look for .radioTransforms inside a .radioTransform, cause you are setting .radioTransform as the context of the selector, that's why it does not change color. And even if you remove this, you would be toggling the class for every .radioTransform there is (how many times did I write radioTransform?:) )
Second, remove background: red from .radioTransform when it is not active, else you will never see it happen
var rsvpAns = $('.radioTransform');
rsvpAns.click(function() {
$('.radio', this).prop('checked', !$('.radio', this).prop('checked')).change();
var radioCheck = $('.radio', this).val();
$(this).toggleClass('active');
$(this).siblings('.radioTransform').toggleClass('active', !$(this).hasClass('active'));
console.log(radioCheck);
if (radioCheck == 'Yes') {
$('#ansYes').fadeToggle(400);
} else {
$('#ansYes').fadeOut(400);
}
});
.radio {
display: none;
}
#pushR {
margin-right: 25px;
}
.radioTransform {
width: 220px;
display: inline-block;
vertical-align: top;
background: #dbc8ca;
cursor: pointer;
padding: 15px 0;
}
.radioTransform {
/*background: red;*/
}
.radioAnswer {
font-family: 'Open Sans', sans-serif;
font-size: .9rem;
text-align: center;
}
#ansYes {
display: none;
}
.radioTransform.active {
background: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form id="rsvpForm">
<div class="formField">
<div class="radioTransform" id="pushR">
<span class="radioAnswer">YES</span>
<input type="radio" value="Yes" class="radio">
</div>
<div class="radioTransform">
<span class="radioAnswer">NO</span>
<input type="radio" value="No" class="radio">
</div>
</div>
<div class="formField" id="ansYes">
<label class="label">How are you doing?</label>
<input type="text" class="input">
</div>
<input type="submit" value="Submit RSVP" id="submit">
</form>

Radio button filled with color

I was trying to make my radio button looks like checkbox. I have made it OK but the problem i am facing when i tried to fill it up with color. Means in default stage it's white and when i clicked it fills with black. But now i want to make it as different colors based on title and when i clicked it should filled with that color only. How do i make it ?
<label class="active">
Email
<span></span>
<input type="radio" name="n1" value="email" checked>
</label>
<label>
Phone
<span></span>
<input type="radio" name="n1" value="phone">
</label>
<label>
Address
<span></span>
<input type="radio" name="n1" value="address">
</label>
Fiddle

You can add data-title to your label and give color to that and i have made a new style element which will change your style attribute of the radio button.
please check the below code
$(document).ready(function() {
$('label').click(function() {
var title = $(this).data('title');
$('.active').removeClass("active");
$(this).addClass("active");
$("<style> label.active span:after{ background-color: "+title+";} </style>").appendTo("head");
});
$('input:checked').trigger('click');
});
label {
width: 125px;
display: block;
float: left;
}
label input {
display: none;
}
label span {
display: block;
width: 17px;
height: 17px;
border: 1px solid black;
float: left;
margin: 0 5px 0 0;
position: relative;
}
label.active span:after {
content: "";
position: absolute;
left: 3px;
right: 3px;
top: 3px;
bottom: 3px;
background: black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<label class="active" data-title='red'>
Email
<span></span>
<input type="radio" name="n1" value="email" checked>
</label>
<label data-title='green'>
Phone
<span></span>
<input type="radio" name="n1" value="phone">
</label>
<label data-title='blue'>
Address
<span></span>
<input type="radio" name="n1" value="address">
</label>
<label data-title='orange'>
Address2
<span></span>
<input type="radio" name="n1" value="address">
</label>
<label data-title='#ff11dd'>
Using Color Code
<span></span>
<input type="radio" name="n1" value="address">
</label>

Having different colors based on a title (or a value)... I don't think it is possible with just CSS.
In revenge, since you exactly know their order, you can set different colors using nth-child(n).
Try:
label:nth-child(1).active span:after {
background: red;
}
label:nth-child(2).active span:after {
background: orange;
}
label:nth-child(3).active span:after {
background: green;
}
Updated Fiddle

On input field mouse hover display tooltip

I'm doing rating star when we hover on any star I want to display tooltip as far now I tried to like this there is a problem in jquery I couldn't target proper class name I don't have an idea how to write that class. I used input type radio and label how I will load this attributes in jquery can anyone suggest me to achieve that functionality.
thanks in Advance...
$(document).ready(function () {
$("input[name=rating]").on('mouseenter', showBox);
$("input[name=rating]").on('mouseleave', hideBox);
function showBox(e) {
var x = e.pageX - 80;
var y = e.pageY + 20;
$('#tooltip_block').fadeIn();
$('#tooltip_block').offset({ left: x, top: y });
}
function hideBox() {
$('#tooltip_block').fadeOut();
}
});
.rating_widgets {
display: flex;
justify-content: center;
margin-top: 25px;
}
.rating {
border: none;
float: left;
}
.rating > input {
display: none;
}
.rating > label:before {
margin: 5px;
font-size: 24px;
font-family: FontAwesome;
display: inline-block;
content: "\f005";
}
.rating > .half:before {
content: "\f089";
position: absolute;
}
.rating > label {
color: #ddd;
float: right;
}
.rating > input:checked ~ label,
.rating:not(:checked),
.rating:not(:checked) {
color: #FFD700;
}
.rating > input:checked,
.rating > input:checked,
.rating > input:checked ~ label,
.rating > input:checked ~ label {
color: #FFED85;
}
#tooltip_block {
display: none;
position: absolute;
z-index: 1;
color: #ffffff;
background-color: #000;
}
<div class="rating_widgets">
<fieldset class="rating">
<input type="radio" id="star5" name="rating" />
<label class="full" for="star5"></label>
<input type="radio" id="star4half" name="rating" value="4 and a half" />
<label class="half" for="star4half"></label>
<input type="radio" id="star4" name="rating" value="4" />
<label class="full" for="star4"></label>
<input type="radio" id="star3half" name="rating" value="3 and a half" />
<label class="half" for="star3half"></label>
<input type="radio" id="star3" name="rating" value="3" />
<label class="full" for="star3"></label>
<input type="radio" id="star2half" name="rating" value="2 and a half" />
<label class="half" for="star2half"></label>
<input type="radio" id="star2" name="rating" value="2" />
<label class="full" for="star2"></label>
<input type="radio" id="star1half" name="rating" value="1 and a half" />
<label class="half" for="star1half"></label>
<input type="radio" id="star1" name="rating" value="1" />
<label class="full" for="star1"></label>
<input type="radio" id="starhalf" name="rating" value="half" />
<label class="half" for="starhalf"></label>
</fieldset>
</div>
<div id="tooltip_block">
<div class="top_bar">4.2 stars out of 5 stars</div>
</div>

Your issue is with the fact that the input fields aren't the ones you're actually hovering on, it's the labels.
This should work (Note that I've also replaced fadeIn() / fadeOut() with show() / hide() as mouse movements queue up the fade animations and make it flicker if you move your mouse around the star).
$(document).ready(function(){
$("label").hover(showBox, hideBox);
function showBox(e) {
var x = e.pageX - 80;
var y = e.pageY + 20;
$('#tooltip_block .rating_value').html($('#' + $(this).attr('for')).val());
$('#tooltip_block').show();
$('#tooltip_block').offset({ left: x, top: y });
}
function hideBox(){
$('#tooltip_block').hide();
}
});
.rating_widgets {
display: flex;
justify-content: center;
margin-top: 25px;
}
.rating {
border: none;
float: left;
}
.rating > input { display: none; }
.rating > label:before {
font-size: 24px;
font-family: FontAwesome;
display: inline-block;
content: "\f005";
}
.rating > .half:before {
content: "\f089";
position: absolute;
margin-left: 10px;
}
.rating > label {
color: #ddd;
float: right;
margin-left: 10px;
}
.rating > input:checked ~ label,
.rating:not(:checked),
.rating:not(:checked){ color: #FFD700; }
.rating > input:checked,
.rating > input:checked,
.rating > input:checked ~ label,
.rating > input:checked ~ label {
color: #FFED85;
}
#tooltip_block {
display: none;
position: absolute;
z-index: 1;
color: #ffffff;
background-color: #000;
}
<script src="https://use.fontawesome.com/a2e210f715.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="rating_widgets">
<fieldset class="rating">
<input type="radio" id="star5" name="rating" value="5"/>
<label class = "full" for="star5"></label>
<input type="radio" id="star4half" name="rating" value="4.5" />
<label class="half" for="star4half"></label>
<input type="radio" id="star4" name="rating" value="4" />
<label class = "full" for="star4"></label>
<input type="radio" id="star3half" name="rating" value="3.5" />
<label class="half" for="star3half"></label>
<input type="radio" id="star3" name="rating" value="3" />
<label class = "full" for="star3"></label>
<input type="radio" id="star2half" name="rating" value="2.5" />
<label class="half" for="star2half"></label>
<input type="radio" id="star2" name="rating" value="2" />
<label class = "full" for="star2"></label>
<input type="radio" id="star1half" name="rating" value="1.5" />
<label class="half" for="star1half"></label>
<input type="radio" id="star1" name="rating" value="1" />
<label class = "full" for="star1"></label>
<input type="radio" id="starhalf" name="rating" value="0.5" />
<label class="half" for="starhalf"></label>
</fieldset>
</div>
<div id="tooltip_block">
<div class="top_bar"><span class="rating_value"></span> stars out of 5 stars</div>
</div>
edit
This is the code that's inserting the values into the hover boxes
$('#tooltip_block .rating_value').html($('#' + $(this).attr('for')).val());
if you want to get rid of them remove that line of javascript (you should probably remove
<span class="rating_value"></span>
from the hover div as well then as it serves no purpose without that bit of js).
edit #2
As far as the hover showing up inbetween the stars - I updated your css. The thing is you were setting
.rating > label:before {
margin: 5px;
...
}
which effectively makes the elements that show your stars press up right besides one another. You can use
.rating > label {
...
margin-left: 10px;
}
.rating > .half:before {
...
margin-left: 10px;
}
Instead to create margins around the label elements

validate only last radio button of a group of radio

i have a form with questions, and need validate these questions, answered with radio buttons, this form have 20 or more questions, the questions have options 1,2,3. 1 = good, 2 = problem, 3 = critic. the user can check only 5 times the option 3. how i can do it with javascript?
i use only normal validate to unchecked options.
here a preview of radios:
JSFiddle
<div class="inline">
<label for="option1">
<input type="radio" name="group[1]" value="1">1</label>
<label for="option1">
<input type="radio" name="group[1]" value="1">2</label>
<label for="option1">
<input type="radio" name="group[1]" value="1">3</label>
</div>
CSS
.inline {
display: inline;
}
.inline label, input[type="radio"] {
float: left;
}
.inline label {
display: block;
background: #eee;
margin-left: 5px;
border-radius: 5px;
padding-left: 5px;
padding-right: 5px;
padding-top: 3px;
padding-bottom: 3px;
color: #333;
font-family: arial, sans-serif;
}
.inline input[type="radio"] {
display: block;
}

I guess value="1" in every radio was a typo and you meant
<label for="option1">
<input type="radio" id="option1" name="group[1]" value="1">1</label>
<label for="option2">
<input type="radio" id="option2" name="group[1]" value="2">2</label>
<label for="option3">
<input type="radio" id="option3" name="group[1]" value="3">3</label>
Then you can find how many checked radios with value="3" are there using
jQuery('input[value="3"]:checked').length
and act accordingly if the length is greater than 5.
Edit: jsfiddle demo (with the limit set to 2, not 5).

We Keep Coding

JavaScript is the programming language of the Web.

JS function conflicting with CSS style - javascript

In this case it looks like you're using a library for the form which could have it's own styles. Use this at the end of the CSS you need to come through but use it sparingly and with caution. //example color: blue !important;

Related

Change css of HTML element from typescript/javascript

Radio input as a div

Radio button filled with color

On input field mouse hover display tooltip

validate only last radio button of a group of radio

Categories

Resources