We Keep Coding

How to create checkbox inside the form group selection HTML Javascript?

Currently, I have 200+ countries list in my database. I want to create a checkbox for the countries selection. Even I already put the html type as a checkbox, the checkbox still doesn't exist in my selection form. How to create checkbox actually?
HTML :
<div class="row">
<div class="col-md-12">
<div class="form-group">
<label>Country</label>
<select class="form-control" name="country_id[]" multiple size="10" style="height: 100%;">
#foreach ($countries as $item)
<option value="{{$item->id}}" selected>{{$item->name}}</option>
#endforeach
</select>
</div>
</div>
</div>

You cannot place checkbox inside select element but you can get the same functionality by using HTML, CSS and JavaScript.
var expanded = false;
function showCheckboxes() {
var checkboxes = document.getElementById("checkboxes");
if (!expanded) {
checkboxes.style.display = "block";
expanded = true;
} else {
checkboxes.style.display = "none";
expanded = false;
}
}
.multiselect {
width: 200px;
}
.selectBox {
position: relative;
}
.selectBox select {
width: 100%;
font-weight: bold;
}
.overSelect {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
#checkboxes {
display: none;
border: 1px #dadada solid;
}
#checkboxes label {
display: block;
}
#checkboxes label:hover {
background-color: #1e90ff;
}
<form>
<div class="multiselect">
<div class="selectBox" onclick="showCheckboxes()">
<select>
<option>Select an option</option>
</select>
<div class="overSelect"></div>
</div>
<div id="checkboxes">
<label for="one">
<input type="checkbox" id="one" />First checkbox</label>
<label for="two">
<input type="checkbox" id="two" />Second checkbox</label>
<label for="three">
<input type="checkbox" id="three" />Third checkbox</label>
</div>
</div>
</form>
Also you can use Bootstrap Multiselect plugin.

Dropdown with Radio button and jQuery

