I have two forms on the same page with two labels with for attributes pointing to two checkboxes that have the same ID and name.
When I click one of the second form labels it checks the first form checkbox.
In this case the problem lies when you click the 'x name 2' label, it checks the 'x name' check box, even though they are in different forms:
.customCheckbox div label {
padding: 5px;
background-color: white;
border: 2px solid #aaaaaa;
background-image: none;
}
.customCheckbox div input {
margin: 8px auto;
padding: 5px;
text-align: left;
margin-left: -999999px;
float: left;
}
.customCheckbox input[type=checkbox]:checked ~ label,
.customCheckbox input[type=radio]:checked ~ label {
background-color: #117399;
color: #eeeeee;
}
.customCheckbox input[type=radio]:checked ~ label {
background-color: #117399;
color: #eeeeee;
}
<form style="margin:30px;">
<div class="customCheckbox">
<div>
<input id="x" name="x" type="checkbox"/><label for="x">x name</label>
</div>
<br/>
<div>
<input id="y" name="y" type="checkbox"/> <label for="y">y name</label>
</div>
</div>
</form>
<form style="margin:30px;">
<div class="customCheckbox">
<div>
<input id="x" name="x" type="checkbox"/><label for="x">x name 2</label>
</div>
<br/>
<div>
<input id="y" name="y" type="checkbox"/> <label for="y">y name 2</label>
</div>
</div>
</form>
I'd like to stay away from renaming the elements (as there are quite a few places this occurs)
I'd like to try to stay away from JavaScript (if possible)
Since I am using CSS for styling the labels and checkboxes I cannot nest the checkbox inside the label (because you can't style a parent element in CSS)
It is not legal to use the same id property twice on the same page. It does not matter at all if the elements are on the same form or different forms.
They can absolutely have the same name property. Names are what gets sent to your server. You can have fifty elements on the same form with the same name if you want.
But the whole purpose of IDs is that they absolutely must be unique on the page.
So simply make the first one ... id="x1" name="x" ... and the second ... id="x2" name="x" ... and then make your labels point to for="x1" or for="x2"
There's no problem when different input fields have the same name, as long as they're in a different form or they represent the same parameter (eg. in the case of radio buttons).
However, you should NEVER use the same id for different HTML elements.
From the HTML5 specs:
The id attribute specifies its element's unique identifier (ID).
If you make your ids unique, your labels will work as expected.
Related
I need to make 30 different text inputs slightly farther from one another. How could I do this? There are only three below, but I can't just go through and do all 30.
<!DOCTYPE html>
<html>
<head>
<title>Worksheet</title>
<style type="text/css">
.center {
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
}
input::placeholder{
color: #d9faa7;
}
</style>
</head>
<body>
<img src="A.png" class = "center">
<form>
<input type="text" id="fname" name="fname" size="2" style='position:absolute;top:210px;left:389px'>
<input type="text" id="fname" name="fname" size="2" style='position:absolute;top:210px;left:446px'>
<input type="text" id="fname" name="fname" size="2" style='position:absolute;top:210px;left:503px'>
</form>
</body>
</html>
the id should be unique, so better apply the attribute of class with the same name to all input fields, which can be used to style them.
also using loop in JS you can solve this problem.
let form = document.querySelector("form");
let node;
let textInputId;
for(let i=0;i<30;i++)
{
node = document.createElement('input');
textInputId= 'fname'+i;
node.setAttribute('id',textInputId);
node.setAttribute('type',"text");
node.setAttribute('name',"fname");
node.setAttribute('size',"2");
form.appendChild(node);
}
If you are going to be using the input elements to perform a certain action you need to make sure the id and the name of each of these elements are different.
And on the other hand, about making 30 different text inputs you can try using dynamic text input in the event that you want to enter text with the same id and name over and over again. Try researching on looping.
If you want to change the way something appears and just its appearance, just use some simple CSS...
input {
display: block,
margin: 5px,
}
The margin here is 5px, you can change as needed. In the end, you may decide to go with a better selector, i.e., <input type="text" ... class="myinputclass">, then your style selector would be: .myinputclass instead of just input.
I'm trying to set radio buttons for large paragraphs choices with multiple lines.
But how do I make the radio button appear not at the beginning but as I mentioned in the image.
I am able to divide the elements in the list with lines but the radio buttons are actually coming at the beginning of the element just like normal letter in a text. enter image description here
Here is the code that I've tried for list items
<ul>
<span>
<input type="radio" name="pokemon1" required>
<b>AT&T SOUTHWEST</b></br>
<p>Multiple lines text</p>
</div>
</span>
<hr/ style="margin-top:5px; margin-bottom:5px;">
<span>
<input type="radio" name="pokemon1" required>
<b>AT&T SOUTHWEST</b></br>
<p>Multiple lines text</p>
</span>
<hr/ style="margin-top:5px; margin-bottom:5px;">
<span>
<input type="radio" name="pokemon1" required>
<b>AT&T SOUTHWEST</b></br>
<p>Multiple lines text</p>
</span>
<hr/ style="margin-top:5px; margin-bottom:5px;">
<span>
<input type="radio" name="pokemon1" required>
<b>AT&T SOUTHWEST</b></br>
<p>Multiple lines text</p>
</span>
</ul>
Codepen demo
I would first use a more meaningful markup, using a <label for="..."> element, keeping the style off from the markup and removing the <hr> element, like so
<fieldset>
<ul>
<li>
<input type="radio" id="rb1" name="rb" />
<label for="rb1">This label <br>is 3 lines <br />long</label>
</li>
<li>
<input type="radio" id="rb2" name="rb" />
<label for="rb2">This label <br>is 4 <br />lines <br />long</label>
</li>
<li>
<input type="radio" id="rb3" name="rb" />
<label for="rb3">This label <br>is 3 lines <br />long</label>
</li>
</ul>
</fieldset>
since all the radioboxes should belong to a single fieldset and you have a list of radioboxes. The vertical alignment could easily be done using Flexbox on the list-items, by displacing elements by rows and setting a center alignment for the cross-axis
fieldset li {
padding: 20px;
display: flex;
flex-direction: row;
align-items: center;
border-bottom: 1px #ddd solid; }
fieldset label {
cursor: pointer;
margin-left: 30px; }
I believe fcalderan has given the best answer already - he even gave you the CSS.
Just to reiterate his point. You use the label tag to label your inputs. You can then use the 'for' attribute like this: 'for="place-id-of-input-here"' within your label, to point the label to the input. This makes the label clickable (you can click the text as well as clicking the radio button). Also, you can target the two parts of your input separately, the input and the label (like fcalderan has done).
Hope this helps, J.
I want to add a class in the parent wrapper of radio button, I did so , it is working but else statement is not workin
Here is my code
<div class="radio">
<input type="radio" name="name[]" checked>
</div>
<div class="radio">
<input type="radio" name="name[]">
</div>
This is my JS
$(document).ready(function(){
$('input[type="radio"]').on('click',function(){
if($(this).prop('checked')){
$(this).parent().addClass('new')
}
else {
$(this).parent().removeClass('new')
}
});
})
I want to remove the class new when the radio button is not checked, but it is not working.
e.g.
http://codepen.io/amitabha197/pen/KzqvWv
After webeno and mhodges pointed me to the right direction here is my solution.
$('input[type="radio"]').on('change',function(){
$(this).parent().addClass('new').siblings().removeClass('new');
});
Also point to remember, If at all you had been trying to uncheck a single radio button then know this.
You cannot uncheck a radio button. All the clicks you do on it will keep it checked, Use checkbox instead.
Why is it impossible to deselect HTML “radio” inputs?
Unable to uncheck radio button
use this function will solve you problem
$(document).ready(function(){
$('input[type="radio"]').on('change',function(){
$(this).parent().addClass('new');
$('input[type="radio"]').not(this).parent().removeClass('new');
});
});
Edited
For code optimization & modularity.
$(document).ready(function(){
$('input[type="radio"]').on('click',function(){
var name = $(this).attr("name");
$('input[type="radio"][name="'+name+'"]').closest(".radio").removeClass("new");
$(this).closest(".radio").addClass("new");
});
});
You can include <label> element as parent of <input type="radio"> elements at html.
The HTML Label Element (<label>) represents a caption for an item
in a user interface. It can be associated with a control either by
placing the control element inside the <label> element, or by using
the for attribute. Such a control is called the labeled control of
the label element. One input can be associated with multiple labels.
The parent label element will be associated with :checked first child descendant input.
You can style css :after pseudo element compounded to :checked selector to display blue border when input element is :checked.
div.radio {
display: inline-block;
}
label.radio {
display: inline-block;
width: 100px;
border: 1px solid #000;
}
label.radio > :checked:after {
content: "";
position: relative;
display: inline-block;
width: 100px;
height: 20px;
left: -6px;
top: -4px;
border: 1px solid blue;
}
<div class="radio">
<label class="radio">
<input type="radio" id="radio1" name="name[]" checked>
</label>
</div>
<div class="radio">
<label class="radio">
<input type="radio" for="radio2" name="name[]">
</label>
</div>
If requirement is to use existing html, jQuery, you can utilize .click(), .toggleCLass() to add, remove "new" className if descendant input element checked property is false at click event, set input checked property to true
$(document).ready(function() {
var radio = $(".radio");
radio.click(function(e) {
var input = e.target.querySelector("input[type=radio]");
if (!input.checked) {
radio.toggleClass("new");
input.checked = true;
}
})
})
.radio {
display: inline-block;
width: 100px;
border: 1px solid #000;
}
.new {
display: inline-block;
width: 100px;
border: 1px solid blue !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<div class="radio new">
<input type="radio" name="name[]" checked>
</div>
<div class="radio">
<input type="radio" name="name[]">
</div>
I created four text input fields in a single row in a HTML table. Like expected, they show as four separate boxes. I want to make them look like one long field with placehohlders at different positions to indicate the different values. I know that it might look like one field when I have removed the text box borders, but is there some other way?
<form>
<table>
<tr>
<input type="text" id="project" placeholder="project">
<input type="text" id="task" placeholder="task">
<input type="text" id="skill" placeholder="skill">
<input type="text" id="phase" placeholder="phase">
</tr>
</table>
</form>
Remove default margin, display inputs next to each over and style borders to look like on long input :
input{
display:table-cell;
margin:0;
border-width: 1px 0 ;
}
input:first-child{
border-width: 1px 0 1px 1px;
}
input:last-child{
border-width: 1px 1px 1px 0;
}
JSFiddle
<label for="apsgender">
<div class="join-label">Gender</div>
</label>
<fieldset id="gender_male">
<input type="radio" name="apsgender" value="1">
Male
</fieldset>
<fieldset id="gender_female">
<input type="radio" name="apsgender" value="2">
Female
</fieldset>
This is the code I am dealing with right now. Setting up my css with this method I took from another stackoverflow post is not working because of the use of fieldsets and odd label up front.
input[type="radio"] {
display:none;
}
label {
display:block;
padding-left:30px;
font-family:Arial;
font-size:16px;
background: url('http://projects.opengeo.org/common/geosilk/trunk/silk/cross.png') left center no-repeat;
}
input[type="radio"]:checked + label {
background: url('http://particletree.com/examples/buttons/tick.png') left center no-repeat;
}
Our development team set this code up and I guess no one has ever attempted to use images for radio buttons. Also I could use pure JS, if it's possible, but i can only place the scripts in the body before the elements, not after.
Let me know if this is even possible. Thanks in advance.
I'll post the jsFiddle i'm working on but literally it's going no where. http://jsfiddle.net/z25FR/1/
I have a CSS solution for this, but some HTML will need to change.
fiddle
First of all, we need to hide the radio button, because it can't be styled:
input[type="radio"]{
display: none;
}
Then, we make the text near the radio button a label:
<input id="male" type="radio" name="apsgender" value="1">
<label for="male">Male</label>
(don't forget the id and for or you won't have how to check the radio button)
Then, we style the label to look like it's a button:
input[type="radio"]+label{
background: url('http://projects.opengeo.org/common/geosilk/trunk/silk/cross.png') left center no-repeat;
padding-left: 30px;
}
The above code will modify the label directly following the radio button. Then, we can change the background to another image when the radio button is :checked:
input[type="radio"]:checked+label{
background-image: url('http://projects.opengeo.org/common/geosilk/trunk/silk/accept.png');
}
While this may not help, I will mention you're incorrectly coding the HTML. It should be:
<fieldset>
<legend>Gender</legend>
<input type="radio" name="apsgender" id="m" value="1">
<label for="m">Male</label>
<input type="radio" name="apsgender" id="f" value="2">
<label for="f">Female</label>
</fieldset>
I have seen custom radio buttons, but don't have a source. However, depending how it is done may have some accessibility implications
http://jsfiddle.net/nm3uB/1/
You need to use Javascript to rewrite the HTML, and then CSS for the field switching. Everything can go in the head and no need to touch the template.
JS:
window.onload=function(){
gender_male.innerHTML='<input type="radio" name="apsgender" value="1" checked><label>Male</label>';
gender_female.innerHTML='<input type="radio" name="apsgender" value="2"><label>Female</label>';
}
CSS:
fieldset{position:relative}
input[type="radio"]{
opacity: 0;
position:absolute;
}
input[type="radio"]+label{
background: url('http://projects.opengeo.org/common/geosilk/trunk/silk/cross.png') left center no-repeat;
padding-left: 30px;
}
input[type="radio"]:checked+label{
background: url('http://projects.opengeo.org/common/geosilk/trunk/silk/accept.png') left center no-repeat;
padding-left: 30px;
}