I am trying to build a radio survey question with 5 square radio buttons, but I am having trouble getting it to change color while the radio is checked or focused
I am also using Vue so it is recommended to put the input inside the label
https://codepen.io/phongoli0/pen/qBbXmoe?editors=1100
.squareRadios {
margin: 10px;
}
.squareRadios input[type="radio"] {
opacity: 0;
position: fixed;
width: 0;
}
.squareRadios label {
display: inline-block;
background-color: #ddd;
padding: 10px 20px;
font-family: sans-serif, Arial;
font-size: 16px;
border: 2px solid #444;
border-radius: 4px;
}
.squareRadios label:hover {
background-color: red;
}
.squareRadios input[type="radio"]:focus+label {
border: 2px dashed green;
}
.squareRadios input[type="radio"]:checked+label {
background-color: blue;
border-color: #4c4;
}
<div class="squareRadios">
<label>
0
<input type="radio" value="0" /></label>
<label>
1
<input type="radio" value="1" /></label>
<label>
2
<input type="radio" value="2" /></label>
<label>
3
<input type="radio" value="3" /></label>
<label>
4
<input type="radio" value="4" /></label>
<label>
5
<input type="radio" value="5" /></label>
</div>
This is because you have the <input type="radio"> inside your <label>, not next to it and the :focus property has to be on the <label> not on the <input type="radio"> radio which is hidden.
The dashed green border on :focus disappears after clicking on the label because the input will hold the :focus after clicking on it.
Here a working live Codepen (case: input and label are siblings)
.squareRadios {
margin: 10px;
}
.squareRadios input[type="radio"] {
opacity: 0;
position: fixed;
width: 0;
}
.squareRadios label {
display: inline-block;
background-color: #ddd;
padding: 10px 20px;
font-family: sans-serif, Arial;
font-size: 16px;
border: 2px solid #444;
border-radius: 4px;
}
.squareRadios label:hover {
background-color: red;
}
.squareRadios input[type="radio"]:checked + label {
background-color: blue;
border-color: #4c4;
}
.squareRadios label:focus {
border: 2px dashed green;
outline: none;
}
<div class="squareRadios">
<input id="radio0" type="radio" value="0" name="squareradios" />
<label tabindex="1" for="radio0">
0
</label>
<input id="radio1" type="radio" value="1" name="squareradios" />
<label tabindex="1" for="radio1">
1
</label>
<input id="radio2" type="radio" value="2" name="squareradios" />
<label tabindex="1" for="radio2">
2
</label>
<input id="radio3" type="radio" value="3" name="squareradios" />
<label tabindex="1" for="radio3">
3
</label>
<input id="radio4" type="radio" value="4" name="squareradios" />
<label tabindex="1" for="radio4">
4
</label>
<input id="radio5" type="radio" value="5" name="squareradios" />
<label tabindex="1" for="radio5">
5
</label>
</div>
EDIT
New Request:
I am also using Vue so it is recommended to put the input inside the label.
I would use JavaScript to handle this situation: toggle a class (I used a class called "checked") on the label to add the style.
var labels = document.querySelectorAll("label");
for (var i = 0; i < labels.length; i++) {
labels[i].addEventListener(
"click",
function (e) {
e.preventDefault();
e.stopPropagation();
if (this.classList.contains("checked")) {
this.classList.remove("checked");
this.firstElementChild.checked = false;
} else {
var checked = document.querySelector("label.checked");
if (checked) {
checked.classList.remove("checked");
checked.firstElementChild.checked = false;
}
this.classList.add("checked");
this.firstElementChild.checked = true;
}
},
false
);
}
.squareRadios {
margin: 10px;
}
.squareRadios input[type="radio"] {
opacity: 0;
position: fixed;
width: 0;
}
.squareRadios label {
display: inline-block;
background-color: #ddd;
padding: 10px 20px;
font-family: sans-serif, Arial;
font-size: 16px;
border: 2px solid #444;
border-radius: 4px;
}
.squareRadios label:hover {
background-color: red;
}
.squareRadios label.checked {
background-color: blue;
border-color: #4c4;
}
.squareRadios label:focus {
border: 2px dashed green;
outline: none;
}
<div class="squareRadios">
<label tabindex="1">
0
<input name="squareradios" type="radio" value="0" />
</label>
<label tabindex="1">
1
<input name="squareradios" type="radio" value="1" />
</label>
<label tabindex="1">
2
<input name="squareradios" type="radio" value="2" />
</label>
<label tabindex="1">
3
<input name="squareradios" type="radio" value="3" />
</label>
<label tabindex="1">
4
<input name="squareradios" type="radio" value="4" />
</label>
<label tabindex="1">
5
<input name="squareradios" type="radio" value="5" />
</label>
</div>
Here a working live Codepen (case: input is inside label)
I know there are several answers already but this is exactly what you're looking for:
.squareRadios {
margin: 10px;
}
.squareRadios input[type="radio"] {
opacity: 0;
position: absolute;
width: 100%;
height: 100%;
}
.squareRadios input[type="radio"]:checked + label {
background: red;
}
.squareRadios label {
display: inline-block;
background-color: #ddd;
padding: 10px 20px;
font-family: sans-serif, Arial;
font-size: 16px;
border: 2px solid #444;
border-radius: 4px;
}
.squareRadios label:hover {
background-color: red;
}
.squareRadios input[type="radio"]:focus + label {
border: 2px dashed green;
}
.squareRadios input[type="radio"]:checked + label {
background-color: blue;
border-color: #4c4;
}
<div class="squareRadios">
<input type="radio" value="0" name="my_radios"/>
<label>0</label>
<input type="radio" value="1" name="my_radios"/>
<label>1</label>
<input type="radio" value="2" name="my_radios"/>
<label>2</label>
<input type="radio" value="3" name="my_radios"/>
<label>3</label>
<input type="radio" value="4" name="my_radios">
<label>4</label>
<input type="radio" value="5" name="my_radios"/>
<label>5</label>
</div>
Now here's what I've changed to make things work:
Like everybody else says, you'll need to put the input and label next to each other.
I changed the styling of the radio buttons. I made them absolute instead of fixed and gave them a 100% width and height so they are clickable and fill out the whole label.
I gave each radio button a name so they would be grouped to gether and actually work like radio buttons (only 1 button can be selected, not multiple)
First thing is that you are hiding the main circle of radio button, by setting opacity and width to 0, with this the radio button is not be able to checked.
Second thing *+ symbol: It is Adjacent sibling combinator. It combines two sequences of simple selectors having the same parent and the second one must come IMMEDIATELY after the first.
.squareRadios {
margin: 10px;
}
.squareRadios input[type="radio"] {
position: fixed;
}
.squareRadios label {
display: inline-block;
background-color: #ddd;
padding: 10px 20px;
font-family: sans-serif, Arial;
font-size: 16px;
border: 2px solid #444;
border-radius: 4px;
}
.squareRadios label:hover {
background-color: red;
}
.squareRadios input[type="radio"]:focus + label {
border: 2px dashed green;
}
.squareRadios input[type="radio"]:checked + label {
background-color: blue;
border-color: #4c4;
}
<div class="squareRadios">
<input type="radio" value="5" />
<label>5</label>
</div>
So, remove the opacity and width properties with that your radio button can be checked and set label adjacent to input field.
*Source: CSS selector for a checked radio button's label
Labels should be next to its thing, not wrap around it.
Second thing is that you made your radios like this:
opacity: 0;
position: fixed;
width: 0;
If you set your opacity: 1; you see you where not really clicking on anything.
.squareRadios {
margin: 10px;
}
.squareRadios input[type="radio"] {
opacity: 1;
position: fixed;
width: 0;
}
.squareRadios label {
display: inline-block;
background-color: #ddd;
padding: 10px 20px;
font-family: sans-serif, Arial;
font-size: 16px;
border: 2px solid #444;
border-radius: 4px;
}
.squareRadios label:hover {
background-color: red;
}
.squareRadios input[type="radio"]:focus+label {
border: 2px dashed green;
}
.squareRadios input[type="radio"]:checked+label {
background-color: blue;
border-color: #4c4;
}
<div class="squareRadios">
<input type="radio" value="0" />
<label>0</label>
<input type="radio" value="1" checked />
<label> 1</label>
<label>
2
<input type="radio" value="2" /></label>
<label>
3
<input type="radio" value="3" /></label>
<label>
4
<input type="radio" value="4" /></label>
<label>
5
<input type="radio" value="5" /></label>
</div>
Related
I have the following code which I found on codepen and works and looks great!
.switch-field {
display: flex;
margin-bottom: 36px;
overflow: hidden;
}
.switch-field input {
position: absolute !important;
clip: rect(0, 0, 0, 0);
height: 1px;
width: 1px;
border: 0;
overflow: hidden;
}
.switch-field label {
background-color: #e4e4e4;
color: rgba(0, 0, 0, 0.6);
font-size: 14px;
line-height: 1;
text-align: center;
padding: 8px 16px;
margin-right: -1px;
border: 1px solid rgba(0, 0, 0, 0.2);
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.1);
transition: all 0.1s ease-in-out;
}
.switch-field label:hover {
cursor: pointer;
}
.switch-field input:checked + label {
background-color: #a5dc86;
box-shadow: none;
}
.switch-field label:first-of-type {
border-radius: 4px 0 0 4px;
}
.switch-field label:last-of-type {
border-radius: 0 4px 4px 0;
}
<form class="form">
<div class="switch-field">
<input type="radio" id="radio-three" name="switch-two" value="yes" checked/>
<label for="radio-three">One</label>
<input type="radio" id="radio-four" name="switch-two" value="maybe" />
<label for="radio-four">Two</label>
<input type="radio" id="radio-five" name="switch-two" value="no" />
<label for="radio-five">Three</label>
</div>
</form>
But unfortunately my generated HTML is laid out as follows (with the input inside the label):
<form class="form">
<div class="switch-field">
<label for="radio-three">
<input type="radio" id="radio-three" name="switch-two" value="yes" checked/>
One</label>
<label for="radio-four">
<input type="radio" id="radio-four" name="switch-two" value="maybe" />
Two</label>
<label for="radio-five">
<input type="radio" id="radio-five" name="switch-two" value="no" />
Three</label>
</div>
</form>
I am wondering if its possible just with CSS to adapt this class to make it work or if JS is necessary.
.switch-field input:checked + label {
background-color: #a5dc86;
box-shadow: none;
}
Many thanks in advance!
The Only CSS Solution Possible
The pseudo-selector :focus-within. Should an element have any children element that has focus, that parent will have styles applied to it. So a radio button that the user checks will trigger a focus event and in doing so activate the CSS ruleset that has :focus-within which is the label in the following example.
.switch-field label:focus-within {
background-color: #a5dc86;
box-shadow: none;
}
<form class="form">
<div class="switch-field">
<label for="radio-three">
<input type="radio" id="radio-three" name="switch-two" value="yes" checked/>
One</label>
<label for="radio-four">
<input type="radio" id="radio-four" name="switch-two" value="maybe" />
Two</label>
<label for="radio-five">
<input type="radio" id="radio-five" name="switch-two" value="no" />
Three</label>
</div>
</form>
You should use JS.
When input element is inside the label then we do not need id on the element and 'for' attribute on the label, but when it is outside we need it.
<label>
Foo
<input name="foo" type="checkbox" />
</label>
Based on your HTML Code, To alter the styling of the label, would require a selector that affected the parent, which currently isn't possible.
Why? https://css-tricks.com/parent-selectors-in-css/
<input id="foo" name="foo" type="checkbox" />
<label for="foo">Foo</label>
So, to select the label of the :checked input, we need the label to be adjacent, not the parent.
But in your code, HTML's label and input is implicit connecting. So I think the solution is to use JS.
let form = document.querySelector("form");
form.addEventListener("change", (event) => {
let target = event.target;
let targetParent = target.parentElement;
if (
target.type === "radio" &&
targetParent &&
targetParent.tagName.toLowerCase() === "label"
) {
let prior = form.querySelector('label.checked input[name="' + target.name + '"]');
if (prior) {
prior.parentElement.classList.remove("checked");
}
targetParent.classList.add("checked");
}
}, false);
.switch-field {
display: flex;
margin-bottom: 36px;
overflow: hidden;
}
.switch-field input {
position: absolute !important;
clip: rect(0, 0, 0, 0);
height: 1px;
width: 1px;
border: 0;
overflow: hidden;
}
.switch-field label {
background-color: #e4e4e4;
color: rgba(0, 0, 0, 0.6);
font-size: 14px;
line-height: 1;
text-align: center;
padding: 8px 16px;
margin-right: -1px;
border: 1px solid rgba(0, 0, 0, 0.2);
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.1);
transition: all 0.1s ease-in-out;
}
.switch-field label:hover {
cursor: pointer;
}
.switch-field label.checked {
background-color: #a5dc86;
box-shadow: none;
}
.switch-field label:first-of-type {
border-radius: 4px 0 0 4px;
}
.switch-field label:last-of-type {
border-radius: 0 4px 4px 0;
}
<form class="form">
<div class="switch-field">
<label class="checked">
<input type="radio" name="switch-two" value="yes" checked />
One
</label>
<label>
<input type="radio" name="switch-two" value="maybe" />
Two
</label>
<label>
<input type="radio" name="switch-two" value="no" />
Three
</label>
</div>
</form>
Here is example of how you can achieve desired functionality through javascript
var checkboxes = document.querySelectorAll("input[type=radio]");
var labels = document.querySelectorAll("label");
labels[0].classList.add("checkedLabel");
checkboxes.forEach(function(checkbox) {
checkbox.addEventListener('change', function(e) {
Array.from(labels).forEach(function(el) {
el.classList.remove('checkedLabel');
});
this.parentElement.classList.add("checkedLabel");
})
})
.checkedLabel {
background-color: #a5dc86;
box-shadow: none;
}
<form class="form">
<div class="switch-field">
<label for="radio-three">
<input type="radio" id="radio-three" name="switch-two" value="yes" checked/>
One</label>
<label for="radio-four">
<input type="radio" id="radio-four" name="switch-two" value="maybe" />
Two</label>
<label for="radio-five">
<input type="radio" id="radio-five" name="switch-two" value="no" />
Three</label>
</div>
</form>
Yes, replace .switch-field input with .switch-field label input.
A selector of the form x1 x2 x3 ... xn—1 xn (space separated) means xn which is a descendent of xn−1 and so on.
When the user checks multiple checkboxes, form fields should appear according to the checkboxes, example: if flight checkbox had full name last name, when user checked both hotel and flight the full name and last name should be there and other fields should be hidden.
I have tried a toggle method which hides when I check, but I can not select multiple fields and get the common fields together and hide others. also my checkboxes should be aligned horizontally. I should css but it's not working
function toggle(object) {
var input;
var value = object.getAttribute("value");
switch (value) {
case "flight":
input = "input1";
break;
case "hotel":
input = "input2";
break;
case "travel":
input = "input3";
break;
}
var elements = document.getElementsByClassName(input);
for (var i = 0; i < elements.length; i++) {
if (elements[i].style.display == "block") {
elements[i].style.display = "none";
} else {
elements[i].style.display = "block";
}
}
document.getElementsByTagName("button")[0].style.display = "block";
}
.form-style-1 {
max-width: 600px;
padding: 15px 25px;
background: #f4f7f8;
margin: 15px auto;
padding: 20px;
background: #f4f7f8;
border-radius: 18px;
font-family: Calibri, sans-serif;
}
.form-style-1 fieldset {
border-radius: none;
background-color: #f2f2f2;
padding: 20px;
border: 1px solid lightgray;
width: 550px;
margin: auto;
}
.form-style-1 lable {
width: 180px;
float: left;
padding-top: 50px;
}
.form-control {
width: 550px;
padding: 15px 30px;
margin: 8px 0;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
display: inline;
}
output {
height: 30px;
display: block;
padding-top: 20px;
}
.btn {
width: 100%;
background-color: #4CAF50;
padding: 14px 20px;
margin: 8px 0;
border: none;
border-radius: 4px;
cursor: pointer;
}
.btn:hover {
background-color: #45a049;
}
.form-style-1 input[type="text"],
.form-style-1 input[type="date"],
.form-style-1 input[type="datetime"],
.form-style-1 input[type="email"],
.form-style-1 input[type="number"],
.form-style-1 input[type="search"],
.form-style-1 input[type="time"],
.form-style-1 input[type="url"],
.form-style-1 input[type="tel"],
.form-style-1 textarea,
.form-style-1 select {
font-family: Calibri, sans-serif;
background: rgba(255, 0, 0, 0.2);
border: none;
border-radius: 3px;
font-size: 15px;
margin: 0;
outline: 0;
padding: 10px;
width: 50%;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
background-color: #e8eeef;
color: #000000;
-webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.03) inset;
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.03) inset;
margin-bottom: 10px;
}
.form-style-1 input[type="text"]:focus,
.form-style-1 input[type="date"]:focus,
.form-style-1 input[type="datetime"]:focus,
.form-style-1 input[type="email"]:focus,
.form-style-1 input[type="number"]:focus,
.form-style-1 input[type="search"]:focus,
.form-style-1 input[type="time"]:focus,
.form-style-1 input[type="url"]:focus,
.form-style-1 input[type="tel"],
.form-style-1 textarea:focus,
.form-style-1 input {}
}
.form-style-1 select {
-webkit-appearance: menulist-button;
height: 15px;
color: #000000;
text-shadow: 0 1px 0 rgba(0, 0, 0);
background: #d2d9dd;
}
.form-style-1 number {
background: #1abc9c;
color: #000000;
height: 10px;
width: 10px;
display: inline-block;
font-size: 0.8em;
margin-right: 4px;
line-height: 10px;
text-align: center;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.2);
border-radius: 15px 15px 15px 0px;
}
.form-style-1 input[type="submit"],
.form-style-1 input[type="button"] {
position: relative;
display: block;
padding: 15px 29px 15px 29px;
color: #FFF;
margin: 0 auto;
background: #1abc9c;
font-size: 15px;
text-align: center;
line-height: 10%;
font-style: normal;
width: 30%;
border: 1px solid #16a085;
border-width: 1px 1px 3px;
margin-top: 1px;
margin-bottom: 5px;
}
.form-style-1 input[type="submit"]:hover,
.form-style-1 input[type="button"]:hover {
background: #109177;
}
#travel-form label,
textarea {
display: flex;
flex-flow: row nowrap;
justify-content: space-between;
width: 80%;
padding-bottom: 0.1rem;
}
#travel-form input,
select {
margin-left: 1rem;
}
textarea {
display: flex;
flex-flow: row nowrap;
justify-content: space-between;
width: 250%;
padding-bottom: 0.1rem;
}
.common {
margin-bottom: 8px;
}
input[type="text"] {
display: none;
}
button {
display: none;
}
input[type="checkbox"] {
display: inline;
width: 12px;
height: 12px;
padding: 5px;
}
<body>
<div class="form-style-1">
<form action="mailto: ?subject=Travel Pre-approval Form " method="post" enctype="text/plain" id="travel-form" onsubmit="test1()">
<fieldset>
<input type="checkbox" onclick="toggle(this)" id="flight" value="flight"><label for="flight">Flight</label>
<input type="checkbox" onclick="toggle(this)" id="hotel" value="hotel"><label for="hotel">Hotel</label>
<input type="checkbox" onclick="toggle(this)" id="travel" value="travel"><label for="travel">Travel</label>
<label>Full Name: <input type="text" class="input1 common " id="name" placeholder="Full Name as per Passport"></label><br>
<label>Date of travel: <input type="date" class="input1 common " name="num1" id="date of travel"></label>
<label>Date of arrival: <input type="date" class="input1 common" name="num2"></label>
<label>Origin Location: <select name="opt2" id="cost" onchange="calculateTotal()">
<option value="select">select</option>
<option value="Dubai, United Arab Emirates (DXB-Dubai Intl.)">Dubai, United Arab Emirates (DXB-Dubai Intl.)</option>
</select></label>
<label>Destination Location: <select name="op1" id="locations" onchange="calculateTotal()">
<option value="none">none</option>
<option value="Aberdeen, Scotland, UK (ABZ)">Aberdeen, Scotland, UK (ABZ)</option>
</select></label>
<label>Mobile Number(Roaming) <input type="tel" id="phone"></label><br>
<br>
<label>Company Email Address <input type="email" id="email" placeholder="email address"></label><br>
<br>
<label>Passport Number <input type="text" id="passnum" size="5" name="passportnumber"></label>
<br>
<br>
<label>Passport Expiry Date <input type="date" id="passexdate" size="4" name="passportexdate"></label> <br>
<br>
<label>Visa Required <select type="checkbox" name="visarequired">
<option value="Yes">Yes</option>
<option value="No">No</option>
<option value="Don't Know">Don't Know</option>
</select></label>
<br>
<br>
<label>Visa Expiry Date <input type="date" id="visaexdate" name="visa"> </label>
<br>
<br>
<label>Purpose of Travel <input type="text" rows="6" cols="50" name="purpose Of Travel" form="usrform" placeholder="Purpose Of Travel">
</label> <br>
<label>Address Of Place Of Visitrows <input type="text" rows="6" cols="50" name="address" form="usrform" placeholder="Address of the place of Vist">
</label> <br>
<br>
<label>Billable Cost Centre <input type="text" id="billablecostcentre"></label>
<br>
<br>
<label>Billable project code <br> (Select "N/A" otherwise) <input type="text"></label>
<br>
<br>
<textarea rows="4" cols="150" name="comment" form="usrform" placeholder="Comments">
</textarea>
<label>Do you need Ground Transfer <select type="checkbox" namegroundtransfer>
<option>Yes</option>
<option>No</option>
</select></label>
<br>
<div id="totalCost">Total Cost </div><br>
<br>
<br>
<input type="submit" value="Submit">
</fieldset>
</form>
</div>
Check out the following code, it's a bit shortened and generalized CSS only approach of your form, that allows you to toggle form fields conditionally with checkboxes:
.form__field {
display: block;
}
[class*="--checkbox"] {
display: inline-block;
}
[data-conditional] {
display: none;
}
#flight:checked ~ [data-conditional*="flight"] {
display: block;
}
#hotel:checked ~ [data-conditional*="hotel"] {
display: block;
}
#travel:checked ~ [data-conditional*="travel"] {
display: block;
}
<form action="mailto:?subject=Travel Pre-approval Form " method="POST" enctype="text/plain" id="travel-form" onsubmit="test1()">
<input class="form__input form__input--checkbox" type="checkbox" id="flight" />
<label class="form__field form__field--checkbox" for="flight">
<span class="form__label">Flight</span>
</label>
<input class="form__input form__input--checkbox" type="checkbox" id="hotel" />
<label class="form__field form__field--checkbox" for="hotel">
<span class="form__label">Hotel</span>
</label>
<input class="form__input form__input--checkbox" type="checkbox" id="travel" />
<label class="form__field form__field--checkbox" for="travel">
<span class="form__label">Travel</span>
</label>
<label class="form__field form__field--text" data-conditional="flight hotel">
<span class="form__label">Full Name:</span>
<input class="form__input" type="text" placeholder="Full Name as per Passport" />
</label>
<label class="form__field form__field--date" data-conditional="flight hotel">
<span class="form__label">Date of travel:</span>
<input class="form__input" type="date" />
</label>
<label class="form__field form__field--date" data-conditional="flight hotel">
<span class="form__label">Date of arrival:</span>
<input class="form__input" type="date" />
</label>
<label class="form__field form__field--text" data-conditional="flight">
<span class="form__label">For Flight only:</span>
<input class="form__input form__input--text" type="text" />
</label>
<label class="form__field form__field--text" data-conditional="hotel">
<span class="form__label">For Hotel only:</span>
<input class="form__input form__input--text" type="text" />
</label>
<label class="form__field form__field--text" data-conditional="travel">
<span class="form__label">For Travel only:</span>
<input class="form__input form__input--text" type="text" />
</label>
<div class="form__field form__field--submit">
<button type="submit">Submit</button>
</div>
</form>
also my checkboxes should be aligned horizontally
this should be satisfied as well by the above snippet
We basically use checkboxes to toggle form fields based on the data-conditional attribute (you can call it whatever you like) that contains some value(s) we control to show/hide the form fields. The relatively simple secret-sauce part here is the general next sibling selector combined with HTML markup that allows us to use it properly.
I added some more fields that only show up for a single checkbox at the end of the form, to illustrate how the conditional filter works.
I am stuck with this code. I want to change the background color of the li when the respective radio button is selected. Please see attached fiddle for a demo.
Is it possible to do without editing the original html as this is produced by a core file that I don't really want to edit?
.wc-deposits-wrapper .wc-deposits-option li {
padding: .5em 1em;
border: 1px solid #ccc;
box-shadow: 0 1px 1px rgba(0, 0, 0, .1);
border-radius: 4px;
box-sizing: border-box;
width: 49%;
margin: 0;
float: left;
}
.wc-deposits-wrapper .wc-deposits-option {
list-style: none outside;
margin: 0;
padding: 0 0 2px;
overflow: hidden;
font-size: 1em;
line-height: 2em;
}
<div class="wc-deposits-wrapper wc-deposits-optional">
<ul class="wc-deposits-option">
<li>
<input type="radio" name="wc_deposit_option" value="yes" id="wc-
option-pay-deposit">
<label for="wc-option-pay-deposit">
Option 1 </label>
</li>
<li>
<input type="radio" name="wc_deposit_option" value="no" id="wc-option-
pay-full" checked="checked">
<label for="wc-option-pay-full">
Option 2 </label>
</li>
</ul>
</div>
Thanks in advance.
Since #kevin-lewis already mentioned, that there are no parent selectors in css, in order to have a pure css solution, we need to cheat a bit with styling the <label> tag, so that it fills the whole parent <li> element (using absolute positioning) and has the same margins and borders. The only fiddly bit that may not work reliably is the left padding of the styled <label> - it has to take into account the width of the radio button - hence the "magic" 2.6em.
.wc-deposits-wrapper .wc-deposits-option li {
padding: .5em 1em;
border: 1px solid #ccc;
box-shadow: 0 1px 1px rgba(0,0,0,.1);
border-radius: 4px;
box-sizing: border-box;
width: 49%;
margin: 0;
float: left;
position: relative;
}
.wc-deposits-wrapper .wc-deposits-option {
list-style: none outside;
margin: 0;
padding: 0 0 2px;
overflow: hidden;
font-size: 1em;
line-height: 2em;
}
input:checked + label{
display: inline-block;
background-color: DodgerBlue;
height: 100%;
width: 100%;
z-index: -1;
padding: .5em 1em;
padding-left: 2.6em;
border: 1px transparent;
border-radius: 4px;
box-sizing: border-box;
margin: 0;
position: absolute;
top: 0;
left: 0;
}
<div class="wc-deposits-wrapper wc-deposits-optional">
<ul class="wc-deposits-option">
<li>
<input type="radio" name="wc_deposit_option" value="yes" id="wc-option-pay-deposit">
<label for="wc-option-pay-deposit">
Option 1</label>
</li>
<li>
<input type="radio" name="wc_deposit_option" value="no" id="wc-option-pay-full" checked="checked">
<label for="wc-option-pay-full">
Option 2</label>
</li>
</ul>
</div>
I suppose you need to change the color of the parent li. In this case this is how I am doing it.
let imps = Array.from(
document.querySelectorAll(".wc-deposits-option [type='radio']")
);
imps.map((r) => {
r.addEventListener("change", () => action(r));
window.onload = (() => action(r));
});
function action(r){
// this function is called when the window loads & when a radio button is clicked
imps.map( R => {R.parentElement.style.background = "white";})
if (r.checked) {
r.parentElement.style.background = "gold";
}
}
.wc-deposits-wrapper .wc-deposits-option li {
padding: .5em 1em;
border: 1px solid #ccc;
box-shadow: 0 1px 1px rgba(0, 0, 0, .1);
border-radius: 4px;
box-sizing: border-box;
width: 49%;
margin: 0;
float: left;
}
.wc-deposits-wrapper .wc-deposits-option {
list-style: none outside;
margin: 0;
padding: 0 0 2px;
overflow: hidden;
font-size: 1em;
line-height: 2em;
}
<div class="wc-deposits-wrapper wc-deposits-optional">
<ul class="wc-deposits-option">
<li>
<input type="radio" name="wc_deposit_option" value="yes" id="wc-
option-pay-deposit">
<label for="wc-option-pay-deposit">
Option 1 </label>
</li>
<li>
<input type="radio" name="wc_deposit_option" value="no" id="wc-option-
pay-full" checked="checked">
<label for="wc-option-pay-full">
Option 2 </label>
</li>
</ul>
</div>
I hope this is what you need.
UPDATE
Yet an other JavaScript solution is to check the radio when you click the <li>parent. I think this is more UI friendly.
let lis = Array.from(
document.querySelectorAll(".wc-deposits-option li")
);
lis.map((li) => {
li.addEventListener("click", () => action(li));
window.onload = (() => action(li));
});
function action(li){
lis.map((_li) => {_li.style.background = "white"});
let thisRadio = li.querySelector("[type='radio']");
thisRadio.checked = true;
li.style.background = "gold"
}
.wc-deposits-wrapper .wc-deposits-option li {
padding: .5em 1em;
border: 1px solid #ccc;
box-shadow: 0 1px 1px rgba(0, 0, 0, .1);
border-radius: 4px;
box-sizing: border-box;
width: 49%;
margin: 0;
float: left;
}
.wc-deposits-wrapper .wc-deposits-option {
list-style: none outside;
margin: 0;
padding: 0 0 2px;
overflow: hidden;
font-size: 1em;
line-height: 2em;
}
<div class="wc-deposits-wrapper wc-deposits-optional">
<ul class="wc-deposits-option">
<li>
<input type="radio" name="wc_deposit_option" value="yes" id="wc-
option-pay-deposit">
<label for="wc-option-pay-deposit">
Option 1 </label>
</li>
<li>
<input type="radio" name="wc_deposit_option" value="no" id="wc-option-
pay-full" checked="checked">
<label for="wc-option-pay-full">
Option 2 </label>
</li>
</ul>
</div>
Use onclicks for each radio element
<div class="wc-deposits-wrapper wc-deposits-optional">
<ul class="wc-deposits-option">
<li>
<input type="radio" onclick = "toggleBackground(true)" name="wc_deposit_option" value="yes" id="wc-
option-pay-deposit">
<label for="wc-option-pay-deposit">
Option 1 </label>
</li>
<li>
<input type="radio" onclick = "toggleBackground(false)" name="wc_deposit_option" value="no" id="wc-option-
pay-full" checked="checked">
<label for="wc-option-pay-full">
Option 2 </label>
</li>
</ul>
</div>
Then use the following js code:
function toggleBackground(type) {
if(type) {
document.getElementById('wc-option-pay-deposit').style.background = 'color-1';
document.getElementById('wc-option-pay-full').style.background = 'color-2';
} else {
document.getElementById('wc-option-pay-deposit').style.background = 'color-2';
document.getElementById('wc-option-pay-full').style.background = 'color-1';
}
}
Add :checked for radio in css and background-color: #ff0000;
Test
.wc-deposits-wrapper .wc-deposits-option li {
padding: .5em 1em;
border: 1px solid #ccc;
box-shadow: 0 1px 1px rgba(0,0,0,.1);
border-radius: 4px;
box-sizing: border-box;
width: 49%;
margin: 0;
float: left;
}
.wc-deposits-wrapper .wc-deposits-option {
list-style: none outside;
margin: 0;
padding: 0 0 2px;
overflow: hidden;
font-size: 1em;
line-height: 2em;
}
input[type=radio]:checked + label {
background-color: #ff0000;
font-style: normal;
}
input[type=radio] + label {
color: #ccc;
font-style: italic;
}
<div class="wc-deposits-wrapper wc-deposits-optional">
<ul class="wc-deposits-option">
<li>
<input type="radio" name="wc_deposit_option" value="yes" id="wc-option-pay-deposit">
<label for="wc-option-pay-deposit">
Option 1</label>
</li>
<li>
<input type="radio" name="wc_deposit_option" value="no" id="wc-option-pay-full" checked="checked">
<label for="wc-option-pay-full">
Option 2</label>
</li>
</ul>
</div>
Please review solution link below. I used javascript to fixed this problem.
I hope this answer will be helpful for you
https://codepen.io/dev_aman/pen/YOxjpR
Using vanilla JavaScript :
function toggleItem ( input )
{
input.closest( 'li' ).classList.toggle( 'wc-deposits-option-checked' );
}
function toggleOptions ()
{
let
list = document.querySelector( '.wc-deposits-option' ),
checked = list.querySelector( 'input:checked' );
toggleItem( checked );
list.addEventListener( 'input', () => {
let target = event.target;
toggleItem( target );
toggleItem( checked );
checked = target;
});
}
toggleOptions();
.wc-deposits-wrapper .wc-deposits-option li {
padding: .5em 1em;
border: 1px solid #ccc;
box-shadow: 0 1px 1px rgba(0, 0, 0, .1);
border-radius: 4px;
box-sizing: border-box;
width: 49%;
margin: 0;
float: left;
}
.wc-deposits-wrapper .wc-deposits-option {
list-style: none outside;
margin: 0;
padding: 0 0 2px;
overflow: hidden;
font-size: 1em;
line-height: 2em;
}
.wc-deposits-option-checked
{
background-color: #00F;
}
<div class="wc-deposits-wrapper wc-deposits-optional">
<ul class="wc-deposits-option">
<li>
<input type="radio" name="wc_deposit_option" value="yes" id="wc-
option-pay-deposit">
<label for="wc-option-pay-deposit">
Option 1 </label>
</li>
<li>
<input type="radio" name="wc_deposit_option" value="no" id="wc-option-
pay-full" checked="checked">
<label for="wc-option-pay-full">
Option 2 </label>
</li>
</ul>
</div>
i'm trying to create something like this
but i'm not that good with javascript and so..
So i got this now, but i can't get the hover effect to work..
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>The HTML5 Herald</title>
<link rel="stylesheet" href="styles.css">
</head>
<input type="radio" id="radio1" name="radios" value="all" checked>
<label for="radio1">iPhone</label>
<input type="radio" id="radio2" name="radios" value="false">
<label for="radio2">Galaxy S IV</label>
<input type="radio" id="radio3" name="radios" value="true">
<label for="radio3">Nexus S</label>
<body>
</body>
</html>
And CSS
input[type=radio] {
display:none;
margin:10px;
}
input[type=radio] + label {
display:inline-block;
margin: 2px;
padding: 18px 112px;
background-color: white;
border: 1px solid #d6d6d6;
border-radius: 4px;
}
input[type=radio]:checked + label {
background-image: none;
border: 2px solid #08c;
}
Well this works but how do i make a hover effect? Any help would be usefull! Also if you think i should do this completely different please tell me
Just do it with plain CSS.
input[type=radio] {
display: none;
margin: 10px;
}
input[type=radio] + label {
display: inline-block;
margin: 2px;
padding: 18px 112px;
background-color: white;
border: 1px solid #d6d6d6;
border-radius: 4px;
}
input[type=radio] + label:hover {
border: 1px solid black;
background-color: gray;
}
input[type=radio]:checked + label {
background-image: none;
border: 2px solid #08c;
}
<input type="radio" id="radio1" name="radios" value="all" checked>
<label for="radio1">iPhone</label>
<input type="radio" id="radio2" name="radios" value="false">
<label for="radio2">Galaxy S IV</label>
<input type="radio" id="radio3" name="radios" value="true">
<label for="radio3">Nexus S</label>
You could even go more fancy and add some transitions (most browsers support them nowdays http://caniuse.com/#feat=css-transitions)
input[type=radio] {
display: none;
margin: 10px;
}
input[type=radio] + label {
transition: all 0.5s ease;
display: inline-block;
margin: 2px;
padding: 18px 112px;
background-color: white;
border: 1px solid #d6d6d6;
border-radius: 4px;
}
input[type=radio] + label:hover {
border: 1px solid black;
background-color: LightGray;
}
input[type=radio]:checked + label {
background-image: none;
border: 2px solid #08c;
}
<input type="radio" id="radio1" name="radios" value="all" checked>
<label for="radio1">iPhone</label>
<input type="radio" id="radio2" name="radios" value="false">
<label for="radio2">Galaxy S IV</label>
<input type="radio" id="radio3" name="radios" value="true">
<label for="radio3">Nexus S</label>
I am implementing a simple registration form. I want to validate if the user has selected at least one checkbox. All the fields in my form are being validated without page reload except for this one input field. When I try to validate this field, the page reloads and all the values that the user previously entered are lost. I want to prevent this from happening.
function validate() {
var checkbox1 = document.getElementById('three').checked;
var checkbox2 = document.getElementById('four').checked;
var checkbox3 = document.getElementById('five').checked;
var checkbox4 = document.getElementById('six').checked;
if ((checkbox1 || checkbox2 || checkbox3 || checkbox4) == true) {
if (referenceToForm.elements["usrgrp[]"].selectedIndex == -1) {
alert("Please enter all the required values");
}
}
if ((checkbox1 || checkbox2 || checkbox3 || checkbox4) == false) {
if (referenceToForm.elements["usrgrp[]"].selectedIndex == -1) {
alert("Please enter all the required values");
}
}
if ((checkbox1 || checkbox2 || checkbox3 || checkbox4) == false) {
if (referenceToForm.elements["usrgrp[]"].selectedIndex != -1) {
alert("Please enter all the required values");
}
}
if (document.getElementById('values').value == -1) {
alert("Please enter all the required values checkbox");
}
}
#import url("https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css");
#labels{
position: relative;
width: 250px;
float: left;
}
h3{
margin: 0px 0px 20px 0px;
}
#fields{
position: relative;
width: 250px;
float: left;
}
.element{
margin-bottom: 23px;
border: 1px solid #dadada;
border-color: #06a3e9;
box-shadow: 0 0 1px lightblue;
}
.different{
margin-top: 4px;
margin-bottom: 22px;
}
.values{
margin-bottom: 23px;
}
.heading, .feedback{
margin-top: 43px;
}
.preference{
border-color: #06a3e9;
box-shadow: 0 0 1px lightblue;
}
.multiple{
border-color: #06a3e9;
box-shadow: 0 0 1px lightblue;
margin-top: 20px;
}
textarea{
margin-top: 20px;
border: 1px solid #06a3e9;
box-shadow: 0 0 1px lightblue;
}
a{
color: #06a3e9;
}
.final{
margin-top: 15px;
}
.feedback{
margin-top: 73px;
}
#submit, #reset{
border: 1px solid #dadada;
border-color: #06a3e9;
box-shadow: 0 0 1px lightblue;
border-radius:5px;
}
input[type="checkbox"]{
display: none;
}
label:before{
width: 1em;
display: inline-block;
}
label{
margin-right: 5px;
}
input[type="checkbox"] + label:before{
font-family: FontAwesome;
display: inline-block;
content: "\f096";
letter-spacing: 5px;
color: #06a3e9;
display: inline-block;
}
input[type="checkbox"]:checked + label:before{
content:"\f14a";
display: inline-block;
color: #06a3e9;
}
input[type="radio"]{
display: none;
}
input[type="radio"] + label:before{
font-family: FontAwesome;
display: inline-block;
content:"\f10c";
font-size: 14px;
color: #06a3e9;
letter-spacing: 5px;
display: inline-block;
}
input[type="radio"]:checked + label:before{
content:"\f192";
font-size: 14px;
display: inline-block;
}
<!doctype html>
<html>
<head>
<title> Register here </title>
<link rel="stylesheet" href="../css/registration.css"/>
<script src = "../javascript/registration.js"></script>
</head>
<body>
<h1>Event Registration Form</h1>
<div id="labels">
<h3>Username</h3>
<h3>Password</h3>
<h3>Age</h3>
<h3>Email</h3>
<h3>Existing customer?</h3>
<h3>Select your preferences</h3>
<h3>Newsletter Preferences</h3>
<h3 class="heading">Menu Options</h3>
<h3 class="feedback">Send us your feedback !</h3>
</div>
<div id="fields">
<form action="#" method="get" name="referenceToForm">
<input type="text" name="Username" id="Username" class="element"required/>
<input type="password" name="Password" class="element" required/>
<input type="number" name="Age" class="element" required/>
<input type="email" name="Email" class="element" required/>
<div class="different">
<input type="radio" name="customer" id="one" checked="checked" />
<label for="one">Yes</label>
<input type="radio" name="customer" id="two" />
<label for="two">No</label>
</div>
<div class="values">
<input type="checkbox" name="interest" id="three" />
<label for="three">Dog</label>
<input type="checkbox" name="interest" id="four" />
<label for="four">Cat</label>
<input type="checkbox" name="interest" id="five" />
<label for="five">Parrot</label>
<input type="checkbox" name="interest" id="six" />
<label for="six">Possum</label>
<span id="spanning"> </span>
</div>
<select class="preference" id="preference" value="-1">
<option value="Entertainment">Entertainment</option>
<option value="Technology">Technology</option>
<option value="TV">TV</option>
</select>
<div class="menu">
<select multiple required id="multiple" class="multiple" value="-1" name="usrgrp[]">
<option value="Sports">Sports</option>
<option value="Politics">Politics</option>
<option value="News">News</option>
<option value="Swimming">Swimming</option>
<option value="Health">Health</option>
</select>
</div>
<textarea rows="5" cols="20" required></textarea>
<div class="final">
<input type="submit" name="submit" id="submit" onclick="validate()" />
<input type="reset" name="reset" id="reset" />
</div>
</form>
</div>
</body>
</html>
UPDATE
Thanks to everyone who tried to help me with this. Below is the code which solves my problem perfectly.
function validate() {
var checkbox1 = document.getElementById('three').checked;
var checkbox2 = document.getElementById('four').checked;
var checkbox3 = document.getElementById('five').checked;
var checkbox4 = document.getElementById('six').checked;
if ((checkbox1 || checkbox2 || checkbox3 || checkbox4) == false) {
alert("Please enter all the required values");
return false;
}
}
#import url("https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css");
#labels{
position: relative;
width: 250px;
float: left;
}
h3{
margin: 0px 0px 20px 0px;
}
#fields{
position: relative;
width: 250px;
float: left;
}
.element{
margin-bottom: 23px;
border: 1px solid #dadada;
border-color: #06a3e9;
box-shadow: 0 0 1px lightblue;
}
.different{
margin-top: 4px;
margin-bottom: 22px;
}
.values{
margin-bottom: 23px;
}
.heading, .feedback{
margin-top: 43px;
}
.preference{
border-color: #06a3e9;
box-shadow: 0 0 1px lightblue;
}
.multiple{
border-color: #06a3e9;
box-shadow: 0 0 1px lightblue;
margin-top: 20px;
}
textarea{
margin-top: 20px;
border: 1px solid #06a3e9;
box-shadow: 0 0 1px lightblue;
}
a{
color: #06a3e9;
}
.final{
margin-top: 15px;
}
.feedback{
margin-top: 73px;
}
#submit, #reset{
border: 1px solid #dadada;
border-color: #06a3e9;
box-shadow: 0 0 1px lightblue;
border-radius:5px;
}
input[type="checkbox"]{
display: none;
}
label:before{
width: 1em;
display: inline-block;
}
label{
margin-right: 5px;
}
input[type="checkbox"] + label:before{
font-family: FontAwesome;
display: inline-block;
content: "\f096";
letter-spacing: 5px;
color: #06a3e9;
display: inline-block;
}
input[type="checkbox"]:checked + label:before{
content:"\f14a";
display: inline-block;
color: #06a3e9;
}
input[type="radio"]{
display: none;
}
input[type="radio"] + label:before{
font-family: FontAwesome;
display: inline-block;
content:"\f10c";
font-size: 14px;
color: #06a3e9;
letter-spacing: 5px;
display: inline-block;
}
input[type="radio"]:checked + label:before{
content:"\f192";
font-size: 14px;
display: inline-block;
}
<!doctype html>
<html>
<head>
<title> Register here </title>
<link rel="stylesheet" href="../css/registration.css"/>
<script src = "../javascript/registration.js"></script>
</head>
<body>
<h1>Event Registration Form</h1>
<div id="labels">
<h3>Username</h3>
<h3>Password</h3>
<h3>Age</h3>
<h3>Email</h3>
<h3>Existing customer?</h3>
<h3>Select your preferences</h3>
<h3>Newsletter Preferences</h3>
<h3 class="heading">Menu Options</h3>
<h3 class="feedback">Send us your feedback !</h3>
</div>
<div id="fields">
<form action="#" method="get" name="referenceToForm">
<input type="text" name="Username" id="Username" class="element"required/>
<input type="password" name="Password" class="element" required/>
<input type="number" name="Age" class="element" required/>
<input type="email" name="Email" class="element" required/>
<div class="different">
<input type="radio" name="customer" id="one" checked="checked" />
<label for="one">Yes</label>
<input type="radio" name="customer" id="two" />
<label for="two">No</label>
</div>
<div class="values">
<input type="checkbox" name="interest" id="three" />
<label for="three">Dog</label>
<input type="checkbox" name="interest" id="four" />
<label for="four">Cat</label>
<input type="checkbox" name="interest" id="five" />
<label for="five">Parrot</label>
<input type="checkbox" name="interest" id="six" />
<label for="six">Possum</label>
<span id="spanning"> </span>
</div>
<select class="preference" id="preference" value="-1">
<option value="Entertainment">Entertainment</option>
<option value="Technology">Technology</option>
<option value="TV">TV</option>
</select>
<div class="menu">
<select multiple required id="multiple" class="multiple" value="-1" name="usrgrp[]">
<option value="Sports">Sports</option>
<option value="Politics">Politics</option>
<option value="News">News</option>
<option value="Swimming">Swimming</option>
<option value="Health">Health</option>
</select>
</div>
<textarea rows="5" cols="20" required></textarea>
<div class="final">
<input type="submit" name="submit" id="submit" onclick="return validate()" />
<input type="reset" name="reset" id="reset" />
</div>
</form>
</div>
</body>
</html>
I've spotted 2 problems with your form and both are easy to fix.
Your validation function must return either true to submit the form or false to cancel. If you don't supply a return value, as in your code, the form will always be submitted:
<input type="submit" name="submit" id="submit" onclick="validate()" >
To fix this you need to have your validation function return a value which is returned to the onclick handler:
<input type="submit" name="submit" id="submit" onclick="return validate()" >
This line in the validation function throws an error because there are no elements with id="values". You will need to remove or fix this code so that your function completes normally and returns either a true or false value.
if (document.getElementById('values').value == -1) {
alert("Please enter all the required values checkbox");
}
Perhaps someone can comment on this, but I've always seen validation handled in the form onsubmit event rather than the submit button onclick event. Yet, perhaps this is just convention as it appears to work either way:
<form onsubmit="return validate()" ...
<input type="submit" onclick="return validate()" ...
The main thing, if you are using jsFiddle, is to use this method of initializing functions:
window.validate = function() {
and not like this:
function validate() {
Here is my stab at it. No Angular, nor JQuery used, although I recommend learning each of them. I messed up your submit button, but its easily fixed with css. I also added a fake submit button which triggers the verification only. If it passes verification, then it can continue to send. My jsfiddle:
http://jsfiddle.net/omikey/tfk7d3ks/
<div class="container">
<div id="labels">
<h3>Username </h3>
<h3>Password</h3>
<h3>Age</h3>
<h3>Email</h3>
<h3>Existing customer?</h3>
<h3>Select your preferences</h3>
<h3>Newsletter Preferences</h3>
<h3 class="heading">Menu Options</h3>
<h3 class="feedback">Send us your feedback !</h3>
</div>
<div id="fields">
<form action="#" method="get" name="referenceToForm">
<div>
<input type="text" name="Username" id="Username" class="element" required/>
</div>
<div>
<input type="password" name="Password" class="element" required/>
</div>
<div>
<input type="number" name="Age" class="element" required/>
</div>
<div>
<input type="email" name="Email" class="element" required/>
</div>
<div class="different">
<input type="radio" name="customer" id="one" checked="checked" />
<label for="one">Yes</label>
<input type="radio" name="customer" id="two" />
<label for="two">No</label>
</div>
<div class="value">
<input type="checkbox" name="interest" id="three" />
<label for="three">Dog</label>
<input type="checkbox" name="interest" id="four" />
<label for="four">Cat</label>
<input type="checkbox" name="interest" id="five" />
<label for="five">Parrot</label>
<input type="checkbox" name="interest" id="six" />
<label for="six">Possum</label>
<span id="spanning"> </span>
</div>
<div>
<select class="preference" id="preference" value="-1">
<option value="Entertainment">Entertainment</option>
<option value="Technology">Technology</option>
<option value="TV">TV</option>
</select>
</div>
<div class="menu">
<select multiple id="multiple" class="multiple" value="-1" name="usrgrp[]">
<option value="Sports">Sports</option>
<option value="Politics">Politics</option>
<option value="News">News</option>
<option value="Swimming">Swimming</option>
<option value="Health">Health</option>
</select>
<span id="spanElement"> </span>
</div>
<div class="comment">
<textarea rows="5" cols="20" required></textarea>
</div>
<div class="final">
<input type="button" name="verify" onclick="validate()" />
<input type="submit" name="submit" style="display:none" id="submit" />
<input type="reset" name="reset" id="reset" />
</div>
</form>
</div>
</div>
#import url("https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css");
.container{
width: 100%;
margin-left: 400px;
}
#spanning{
color: #06a3e9;
}
.nav ul{
width: 150px;
float: left;
background-color: #dadada;
padding: 0px;
margin: 0px;
}
.nav li{
list-style-type: none;
}
.nav a{
color:#000;
cursor:pointer;
display: block;
line-height: 40px;
text-indent: 10px;
text-decoration: none;
font-weight: bold;
}
.nav ul ul li{
display: none;
}
.nav li:hover ul li{
display: block;
}
.subnav ul{
position: relative;
background: #dadada;
}
#labels{
position: relative;
width: 250px;
top:80px;
float: left;
}
h3{
margin: 0px 0px 20px 0px;
}
#fields{
position: relative;
width: 250px;
top:80px;
float: left;
}
.element{
margin-bottom: 23px;
border: 1px solid #dadada;
border-color: #06a3e9;
box-shadow: 0 0 1px lightblue;
}
.different{
margin-top: 4px;
margin-bottom: 22px;
}
.value{
margin-bottom: 23px;
}
.heading, .feedback{
margin-top: 43px;
}
.preference{
border-color: #06a3e9;
box-shadow: 0 0 1px lightblue;
}
.multiple{
border-color: #06a3e9;
box-shadow: 0 0 1px lightblue;
margin-top: 20px;
}
textarea{
margin-top: 20px;
border: 1px solid #06a3e9;
box-shadow: 0 0 1px lightblue;
}
a{
color: #06a3e9;
}
.final{
margin-top: 15px;
}
.feedback{
margin-top: 73px;
}
#submit, #reset{
border: 1px solid #dadada;
border-color: #06a3e9;
box-shadow: 0 0 1px lightblue;
border-radius:5px;
}
input[type="checkbox"]{
display: none;
}
label:before{
width: 1em;
display: inline-block;
}
label{
margin-right: 5px;
}
input[type="checkbox"] + label:before{
font-family: FontAwesome;
display: inline-block;
content: "\f096";
letter-spacing: 5px;
color: #06a3e9;
display: inline-block;
}
input[type="checkbox"]:checked + label:before{
content:"\f14a";
display: inline-block;
color: #06a3e9;
}
input[type="radio"]{
display: none;
}
input[type="radio"] + label:before{
font-family: FontAwesome;
display: inline-block;
content:"\f10c";
font-size: 14px;
color: #06a3e9;
letter-spacing: 5px;
display: inline-block;
}
input[type="radio"]:checked + label:before{
content:"\f192";
font-size: 14px;
display: inline-block;
}
window.validate = function() {
var valid = true;
var checkbox1 = document.getElementById('three').checked;
var checkbox2 = document.getElementById('four').checked;
var checkbox3 = document.getElementById('five').checked;
var checkbox4 = document.getElementById('six').checked;
if ((checkbox1 || checkbox2 || checkbox3 || checkbox4) == true) {
if (referenceToForm.elements["usrgrp[]"].selectedIndex == -1) {
alert("Please enter all the required values");
valid = false;
}
}
if ((checkbox1 || checkbox2 || checkbox3 || checkbox4) == false) {
if (referenceToForm.elements["usrgrp[]"].selectedIndex == -1) {
alert("Please enter all the required values");
valid = false;
}
}
if ((checkbox1 || checkbox2 || checkbox3 || checkbox4) == false) {
if (referenceToForm.elements["usrgrp[]"].selectedIndex != -1) {
alert("Please enter all the required values");
valid = false;
}
}
if (document.getElementById('multiple').value == -1)
{
alert("Please enter all the required values");
valid = false;
}
if (document.getElementById('preference').value == -1)
{
alert("Please enter all the required values");
valid = false;
}
if (valid)
{
document.getElementById('submit').click();
}
}