I coded a dropdown menu with radio button to change currency in my website. I use jQuery to open/close this dropdown but the currency change doesn't work.
The expanded class is used to open/close the dropdown menu.
I think that the error comes from the line $('#' + $(e.target).attr('for')).prop('checked', true); but I don't know how to modify this. I want it to check the right input.
$('.maincar__currency').click(function(e) {
e.preventDefault();
e.stopPropagation();
$(this).toggleClass('expanded');
$('#' + $(e.target).attr('for')).prop('checked', true);
});
$(document).click(function() {
$('.maincar__currency').removeClass('expanded');
});
.maincar__currency {
display: flex;
flex-direction: column;
min-height: 32px;
max-height: 32px;
margin-left: auto;
margin-bottom: 10px;
overflow: hidden;
border-radius: 6px;
box-sizing: border-box;
box-shadow: $shadowBox;
font-size: 14px;
font-weight: 500;
}
.maincar__currency label {
display: flex;
width: 80px;
height: 32px;
padding-top: 6px;
padding-bottom: 6px;
padding-left: 8px;
margin-right: 0 auto;
background-color: #fff;
text-align: center;
color: $mediumMainGrey;
cursor: pointer;
//box-sizing: border-box;
}
.maincar__currency label:hover {
background-color: $extraLightGrey;
}
.currency {
display: flex;
width: 100%;
}
.currency input {
display: none;
}
.currency img {
//object-fit: contain;
height: 20px;
width: auto;
margin-right: 6px;
}
.currency span {
display: flex;
//align-items: center;
color: $mediumMainGrey;
text-decoration: none;
}
.expanded {
max-height: 128px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="maincar__currency">
<label for="euro-radio-is">
<div class="currency currency__euro">
<img src="/assets/images/icons/euro.png" alt="Euro sign">
<input type="radio" name="currency-is" value="euro" id="euro-radio-is" class="euro_radio_is" checked="true">
<span class="default">EUR</span>
</div>
</label>
<label for="dollar-radio-is">
<div class="currency currency__dollar">
<img src="/assets/images/icons/dollar.png" alt="Dollar sign">
<input type="radio" name="currency-is" id="dollar-radio-is" class="dollar_radio_is" value="dollar">
<span>USD</span>
</div>
</label>
<label for="gbp-radio-is">
<div class="currency currency__pound">
<img src="/assets/images/icons/pound-sterling.png" alt="Pound sign">
<input type="radio" name="currency-is" id="gbp-radio-is" class="gbp_radio_is" value="gbp">
<span>GBP</span>
</div>
</label>
<label for="chf-radio-is">
<div class="currency currency__chf">
<img src="/assets/images/icons/swiss-franc.png" alt="Swiss franc sign">
<input type="radio" name="currency-is" id="chf-radio-is" class="chf_radio_is" value="chf">
<span>CHF</span>
</div>
</label>
</div>

Try to use below code:-
$(document).ready(function(){
$("input[type='radio']").click(function(){
var radioValue = $("input[name='currency-is']:checked").val();
if(radioValue){
alert("Your are a - " + radioValue);
}
});
});
You'll get the radio button value. Let me know if this helps you...

CSS (add these extra classes):
.maincar__currency label{
display: none;
}
.expanded label{
display: block;
}
JS & Html:
$('.maincar__currency').click(function(e) {
e.preventDefault();
e.stopPropagation();
$(this).toggleClass('expanded');
});
$(".maincar__currency label").click(function(){
$('#' + $(this).attr('for')).prop('checked', true);
var selected = $('input[name=currency-is]:checked').val(); // <-- add this line
$('.active_currency').text(selected.toUpperCase()); // <-- and this line
alert(selected);
});
$(document).click(function() {
$('.maincar__currency').removeClass('expanded');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="maincar__currency">
<div class="active_currency">EUR</div>
<label for="euro-radio-is">
<div class="currency currency__euro">
<img src="/assets/images/icons/euro.png" alt="Euro sign">
<input type="radio" name="currency-is" value="euro" id="euro-radio-is" class="euro_radio_is" checked="true" />
<span class="default">EUR</span>
</div>
</label>
<label for="dollar-radio-is">
<div class="currency currency__dollar">
<img src="/assets/images/icons/dollar.png" alt="Dollar sign">
<input type="radio" name="currency-is" id="dollar-radio-is" class="dollar_radio_is" value="dollar" />
<span>USD</span>
</div>
</label>
<label for="gbp-radio-is">
<div class="currency currency__pound">
<img src="/assets/images/icons/pound-sterling.png" alt="Pound sign">
<input type="radio" name="currency-is" id="gbp-radio-is" class="gbp_radio_is" value="gbp" />
<span>GBP</span>
</div>
</label>
<label for="chf-radio-is">
<div class="currency currency__chf">
<img src="/assets/images/icons/swiss-franc.png" alt="Swiss franc sign">
<input type="radio" name="currency-is" id="chf-radio-is" class="chf_radio_is" value="chf" />
<span>CHF</span>
</div>
</label>
</div>

Jquery - Contact field interaction

Hey guys I'm trying to create contect filed interaction. When we click on any field that label text should go up.I tried but didn't work and also attched my code for more clarity. Can you guys help me? Thanks:)
$('.form-grid').keyup(function() {
if ($(this).val()) {
$(this).addClass('active');
} else {
$(this).removeClass('active');
}
});
.form-grid {
max-width: 200px;
position: relative;
margin-bottom: 25px;
}
.form-grid input,
.form-grid textarea {
height: 50px;
width: 100%;
border: none;
border-bottom: 1px solid #000000;
}
.form-grid label {
position: absolute;
top: 0;
left: 0;
margin: 0;
}
.form-grid.active label {
top: -15px;
}
<div class="form-grid">
<input type="text">
<label> Name </label>
</div>
<div class="form-grid">
<input type="email">
<label> Email </label>
</div>
<div class="form-grid">
<input type="tel">
<label> Phone </label>
</div>
<div class="form-grid">
<textarea></textarea>
<label> Message </label>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>

That is because the $(this) element in your code actually refers to the div.form-grid node, which does not have a value attached to it. What you want is to select the nested input/textarea element, i.e. $(this).find('input, textarea').first().val():
$('.form-grid').keyup(function() {
if ($(this).find('input, textarea').first().val()) {
$(this).addClass('active');
} else {
$(this).removeClass('active');
}
});
See proof-of-concept below:
$('.form-grid').keyup(function() {
if ($(this).find('input, textarea').first().val()) {
$(this).addClass('active');
} else {
$(this).removeClass('active');
}
});
.form-grid {
max-width: 200px;
position: relative;
margin-bottom: 25px;
}
.form-grid input,
.form-grid textarea {
height: 50px;
width: 100%;
border: none;
border-bottom: 1px solid #000000;
}
.form-grid label {
position: absolute;
top: 0;
left: 0;
margin: 0;
}
.form-grid.active label {
top: -15px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-grid">
<input type="text">
<label> Name </label>
</div>
<div class="form-grid">
<input type="email">
<label> Email </label>
</div>
<div class="form-grid">
<input type="tel">
<label> Phone </label>
</div>
<div class="form-grid">
<textarea></textarea>
<label> Message </label>
</div>
However, I would suggest not binding the keyup event listener to the wrapping div.form-grid. What you can do, is to bind the input event listener to the input element inside div.form-grid, and then simply toggle the class on the parent element instead:
$('.form-grid input, .form-grid textarea').on('input', function() {
var $formGrid = $(this).closest('.form-grid');
if (this.value)
$formGrid.addClass('active');
else
$formGrid.removeClass('active');
});
.form-grid {
max-width: 200px;
position: relative;
margin-bottom: 25px;
}
.form-grid input,
.form-grid textarea {
height: 50px;
width: 100%;
border: none;
border-bottom: 1px solid #000000;
}
.form-grid label {
position: absolute;
top: 0;
left: 0;
margin: 0;
}
.form-grid.active label {
top: -15px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-grid">
<input type="text">
<label> Name </label>
</div>
<div class="form-grid">
<input type="email">
<label> Email </label>
</div>
<div class="form-grid">
<input type="tel">
<label> Phone </label>
</div>
<div class="form-grid">
<textarea></textarea>
<label> Message </label>
</div>

Try this method, its working fine.
$('.form-grid').on("input", function() {
$('.form-grid').removeClass('active');
$(this).addClass('active');
});

Add class respect to each input for handling lable tag
<div class="form-grid">
<textarea></textarea>
<label for="text_input"> Message </label>
</div>
In script keyup function
$('label[for="text_input"]').hide()
Try it.

Multiselect checkboxes value show on button vanilla js

I have created a multi-select ui component where i have to push selected values to an array and show the same in a button value. I am getting the selected values in alert box but not able to get it in button.
Please help me to show the selected items values as button value as soon as the checkbox clicked.
Snippet:
function getCheckedCheckboxesFor(checkboxName) {
var checkboxes = document.querySelectorAll('input[name="' + checkboxName + '"]:checked'),
values = [];
Array.prototype.forEach.call(checkboxes, function(el) {
values.push(el.value);
});
return values;
}
.check-multiple {
display: inline-block;
height: 60px;
overflow-y: scroll;
border: 1px solid gray;
}
.check-multiple input {
float: left;
}
.check-multiple label {
display: inline-block;
}
.check-multiple span {
display: inline-block;
width: 100%;
}
.check-multiple input:checked~span {
background: #03f;
color: white;
}
<div class="check-multiple">
<label for="veh"><input value="car" type="checkbox" name="veh"><span>car</span></label>
<label for="veh"><input value="scooter" type="checkbox" name="veh"><span>scooter</span></label>
<label for="veh"><input value="bus" type="checkbox" name="veh"><span>bus</span></label>
</div>
<input type="button" onclick="alert(getCheckedCheckboxesFor('veh'));" value="Get Values" />

After reading your comments,
here is probably what you want to achieve:
// Added this:
var checkboxes = document.querySelectorAll('input[type=checkbox]');
checkboxes.forEach(function(chkbx) {
chkbx.onchange = function() {
document.getElementById("button").value = getCheckedCheckboxesFor(chkbx.name);
}
})
// Simplified a little this:
function getCheckedCheckboxesFor(name) {
var checkeds = document.querySelectorAll('input[name="' + name + '"]:checked'),
values = [];
checkeds.forEach(function(chkd) {
values.push(chkd.value);
});
return values;
}
.check-multiple {
display: inline-block;
height: 60px;
overflow-y: scroll;
border: 1px solid gray;
}
.check-multiple input {
float: left;
}
.check-multiple label {
display: inline-block;
}
.check-multiple span {
display: inline-block;
width: 100%;
}
.check-multiple input:checked~span {
background: #03f;
color: white;
}
<div class="check-multiple">
<label for="veh"><input value="car" type="checkbox" name="veh"><span>car</span></label>
<label for="veh"><input value="scooter" type="checkbox" name="veh"><span>scooter</span></label>
<label for="veh"><input value="bus" type="checkbox" name="veh"><span>bus</span></label>
</div>
<input id="button" type="button" onclick="alert(getCheckedCheckboxesFor('veh'));" value="Get Values" />
⋅
⋅
⋅
Then, as you MUST want to use this code on multiple elements, I did the following:
As you should avoid inline JavaScript, I removed the function call from the HTML,
I added a data attribute on the buttons, and some other forEach() to work with multiple elements,
I added a 'None selected' when you tick and then untick something. (I didn't like having an empty button),
I've also added the disabled property when 'None selected', just because we can.
Here is a working snippet with all of it:
// Added this
// Made it for multiples, too!
var checkboxes = document.querySelectorAll('input[type=checkbox]');
var buttons = document.querySelectorAll('input[type=button]');
checkboxes.forEach(function(chkbx, index) {
chkbx.onchange = function() {
var name = chkbx.name;
var button = document.querySelector('input[type=button][data=' + name + ']')
button.value = getCheckedCheckboxesFor(name);
// Added some code to modify button if no checkbox is selected
button.removeAttribute("disabled");
if (button.value == '') {
button.value = 'None selected';
button.setAttribute("disabled", true);
}
}
})
// As you should avoid inline JS, added this too:
buttons.forEach(function(button, index) {
button.onclick = function() {
var name = this.getAttribute('data'); // Get data attribute
alert(getCheckedCheckboxesFor(name));
}
})
// Simplified a little this one:
function getCheckedCheckboxesFor(name) {
var checkeds = document.querySelectorAll('input[name="' + name + '"]:checked'),
values = [];
checkeds.forEach(function(chkd) {
values.push(chkd.value);
});
return values;
}
.check-multiple {
display: inline-block;
height: 60px;
overflow-y: scroll;
border: 1px solid gray;
}
.check-multiple input {
float: left;
}
.check-multiple label {
display: inline-block;
}
.check-multiple span {
display: inline-block;
width: 100%;
}
.check-multiple input:checked~span {
background: #03f;
color: white;
}
<div class="check-multiple">
<label for="veh"><input value="car" type="checkbox" name="veh"><span>car</span></label>
<label for="veh"><input value="scooter" type="checkbox" name="veh"><span>scooter</span></label>
<label for="veh"><input value="bus" type="checkbox" name="veh"><span>bus</span></label>
</div>
<br>
<input data="veh" type="button" value="Select to get values" disabled/>
<br>
<br>
<div class="check-multiple">
<label for="veh"><input value="car" type="checkbox" name="veh2"><span>car</span></label>
<label for="veh"><input value="scooter" type="checkbox" name="veh2"><span>scooter</span></label>
<label for="veh"><input value="bus" type="checkbox" name="veh2"><span>bus</span></label>
</div>
<br>
<input data="veh2" type="button" value="Select to get values" disabled/>
Hope it helps!

Your question is a bit weird formulated, is this what you are trying to accomplish?
EDIT: used onchange event to trigger the changing value of the button text on the checkboxes
function getCheckedCheckboxesFor(checkboxName) {
}
function myFunction(val) {
var checkboxes = document.querySelectorAll('input[name="' + val + '"]:checked'),
values = [];
Array.prototype.forEach.call(checkboxes, function(el) {
values.push(el.value);
});
document.getElementById("demo").value = values;
}
.check-multiple {
display: inline-block;
height: 60px;
overflow-y: scroll;
border: 1px solid gray;
}
.check-multiple input {
float: left;
}
.check-multiple label {
display: inline-block;
}
.check-multiple span {
display: inline-block;
width: 100%;
}
.check-multiple input:checked~span {
background: #03f;
color: white;
}
<div class="check-multiple">
<label for="veh"><input value="car" type="checkbox" name="veh" onchange="myFunction('veh')"><span>car</span></label>
<label for="veh"><input value="scooter" type="checkbox" name="veh" onchange="myFunction('veh')"><span>scooter</span></label>
<label for="veh"><input value="bus" type="checkbox" name="veh" onchange="myFunction('veh')"><span>bus</span></label>
</div>
<input type="button" onclick="alert(getCheckedCheckboxesFor('veh'));" value="Get Values" id="demo" />

Add different class to all radio buttons previous to the checked one

I am trying to add different class to each radio button previous to the checked one. that said, say if I click on button No3 button No1 should get tclass1 and button No2 should get tclass2...and so on if other button is selected.
here is a sample code
<form>
<ul>
<li>
<input id="radio1" type="radio" name="radio[]" value="1">
<label for="radio1">one</label>
</li>
<li>
<input id="radio2" type="radio" name="radio[]" value="2">
<label for="radio2">two</label>
</li>
<li>
<input id="radio3" type="radio" name="radio[]" value="3">
<label for="radio3">three</label>
</li>
<li>
<input id="radio4" type="radio" name="radio[]" value="4">
<label for="radio4">four</label>
</li>
<li>
<input id="radio5" type="radio" name="radio[]" value="5">
<label for="radio5">five</label>
</li>
</ul>
here is the script I use
$(document).ready(function(e) {
$("input[type=radio]").click(function(){
//I use these two lines to clear the last class if exists on each radio button before adding scpecific ones but it does not work
var lastClass = $(this).closest("ul").find("li label").attr('class').split(' ').pop();
$(this).closest("ul").find("li label[class*=tclass]").removeClass(lastClass);
//here I add specific classs to each radio
$(this).closest("li").prevAll("li").each(function(i) {
i++;
$(this).find("label").addClass("tclass" + i);
});
});
});
here is the demo
FIDDLE DEMO
as far as I can see the problem is with deleting classes. any help would be much appreciated :(

If I understand your question correctly, the struggle is with adding and removing dynamic class names on a set of elements.
I'd suggest to use the same method when determining the relevant class name for an element, whether you want to remove or add it.
Check out this approach:
$(document).ready(function(e) {
// Takes a selection index, an element, and the element's index
// Removes or adds a classname to the element's label based on
// comparing its own index to the selection's index.
var modifyClass = function(selectedIndex, element, index) {
var needsClass = index < selectedIndex;
$(element)
.next("label")
.toggleClass("tclass" + (index + 1), needsClass);
}
$("input[type=radio]").click(function() {
var radioBtns = $("input[type=radio]");
var checked = radioBtns.index(this);
var btnArray = radioBtns.toArray();
// For each radio button, check if it needs a class (index < selected index)
// and add or remove the right class name
btnArray.forEach(modifyClass.bind(null, checked));
})
});
form {
max-width: 500px;
margin-top: 25px;
}
form ul li {
display: inline-block;
width: 20%;
text-align: center;
vertical-align: top;
float: left;
position: relative
}
input {
position: relative;
top: 0;
left: 50%;
margin-left: -6px;
display: none;
}
input[type=radio]:checked + label::before {
content: '';
position: absolute;
border-radius: 100%;
left: 50%;
top: 0;
width: 30px;
height: 30px;
margin: -12px 0 0 -15px;
background-color: green;
}
input[type=radio] + label::before {
content: '';
position: absolute;
border-radius: 100%;
left: 50%;
top: 0;
width: 30px;
height: 30px;
margin: -12px 0 0 -15px;
background-color: gray;
}
label {
padding-top: 55px;
}
/*this class should be added*/
input[type=radio] + label.tclass1::before {
background-color: yellow;
}
input[type=radio] + label.tclass2::before {
background-color: orange;
}
input[type=radio] + label.tclass3::before {
background-color: red;
}
input[type=radio] + label.tclass4::before {
background-color: blue;
}
input[type=radio] + label.tclass5::before {
background-color: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<ul>
<li>
<input id="radio1" type="radio" name="radio[]" value="1">
<label class="test" for="radio1">one</label>
</li>
<li>
<input id="radio2" type="radio" name="radio[]" value="2">
<label class="test" for="radio2">two</label>
</li>
<li>
<input id="radio3" type="radio" name="radio[]" value="3">
<label class="test" for="radio3">three</label>
</li>
<li>
<input id="radio4" type="radio" name="radio[]" value="4">
<label class="test" for="radio4">four</label>
</li>
<li>
<input id="radio5" type="radio" name="radio[]" value="5">
<label class="test" for="radio5">five</label>
</li>
</ul>
</form>

Take a look at this,
$(document).ready(function() {
$("input[type=radio]").click(function(){
var counter = 0;
var found = false;
$("input[type=radio]").each(function()
{
counter++;
if(found)
{
$(this).next("label").removeClass("tclass"+counter);
}
else
{
$(this).next("label").toggleClass("tclass"+counter,true);
if($(this).is(':checked'))
{
found = true;
}
}
});
});
});
https://jsfiddle.net/8jct6tfs/14/
I think this is what you want. let me know if something isn't working or isnt what you meant.