I have this code with a 5 star rating(radio button) to be used in two different questions.
The problem is: the ratings of each question are working as one. I mean, I select something in the first question, but when I do a selection in the second question it changes the selection in the first one.
This problem happens when I add the CSS code. Without the CSS it works fine.
What is wrong in the CSS?
.estrelas input[type=radio] {
display: none;
}
.estrelas label i.fa:before {
content: '\f005';
color: #FC0;
font-size: 40px;
}
.estrelas input[type=radio]:checked~label i.fa:before {
color: #CCC;
}
.estrelas {
margin-left: 10px;
margin-top: 10px;
}
<div class="form-group has-feedback">
<div class="col-xs-12">
<label for="co_pergunta_avaliacao" class="control-label">ASPECTOS FORMAIS/GRAMATICAIS</label>
</div>
<div class="col-xs-8 estrelas" id="pergunta_1">
<label for="cm_star-1"><i class="fa"></i></label>
<input type="radio" id="cm_star-1" name="pergunta_1" value=1_1 />
<label for="cm_star-2"><i class="fa"></i></label>
<input type="radio" id="cm_star-2" name="pergunta_1" value=1_2 />
<label for="cm_star-3"><i class="fa"></i></label>
<input type="radio" id="cm_star-3" name="pergunta_1" value=1_3 />
<label for="cm_star-4"><i class="fa"></i></label>
<input type="radio" id="cm_star-4" name="pergunta_1" value=1_4 />
<label for="cm_star-5"><i class="fa"></i></label>
<input type="radio" id="cm_star-5" name="pergunta_1" value=1_5 />
</div>
</div>
<div class="form-group has-feedback">
<div class="col-xs-12">
<label for="co_pergunta_avaliacao" class="control-label">CONTEÚDO/ARGUMENTAÇÃO</label>
</div>
<div class="col-xs-8 estrelas" id="pergunta_2">
<label for="cm_star-1"><i class="fa"></i></label>
<input type="radio" id="cm_star-1" name="pergunta_2" value=2_1 />
<label for="cm_star-2"><i class="fa"></i></label>
<input type="radio" id="cm_star-2" name="pergunta_2" value=2_2 />
<label for="cm_star-3"><i class="fa"></i></label>
<input type="radio" id="cm_star-3" name="pergunta_2" value=2_3 />
<label for="cm_star-4"><i class="fa"></i></label>
<input type="radio" id="cm_star-4" name="pergunta_2" value=2_4 />
<label for="cm_star-5"><i class="fa"></i></label>
<input type="radio" id="cm_star-5" name="pergunta_2" value=2_5 />
</div>
</div>
Radio button IDs must be unique. Here, IDs cm_star-1 ... cm_star-5 are used for 2 radio buttons each, which causes the behavior.
Related
I need to do this only using flex but I am having some difficulty aligning my labels and input fields properly.This is what the end result is supposed to look like.
Any help would be appreciated!
<form>
<div class="details">
<label for="email">E-mail:</label>
<input type="email" id="email" name="email">
</div>
<div class="details">
<label for="tel">Telephone Number:</label>
<input type="tel" id="tel" name="tel">
</div>
<div class="details">
<label for="position">Position:</label>
<input type="text" id="position" name="position">
<input type="radio" name="availability" id="Part-Time" value="Part-Time">
<label for="radio">Part-Time</label>
<input type="radio" name="availability" id="Full-Time" value="Full-Time">
<label for="radio">Full-Time</label>
</div>
<div class="details">
<label for="date">Date:</label>
<input type="date" id="date" name="date">
<input type="checkbox" name="AM" id="AM" value="AM">
<label for="checkbox">AM</label>
<input type="checkbox" name="PM" id="PM" value="PM">
<label for="radio">PM</label>
</div>
<div class="details">
<label for="yearsofexperience">Years of Experience:</label>
<input type="text" id="yearsofexperience" name="yearsofexperience">
</div>
<div class="details">
</div>
<div class="details">
<label for="experience">Experience:</label>
<textarea name="experience" id="experience" rows="1" cols="20">Worked 5 years at Bayshore Veterinarian Services</textarea>
</div>
<div class="details">
<input type="submit" value="Apply Now">
</div>
</form>
I have tried all sorts of things but i cannot get them to line up. I have tried having two columns where column 1 contains the labels, while the other column contains the input field but i did not succeed.
I wrote some CSS to create the desired layout. It works without changing the provided HTML.
You can add the missing name input from the image though.
The .details > input:first-child selects the Apply Now button and set a margin-left: calc(25% + 6px), so it has a left space matching the labels and is align with other inputs.
You might as well consider using an actual <button> tag for submit though. If you do so later, you can change this selector to .details > button:first-child.
Hope this will help!
Example:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
form {
width: 600px;
display: flex;
flex-direction: column;
gap: 9px;
padding: 30px;
}
.details {
display: flex;
justify-content: flex-start;
align-items: center;
gap: 6px;
}
.details > label:first-child {
width: 25%;
display: flex;
justify-content: flex-end;
}
.details > input#date {
margin-right: 30px;
}
.details > input:first-child {
margin-left: calc(25% + 6px);
padding: 3px 6px;
}
<form>
<div class="details">
<label for="email">E-mail:</label>
<input type="email" id="email" name="email" />
</div>
<div class="details">
<label for="tel">Telephone Number:</label>
<input type="tel" id="tel" name="tel" />
</div>
<div class="details">
<label for="position">Position:</label>
<input type="text" id="position" name="position" />
<input type="radio" name="availability" id="Part-Time" value="Part-Time" />
<label for="radio">Part-Time</label>
<input type="radio" name="availability" id="Full-Time" value="Full-Time" />
<label for="radio">Full-Time</label>
</div>
<div class="details">
<label for="date">Date:</label>
<input type="date" id="date" name="date" />
<input type="checkbox" name="AM" id="AM" value="AM" />
<label for="checkbox">AM</label>
<input type="checkbox" name="PM" id="PM" value="PM" />
<label for="radio">PM</label>
</div>
<div class="details">
<label for="yearsofexperience">Years of Experience:</label>
<input type="text" id="yearsofexperience" name="yearsofexperience" />
</div>
<div class="details"></div>
<div class="details">
<label for="experience">Experience:</label>
<textarea name="experience" id="experience" rows="1" cols="20">
Worked 5 years at Bayshore Veterinarian Services</textarea
>
</div>
<div class="details">
<input type="submit" value="Apply Now" />
</div>
</form>
The code is not working well at all. Where is the problem?
I want the Required Fields to show an error message when I click the Submit button (if there is no value in the checkbox). But if there is a value in the requested field, the error message will be hidden.
It's not working at all. I want to fix this by keeping my HTML structure straight.
$('form.trexcterc').on('submit', function () {
$('.checkbox_required').parent().next('.error').remove();
if (!$('.checkbox_required input[required')){
if (!$('.checkbox_required input:checkbox').is(':checked') || !$('.checkbox_required input:radio').is(':checked')) {
$(".checkbox_required").parent().after("<span class='error'>error message..</span>");
}
}
});
.trexcterc {
width: 100%;
margin: 0 auto;
padding: 0 30px;
}
.form_item label {
width: 100%;
}
.checkbox_heading {
margin: 0;
}
.checkbox_item{
display: flex;
margin: 15px 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form class="trexcterc">
<div class="form_item" id="form_item_checkbox" data-type="checkbox-group">
<!-- Checkbox Group 1 -->
<label for="after_shot" class="checkbox_heading">After Shot<span class="required_sign">*</span></label>
<div class="checkbox-group checkbox-inline checkbox_required ">
<div class="checkbox_item">
<input type="checkbox" name="checkbox-one" id="checkbox-one" class="" value="Item One" required="required" />
<label for="checkbox-one"><span class="check_mark"></span>Item One</label>
</div>
<div class="checkbox_item">
<input type="checkbox" name="checkbox-two" id="checkbox-two" class="" value="Item Two" required="required" />
<label for="checkbox-two"><span class="check_mark"></span>Item One</label>
</div>
<div class="checkbox_item">
<input type="checkbox" name="checkbox-three" id="checkbox-three" class="" value="Item Three" required="required" />
<label for="checkbox-three"><span class="check_mark"></span>Item One</label>
</div>
</div>
<!-- Checkbox Group 2 -->
<div class="checkbox-group checkbox-inline checkbox_required ">
<label for="after_shot" class="checkbox_heading">Before Shot<span class="required_sign">*</span></label>
<div class="checkbox_item">
<input type="checkbox" name="checkbox-item-one" id="checkbox-item-one" class="" value="Item One" required="required" />
<label for="checkbox-one"><span class="check_mark"></span>Item One</label>
</div>
<div class="checkbox_item">
<input type="checkbox" name="checkbox-two" id="checkbox-two" class="" value="Item Two" required="required" />
<label for="checkbox-two"><span class="check_mark"></span>Item One</label>
</div>
</div>
</div>
<input type="submit" name="submit" value="submit" />
</form>
Main issue is that the native required attribute is preventing form submission, so your submit event listener isn't triggered. Instead you can use a simple click event listener.
Another issue is that you need to iterate over each input.
$('button').on('click', function() {
$('.error').remove();
$('.checkbox_required input[required]').each((i, el) => {
if (!el.checked) {
$(el).closest(".checkbox_item").after("<span class='error'>error message..</span>");
}
});
});
.trexcterc {
width: 100%;
margin: 0 auto;
padding: 0 30px;
}
.form_item label {
width: 100%;
}
.checkbox_heading {
margin: 0;
}
.checkbox_item {
display: flex;
margin: 15px 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form class="trexcterc">
<div class="form_item" id="form_item_checkbox" data-type="checkbox-group">
<!-- Checkbox Group 1 -->
<label for="after_shot" class="checkbox_heading">After Shot<span class="required_sign">*</span></label>
<div class="checkbox-group checkbox-inline checkbox_required ">
<div class="checkbox_item">
<input type="checkbox" name="checkbox-one" id="checkbox-one" class="" value="Item One" required="required" />
<label for="checkbox-one"><span class="check_mark"></span>Item One</label>
</div>
<div class="checkbox_item">
<input type="checkbox" name="checkbox-two" id="checkbox-two" class="" value="Item Two" required="required" />
<label for="checkbox-two"><span class="check_mark"></span>Item One</label>
</div>
<div class="checkbox_item">
<input type="checkbox" name="checkbox-three" id="checkbox-three" class="" value="Item Three" required="required" />
<label for="checkbox-three"><span class="check_mark"></span>Item One</label>
</div>
</div>
<!-- Checkbox Group 2 -->
<div class="checkbox-group checkbox-inline checkbox_required ">
<label for="after_shot" class="checkbox_heading">Before Shot<span class="required_sign">*</span></label>
<div class="checkbox_item">
<input type="checkbox" name="checkbox-item-one" id="checkbox-item-one" class="" value="Item One" required="required" />
<label for="checkbox-one"><span class="check_mark"></span>Item One</label>
</div>
<div class="checkbox_item">
<input type="checkbox" name="checkbox-two" id="checkbox-two" class="" value="Item Two" required="required" />
<label for="checkbox-two"><span class="check_mark"></span>Item One</label>
</div>
</div>
</div>
<button type="submit" name="submit">submit</button>
</form>
Also note that conditions like this: if (!$('.checkbox_required input[required')) doesn't work in jQuery, since selectors always returns a jQuery object. You need to use .length to check if element exists. You also have a missing ] there, it should be
if (!$('.checkbox_required input[required]').length)
I want the checkboxes to be parallel to each other and the text to be aligned the same.
This is what i have (i'm new to this):
<input type="checkbox" name=”liste1” value="1">This is Example1<br>
<input type="checkbox" name=”liste1” value="2">Example2<br>
<input type="checkbox" name=”liste1” value="3">Example123456<br>
<input type="checkbox" name=”liste1”` value="4">Option4<br>
This is how it looks like
When a parent element is allowed to display: flex, each child element will be aligned vertically when the align-item: center is declared
div {
display: flex;
gap: 3px;
align-items: center
}
<div>
<input type="checkbox" id="liste1" name="liste1" value="1">
<label for="liste1"> Option 1</label>
</div>
<div>
<input type="checkbox" id="liste2" name="liste2" value="2">
<label for="liste2"> Option 2</label>
</div>
<div>
<input type="checkbox" id="liste3" name="liste3" value="3">
<label for="liste3"> Option 3</label>
</div>
<div>
<input type="checkbox" id="liste4" name="liste4" value="4">
<label for="liste4"> Option 4</label>
</div>
To start with, we'll correct the original version of the code:
” is not a valid quote to use in HTML, you should use either " or '
If an HTML tag doesn't have a closing tag (e.g. <p>content</p>) then it is referred to as self-closing, and should have a slash before the closing angle bracket, like this: <input />
This gives us:
<input type="checkbox" name="liste1" value="1" />This is Example1<br />
<input type="checkbox" name="liste1" value="2" />Example2<br />
<input type="checkbox" name="liste1" value="3" />Example123456<br />
<input type="checkbox" name="liste1" value="4" />Option4<br />
This is enough to get it to look right, however generally if you want to show text next to a checkbox, you want it to be clickable and affect the checkbox. The simplest way to do this is to wrap the input and it's label text inside a <label> element, like so:
label {
display: block;
}
input,
span {
vertical-align: middle;
}
<label>
<input type="checkbox" name="liste1" value="1" />
<span>This is Example1</span>
</label>
<label>
<input type="checkbox" name="liste1" value="2" />
<span>Example2</span>
</label>
<label>
<input type="checkbox" name="liste1" value="3" />
<span>Example123456</span>
</label>
<label>
<input type="checkbox" name="liste1" value="4" />
<span>Option4</span>
</label>
(I also used a small CSS rule instead of the <br /> tag, as it's generally preferable to use CSS for layout)
your picture says column but your question says row. Which one do you want?
#container {
display: flex;
flex-direction:column;
gap: 13px;
align-items: center
}
#container2 {
display: flex;
margin-top:20vw;
gap: 83px;
justify-content:center;
}
<div id='container'>
<div>
<input type="checkbox" id="liste1" name="liste1" value="1">
<label for="liste1"> Option 1</label>
</div>
<div>
<input type="checkbox" id="liste2" name="liste2" value="2">
<label for="liste2"> Option 2 xxx</label>
</div>
<div>
<input type="checkbox" id="liste3" name="liste3" value="3">
<label for="liste3"> Option 3 xxx xxx</label>
</div>
<div>
<input type="checkbox" id="liste4" name="liste4" value="4">
<label for="liste4"> Option 4 xxx</label>
</div>
</div>
<div id='container2'>
<div>
<input type="checkbox" id="liste1" name="liste1" value="1">
<label for="liste1"> Option 1</label>
</div>
<div>
<input type="checkbox" id="liste2" name="liste2" value="2">
<label for="liste2"> Option 2</label>
</div>
<div>
<input type="checkbox" id="liste3" name="liste3" value="3">
<label for="liste3"> Option 3</label>
</div>
<div>
<input type="checkbox" id="liste4" name="liste4" value="4">
<label for="liste4"> Option 4</label>
</div>
</div>
I tried this solution but it didn't work, any advice how it can be achieved?
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="form-row">
<div class="col-4">
<p>Signing on behalf of</p>
<label class="radio-inline" style="">
<input type="radio" name="optradio" checked="true" style="padding-left:15px;">A Company
</label>
<label class="radio-inline" style="padding-left:15px;">
<input type="radio" name="optradio" style="padding-left:15px;">An Individual
</label>
</div>
</div>
JSfiddle
input tag don't have closing tag, second wrap label inside span
and give it a margin
label span{
display:inline-block;
margin-left: 10px;
}
<div class="form-row">
<div class="col-4">
<p>Signing on behalf of</p>
<label class="radio-inline" style="">
<input type="radio" name="optradio" checked="true" style="padding-left:15px;"><span>A Company</span>
</label>
<label class="radio-inline" style="padding-left:15px;">
<input type="radio" name="optradio" style="padding-left:15px;"><span>An Individual</span>
</label>
</div>
</div>
Edit: You can just separate the input and label and link them using an 'id' on the input and a 'for' attribute on the label. Then you can style your label to add the spacing.
<input id="company" type="radio" name="optradio" checked="true" /><span ></span><label for="company" class="radio-inline" style="padding-left:15px;"> A Company
</label>
Insted padding-left use margin-right. And don't use closing </input> tag, it is auto closing like <input />
.radio-class {
margin-right: 15px;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="form-row">
<div class="col-4">
<p>Signing on behalf of</p>
<label class="radio-inline" style="">
<input type="radio" name="optradio" checked="true" class="radio-class" />A Company
</label>
<label class="radio-inline" style="padding-left:15px;">
<input type="radio" name="optradio" class="radio-class" />An Individual
</label>
</div>
</div>
Taking off from Mr Belugin's idea above. This bit of css will add a right margin to all radio buttons. This solution required no additional class added to the many radio buttons in my form.
It basically adds a 4px right margin to all radio buttons.
input[type=radio] { margin-right:4px; }
I am trying to get my gender button to align with my radio image buttons this is the codes have so far. It gives me the text above the button. Thank you in advance
<div class="genderalign">
<p>Choose:</p>
<input type="radio" name="option" value="1" id="choose-1" />
<label for="choose-1">
<img src="/images/femaleC.png" />
</label>
<input type="radio" name="option" value="2" id="choose-2" />
<label for="choose-2">
<img src="/images/maleC.png" />
</label>
</div>
I've corrected the misplaced </div> so your HTML is now like this.
Then just apply flexbox
.genderalign {
display: flex;
align-items: center;
}
<div>
<div class="genderalign">
<p>Choose:</p>
<input type="radio" name="option" value="1" id="choose-1" />
<label for="choose-1">
<img src="/images/femaleC.png"/>
</label>
<input type="radio" name="option" value="2" id="choose-2" />
<label for="choose-2">
<img src="/images/maleC.png" />
</label>
</div>
</div>