Develop Reference

Within a radio-group, how to add and remove class names at radio button parents when checking/unchecking takes place?

I am trying to add a class to the radio button parent element when checked.
The problem is, the class doesn't seem to delete when using removeClass. I can still see the red background when the checkbox is unchecked.
This is what I came up with so far ...
$('input:radio').change(function () {
if($(this).is(':checked')) {
$(this).parent().addClass('selected');
} else {
$(this).parent().removeClass('selected');
}
});
.selected {
background-color: #fff5f5;
color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>Select a maintenance drone:</p>
<div class="">
<input type="radio" id="huey" name="drone" value="huey"
checked>
<label for="huey">Huey</label>
</div>
<div class="">
<input type="radio" id="dewey" name="drone" value="dewey">
<label for="dewey">Dewey</label>
</div>
<div class="">
<input type="radio" id="louie" name="drone" value="louie">
<label for="louie">Louie</label>
</div>
How do I need to change my code in order to achieve the correct behavior?

No need to check else part in the is(':checked') condition.
On click of radio button;
Firstly, perform removeClass() from all radio button.
Then, addClass() only to the respective checked parent element.
$('input:radio').change(function(){
$('input:radio[name=' + this.name + ']').parent().removeClass('selected'); //remove class "selected" from all radio button with respective name
$(this).parent().addClass('selected'); //add "selected" class only to the checked radio button
});
input[type="radio"] + label {
cursor: pointer;
display: block;
height: 40px;
width: 200px;
text-align: center;
line-height: 40px;
}
.selected {
background-color: #fff5f5;
color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<p>Select a maintenance drone:</p>
<div class="">
<input type="radio" id="huey" name="drone" value="huey">
<label for="huey">Huey</label>
</div>
<div class="">
<input type="radio" id="dewey" name="drone" value="dewey">
<label for="dewey">Dewey</label>
</div>
<div class="">
<input type="radio" id="louie" name="drone" value="louie">
<label for="louie">Louie</label>
</div>

First remove all classes of parents, then add class to parent of selected one.
$('input[type=radio]').change(function() {
$('input[type=radio]').each(function() {
$(this).parent().removeClass('selected');
});
$(this).parent().addClass('selected');
});
.selected {
background-color: #fff5f5;
color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>Select a maintenance drone:</p>
<div class="">
<input type="radio" id="huey" name="drone" value="huey" checked>
<label for="huey">Huey</label>
</div>
<div class="">
<input type="radio" id="dewey" name="drone" value="dewey">
<label for="dewey">Dewey</label>
</div>
<div class="">
<input type="radio" id="louie" name="drone" value="louie">
<label for="louie">Louie</label>
</div>

you can solve it with only css
input[type="radio"] ~ label {
cursor: pointer;
display: block;
height: 40px;
width: 200px;
text-align: center;
line-height: 40px;
}
input[type="radio"] {
position: absolute;
}
input[type="radio"]:checked ~ label {
background-color: #fff5f5;
color: red;
}

This is a "fat free, valid HTML and CSS only" variant with a slightly improved semantic structure ...
.radio-group label,
.radio-group .content {
display: block;
position: relative;
}
.radio-group label {
cursor: pointer;
}
.radio-group label:hover {
background-color: #fffbfb;
}
.radio-group .content {
z-index: 0;
padding: 1.3em 8px 8px 24px;
margin: -1.3em 0 0 0;
}
.radio-group .label,
.radio-group [type="radio"] {
position: relative;
z-index: 1;
}
.radio-group [type="radio"] {
top: 1px;
}
.radio-group [type="radio"]:checked ~ span {
color: red;
}
.radio-group [type="radio"]:checked ~ .content {
background-color: #fff5f5;
}
<fieldset class="radio-group">
<legend>Select a maintenance drone:</legend>
<label>
<input type="radio" name="drone" value="huey"/>
<span class="label">Huey</span>
<span class="content">... more phrasing content ...</span>
</label>
<label>
<input type="radio" name="drone" value="dewey"/>
<span class="label">Dewey</span>
<span class="content">... more phrasing content ...</span>
</label>
<label>
<input type="radio" name="drone" value="louie"/>
<span class="label">Louie</span>
<span class="content">... more phrasing content ...</span>
</label>
</fieldset>

This works fine
$('input:radio').change(function(){
$('input:radio').parent().removeClass('selected'); // Remove the class from every element
$(this).parent().addClass('selected'); // Add calss to the clicked element
});
.selected {
background-color: #fff5f5;
color: red;
}
<html>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<div class="">
<input type="radio" id="huey" name="drone" value="huey"
checked />
<label for="huey">Huey</label>
</div>
<div class="">
<input type="radio" id="dewey" name="drone" value="dewey" />
<label for="dewey">Dewey</label>
</div>
<div class="">
<input type="radio" id="louie" name="drone" value="louie" />
<label for="louie">Louie</label>
</div>
</body>

Can't click on other tabs in html tabcontent

Whenever I am on my new profile tab I can't click on my other tabs to go to them. I've included my code below. I can go from my Dashboard tab to New Profile tab fine but not the other way around. I can also go from New Task to New Profile just fine the only exception is when I go out from New Profile to another tab.
document.getElementById("defaultOpen").click();
function openCity(evt, cityName) {
// Declare all variables
var i, tabcontent, tablinks;
// Get all elements with class="tabcontent" and hide them
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
// Get all elements with class="tablinks" and remove the class "active"
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
// Show the current tab, and add an "active" class to the button that opened the tab
document.getElementById(cityName).style.display = "block";
evt.currentTarget.className += " active";
console.log("hello");
}
label {
display: inline-block;
width: 140px;
text-align: right;
}
input {
width: 140px
}
select {
width: 140px;
}
/* Split the screen in half */
.split {
height: 100%;
width: 50%;
position: fixed;
z-index: 1;
top: 0;
overflow-x: hidden;
padding-top: 20px;
}
/* If you want the content centered horizontally and vertically */
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
/* Control the left side */
.left {
left: 0;
/*background-color: #111; */
}
/* Control the right side */
.right {
right: 0;
/*background-color: red; */
}
/* Style the tab */
.tab {
overflow: hidden;
border: 1px solid #ccc;
background-color: #f1f1f1;
position: relative;
clear: both;
}
/* Style the buttons that are used to open the tab content */
.tab button {
background-color: inherit;
float: left;
border: none;
outline: none;
cursor: pointer;
padding: 14px 16px;
transition: 0.3s;
}
/* Change background color of buttons on hover */
.tab button:hover {
background-color: #ddd;
}
/* Create an active/current tablink class */
.tab button.active {
background-color: #ccc;
}
/* Style the tab content */
.tabcontent {
display: none;
padding: 1280px 720px;
border: 1px solid #ccc;
border-top: none;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
</head>
<body>
<!-- For the tab headers-->
<div class="tab">
<button class="tablinks" onclick="openCity(event, 'ProfileTab')">New Profile</button>
<button class="tablinks" onclick="openCity(event, 'TaskTab')" id="defaultOpen">New Task</button>
<button class="tablinks" onclick="openCity(event, 'DashboardTab')">Dashboard</button>
</div>
<div id="ProfileTab" class="tabcontent">
<!-- Shipping and billing details will be on left half of screen. -->
<div class="split left">
<!-- Shipping Details -->
<h1>Shipping Details</h1>
<div class="block">
<label for="firstNameTextFieldShip">First Name:</label>
<input type="text" id="firstNameTextFieldShip" name="firstNameShip">
<label for="lastNameTextFieldShip">Last Name:</label>
<input type="text" id="lastNameTextFieldShip" name="lastNameShip">
</div>
<br>
<div class="block">
<label for="Address1TextFieldShip">Address:</label>
<input type="text" id="Address1TextFieldShip" name="add1txtfieldShip">
<label for="Address2TextField">Address 2:</label>
<input type="text" id="Address2TextFieldShip" name="add2txtfieldShip">
</div>
<br>
<div class="block">
<label for="ZipTextFieldShip">Zip Code:</label>
<input type="text" id="ZipTextFieldShip" name="ziptxtfieldShip">
<label for="CityTextFieldShip">City:</label>
<input type="text" id="CityTextFieldShip" name="citytxtfieldShip">
</div>
<br>
<div class="block">
<label for="CountriesSelectShip">Country:</label>
<select id="CountriesSelectShip">
<option value="USA">USA</option>
</select>
<label for="StateTextFieldShip">State:</label>
<input type="text" id="StateTextFieldShip" name="statetxtfieldShip">
</div>
<!-- Billing Details-->
<h1>Billing Details</h1>
<div class="block">
<label for="firstNameTextFieldBilling">First Name:</label>
<input type="text" id="firstNameTextFieldBilling" name="firstNameBilling">
<label for="lastNameTextFieldBilling">Last Name:</label>
<input type="text" id="lastNameTextFieldBilling" name="lastNameBilling">
</div>
<br>
<div class="block">
<label for="Address1TextFieldBilling">Address:</label>
<input type="text" id="Address1TextFieldBilling" name="add1txtfieldBilling">
<label for="Address2TextFieldBilling">Address 2:</label>
<input type="text" id="Address2TextFieldBilling" name="add2txtfieldBilling">
</div>
<br>
<div class="block">
<label for="ZipTextFieldBilling">Zip Code:</label>
<input type="text" id="ZipTextFieldBilling" name="ziptxtfieldBilling">
<label for="CityTextFieldBilling">City:</label>
<input type="text" id="CityTextFieldBilling" name="citytxtfieldBilling">
</div>
<br>
<div class="block">
<label for="CountriesSelectBilling">Country:</label>
<select id="CountriesSelectBilling">
<option value="USA">USA</option>
</select>
<label for="StateTextFieldBilling">State:</label>
<input type="text" id="StateTextFieldBilling" name="statetxtfieldBilling">
</div>
</div>
<div class="split right">
<h1>Payment Information</h1>
<div class="block">
<label for="ProfileNameTextField">Profile Name:</label>
<input type="text" id="ProfileNameTextField" name="profileNameTextField">
</div>
<br>
<div class="block">
<label for="EmailTextField">Email:</label>
<input type="text" id="EmailTextField" name="emailTextField">
</div>
<br>
<div class="block">
<label for="PhoneNumTextField">Phone Number:</label>
<input type="text" id="PhoneNumTextField" name="PhoneNumTextField">
</div>
<br>
<div class="block">
<label for="NameOnCardTextField">Name On Card:</label>
<input type="text" id="NameOnCardTextField" name="NameOnCardTextField">
</div>
<br>
<div class="block">
<label for="NumOnCardTextField">Number On Card:</label>
<input type="text" id="NumOnCardTextField" name="NumOnCardTextField">
</div>
<br>
<div class="block">
<label for="ExpirationTextField">Expiration Date:</label>
<input type="text" id="ExpirationTextField" name="ExpirationTextField">
</div>
<br>
<div class="block">
<label for="CVVTextField">CVV:</label>
<input type="text" id="CVVTextField" name="CVVTextField">
</div>
<br>
</div>
</div>
<!-- Tasks tab -->
<div id="TaskTab" class="tabcontent">
<h1>hi</h1>
</div>
<!-- Dashboard tab -->
<div id="DashboardTab" class="tabcontent">
</div>
</body>
</html>
Can't click on dashboard or New Task tab after being on New Profile tab

Your Tabs are working as expected. Your container "div id="ProfileTab" class="tabcontent" style="display: block;" is sitting over top of the tabs making it so you can't click them. You just need to fix the positioning of that container so it is not blocking the tabs

Quick answer: remove the padding on .tabcontent and remove the position on .split. Then add float: left; to .split.
The overall issue is the content of the tabcontent was out of document flow causing it to overlap the tabs in the DOM. So, even though it looked like you were clicking the tab, you were actually clicking the tabcontent
The float is a quick fix for displaying things side by side and not really "wrong". The preference now days is to use flexbox. I would recommend looking it up. Here is a guide and a fun game:
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
https://flexboxfroggy.com/

Store - save - fetch/retreive array value (php)

I'm having a hard time of thinking how am I going to save the values taken from the checkbox (came from "modalForm").
I have 2 forms here. My "mainform" and "modalForm".
This codes are similar to my program, I just replace the values.
My program works like this. I have a search bar before this, searching unique id and after searching it, their details will be loaded here.
If you click the textbox, a modal will pop up containing checkboxes. If one checkbox is checked, its label beside it will be the one to be shown on the textbox. When two or more checkbox were checked, a word "multiple" will be shown in the UI.
Value(s) will be inserted/updated to the database.
In my case here, instead of label, value is the one showing on the textbox.
Can you help me how can I store the array that i used into database and how can I fetch their values once it was loaded again.
My working fiddle: https://jsfiddle.net/8bf3vjuk/
I'm having a hard time here because here are two forms.
testing.php
<form method="post" name="mainform" action="">
<label>Sports</label>
<a href="#modal" id="done"> <!-- when the input textbox was clicked, modal will pop up -->
<input disabled type="text" id="test" name="test" placeholder="test" value="">
<input class="hb_button3" type="submit" id="modalbutton" value="save"> <!-- once submit value taken on the checkbox will be save to the system database -->
</a>
</form>
<form method="post" name="modalForm" id="modalForm" action="testing.php">
<div class="modalwrapper" id="modal"> <!-- modal -->
<div class="modalcontainer">
<div class="modalcol1">
<label>Basketball </label>
<input type="checkbox" id="test_modal[]" name="test_modal[]" value="1">
<div class="clear"></div>
<label>Baseball </label>
<input type="checkbox" id="test_modal[]" name="test_modal[]" value="2">
<div class="clear"></div>
<label>Soccer </label>
<input type="checkbox" id="test_modal[]" name="test_modal[]" value="3">
<div class="clear"></div>
<label>Volleyball </label>
<input type="checkbox" id="test_modal[]" name="test_modal[]" value="4">
<div class="clear"></div>
<label>DOTA :)</label>
<input type="checkbox" id="test_modal[]" name="test_modal[]" value="5">
<div class="clear"></div>
<div class="savebutton">
<input class="btn1" id="submit" type="submit" value="Submit"/>
</div>
</div>
</div>
<div class="overlay"></div>
</div>
</form>
here is my styles.css
/* modal layout */
.modalwrapper {
top: 0;
left: 0;
opacity: 0;
position: absolute;
visibility: hidden;
box-shadow: 0 3px 7px rgba(0,0,0,.25);
box-sizing: border-box;
transition: all .4s ease-in-out;
-webkit-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
}
.modalwrapper:target {
opacity: 1;
visibility: visible
}
.overlay {
background-color: #000;
background: rgba(0,0,0,.8);
height: 100%;
left: 0;
position: fixed;
top: 0;
width: 100%;
z-index: 1;
}
.modalcontainer {
display: table;
background-color: #777;
position: relative;
z-index: 100;
color: #fff;
padding: 5px;
}
.modalcol1 { display: table-cell; }
.clear { clear: both; }
.modalwrapper input[type=checkbox] {
float: right;
margin-right: 20px;
}
.savebutton input[type=submit] {
float: right;
background-color: maroon;
color: #fff;
border: none;
padding: 5px 10px;
margin-top: 5px;
margin-right: 20px;
}
/* modal layout ends here */
my javascript code
$(document).ready(function(){
$("#done").click(function(e) {
// alert('ok');
$("#modal").fadeIn();
// e.preventDefault();
});
$("#submit").click(function(e) {
var checked = [];
i=0;
temp=""
$("input[name='test_modal[]']:checked").each(function ()
{ temp=$(this).val();
i++;
checked.push($(this).val());
});
if (i==1)
$("#test").val(temp);
else if (i>1)
$("#test").val('multiple');
else if (i==0)
$("#test").val('nothing');
$("#modal").fadeOut();
// alert($("#do").val())
e.preventDefault();
});
});
Hope you can help me guys. If you guys can suggest to replace my javascript by using any php statement like if condition, I will try to test it.
Many thanks.

Close Modal after Submit button / Count all the values of checked checkbox

I am new in php, html5 and css. Hope you can help me with my problem.
I style it using css. Here are my codes:
<form method="post" name="testform" action="">
<a href="#modal"> <!-- when the input textbox was clicked, modal will pop up -->
<input disabled type="text" name="test" placeholder="test" value="">
</a>
<div class="modalwrapper" id="modal"> <!-- modal -->
<div class="modalcontainer">
<div class="modalcol1">
<label>Test 1</label>
<input type="checkbox" name="test_modal[]" value="1">
<div class="clear"></div>
<label>Test 2</label>
<input type="checkbox" name="test_modal[]" value="2">
<div class="clear"></div>
<label>Test 3</label>
<input type="checkbox" name="test_modal[]" value="3">
<div class="clear"></div>
<label>Test 4</label>
<input type="checkbox" name="test_modal[]" value="4">
<div class="clear"></div>
<label>Test 5</label>
<input type="checkbox" name="test_modal[]" value="5">
<div class="clear"></div>
<div class="savebutton">
<input class="btn1" type="submit" value="Submit"/>
</div>
</div>
</div>
<div class="overlay"></div>
</div>
</form>
Here is my css code for it.
/* modal layout */
.modalwrapper {
top: 0;
left: 0;
opacity: 0;
position: absolute;
visibility: hidden;
box-shadow: 0 3px 7px rgba(0,0,0,.25);
box-sizing: border-box;
transition: all .4s ease-in-out;
-webkit-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
}
.modalwrapper:target {
opacity: 1;
visibility: visible
}
.overlay {
background-color: #000;
background: rgba(0,0,0,.8);
height: 100%;
left: 0;
position: fixed;
top: 0;
width: 100%;
z-index: 1;
}
.modalcontainer {
display: table;
background-color: #777;
position: relative;
z-index: 100;
color: #fff;
padding: 5px;
}
.modalcol1 { display: table-cell; }
.clear { clear: both; }
.modalwrapper input[type=checkbox] {
float: right;
margin-right: 20px;
}
.savebutton input[type=submit] {
float: right;
background-color: maroon;
color: #fff;
border: none;
padding: 5px 10px;
margin-top: 5px;
margin-right: 20px;
}
/* modal layout ends here */
My problem is that when i clicked submit, it doesn't close the modal.
I try redirecting it on the parent window but nothing happens, it doesn't close.
I also have another question concerning how to count how many checkbox were checked using PHP. If 1 checkbox was checked, it will display the value of it and if more than 2 were checked it will echo a value "MORE"
Hope anyone can help me please.
If my information are not enough, please let me know so i can update it.
I want to learn more. Thanks in advance.

Make sure you actually follow the proper html format of Bootstrap modals. Pay attention to data and role attributes. Note how buttons that close modal have those attributes.
<div class="modal fade" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title">Modal title</h4>
</div>
<div class="modal-body">
<p>One fine body…</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
https://getbootstrap.com/javascript/#modals

To open and close your modal you have to use JS. I recommend you to use the jQuery library (Check out this article to learn how to use jQuery in your JS). With that, you can simply close the modal with .fadeOut():
$("#idofyourbutton").click(function(){ $("#idofyourmodal").fadeOut(); });
To count all your checked checkboxes, you can use i.e. this:
var l = $("input[type='checkbox']:checked").length;
After that, you can use if else to set the content of your input-field.

Position dropdown-menu right under menu header

I am trying to position my dropdown-menu right under my menu header like in following image. At best I get it to position right next to it, but is it possible to achieve my objective?
Here my FIDDLE ... FIDDLE
Please see the example in my FIDDLE/BOOTPLY which shows the result of my code correctly. In SA its not right, sorry about that.
My code...
$(".btn_clear").on('click', function (e) {
e.stopPropagation();
$(this).closest('.dropdown-menu').find('input[type="checkbox"]').prop('checked', false);
});
$('.dropdown-menu').click(function(e) {
e.stopPropagation();
});
$(".products .checkbox").on("click", function(e) {
var i = $("li").index( $(this).parent() );
console.log(i);
$('.products .btn_clear').css('background', 'blue');
$('.products .btn_apply').css('background', 'green');
});
$(".availability .checkbox").on("click", function(e) {
var i = $("li").index( $(this).parent() );
console.log(i);
$('.availability .btn_clear').css('background', 'blue');
$('.availability .btn_apply').css('background', 'green');
});
.scrollable-menu {
height: auto;
max-height: 200px;
overflow-x: hidden;
}
.checkbox :hover {
background-color:red;
cursor:pointer;
}
.div_form :hover {
background-color:green;
cursor:pointer;
}
.btn_clear {
float: right;
display: inline-block;
box-sizing: border-box;
width: 50%;
padding: 10px 29px;
text-align: center;
background-color:grey
}
.btn_apply {
float: left;
display: inline-block;
box-sizing: border-box;
width: 50%;
padding: 10px 17px;
text-align: center;
background-color:yellow
}
.checkbox label, .radio label {
min-height: 20px;
padding-left: 30px;
padding-right:30px;
margin-bottom: 0;
font-weight: 400;
cursor: pointer;
width: 100%;
}
.div_form {
position: absolute;
bottom: 0;
bottom: -70px
}
.btn {
border-radius:0;
margin-top:5px
}
.dropdown-menu {
border-radius:0;
border:5px solid blue;
position: relative;
background-color: red;
border-top-width: 0px;
}
.typeahead {
width:90%;
margin-left:10px
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-beta1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/js/bootstrap.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/css/bootstrap.css" rel="stylesheet"/>
<div class="btn-toolbar">
<!--Default buttons with dropdown menu-->
<div class="btn-group">
<button class="btn btn-primary" type="button">Products</button>
<button class="btn btn-primary dropdown-toggle" data-toggle="dropdown" type="button"><span class="caret"></span></button>
<div class="dropdown-menu products" style="margin-left: 2em">
<div style="position: relative;">
<div class=" scrollable-menu" style="margin-bottom: 70px;">
<input class="countries" placeholder="Countries" type="text"> <div class="checkbox">
<label><input value="" type="checkbox"> Alpha</label>
</div>
<div class="checkbox">
<label><input value="" type="checkbox"> Beta
</label>
</div>
<div class="checkbox">
<label><input value="" type="checkbox"> Gamma</label>
</div>
<div class="checkbox">
<label><input value="" type="checkbox"> Delta</label>
</div>
<div class="checkbox">
<label><input value="" type="checkbox"> Omega</label>
</div>
<div class="checkbox">
<label><input value="" type="checkbox"> Koppa
</label>
</div>
<div class="div_form">
<span class="btn_apply">Apply</span> <span class="btn_clear">Clear</span>
</div>
</div>
</div>
</div>
</div><!--Success buttons with dropdown menu-->
<div class="btn-group">
<button class="btn btn-primary" type="button">Availability</button>
<button class="btn btn-primary dropdown-toggle" data-toggle="dropdown" type="button"><span class="caret"></span></button>
<div class="dropdown-menu availability" style="margin-left: 2em">
<div style="position: relative;">
<div class=" scrollable-menu" style="margin-bottom: 70px;">
<input class="typeahead" placeholder="Search values" type="text"> <div class="checkbox">
<label><input value="" type="checkbox"> One</label>
</div>
<div class="checkbox">
<label><input value="" type="checkbox"> Two
</label>
</div>
<div class="checkbox">
<label><input value="" type="checkbox"> Nine</label>
</div>
<div class="checkbox">
<label><input value="" type="checkbox"> Eight</label>
</div>
<div class="checkbox">
<label><input value="" type="checkbox"> Seven</label>
</div>
<div class="checkbox">
<label><input value="" type="checkbox"> Fifteen
</label>
</div>
<div class="div_form">
<span class="btn_apply">Apply</span> <span class="btn_clear">Clear</span>
</div>
</div>
</div>
</div>
</div><!--Warning buttons with dropdown menu-->
</div>

Here you go, I removed the JavaScript and removed the left margin and relative positioning from the dropdown menu: http://www.bootply.com/KaP7SiUYVw
.scrollable-menu {
height: auto;
max-height: 200px;
overflow-x: hidden;
}
.checkbox:hover {
background-color: red;
cursor: pointer;
}
.div_form:hover {
background-color: green;
cursor: pointer;
}
.btn_clear {
float: right;
display: inline-block;
box-sizing: border-box;
width: 50%;
padding: 10px 29px;
text-align: center;
background-color: grey
}
.btn_apply {
float: left;
display: inline-block;
box-sizing: border-box;
width: 50%;
padding: 10px 17px;
text-align: center;
background-color: yellow
}
.checkbox label,
.radio label {
min-height: 20px;
padding-left: 30px;
padding-right: 30px;
margin-bottom: 0;
font-weight: 400;
cursor: pointer;
width: 100%;
}
.div_form {
position: absolute;
bottom: 0;
bottom: -70px
}
.btn {
border-radius: 0;
margin-top: 5px
}
.dropdown-menu {
border-radius: 0;
border: 5px solid blue;
background-color: red;
border-top-width: 0px;
}
.typeahead {
width: 90%;
margin-left: 10px
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="btn-toolbar">
<!--Default buttons with dropdown menu-->
<div class="btn-group">
<button class="btn btn-primary" type="button">Products</button>
<button class="btn btn-primary dropdown-toggle" data-toggle="dropdown" type="button"><span class="caret"></span>
</button>
<div class="dropdown-menu products">
<div style="position: relative;">
<div class=" scrollable-menu" style="margin-bottom: 70px;">
<input class="countries" placeholder="Countries" type="text">
<div class="checkbox">
<label>
<input value="" type="checkbox">Alpha</label>
</div>
<div class="checkbox">
<label>
<input value="" type="checkbox">Beta
</label>
</div>
<div class="checkbox">
<label>
<input value="" type="checkbox">Gamma</label>
</div>
<div class="checkbox">
<label>
<input value="" type="checkbox">Delta</label>
</div>
<div class="checkbox">
<label>
<input value="" type="checkbox">Omega</label>
</div>
<div class="checkbox">
<label>
<input value="" type="checkbox">Koppa
</label>
</div>
<div class="div_form">
<span class="btn_apply">Apply</span> <span class="btn_clear">Clear</span>
</div>
</div>
</div>
</div>
</div>
<!--Success buttons with dropdown menu-->
<div class="btn-group">
<button class="btn btn-primary" type="button">Availability</button>
<button class="btn btn-primary dropdown-toggle" data-toggle="dropdown" type="button"><span class="caret"></span>
</button>
<div class="dropdown-menu availability">
<div style="position: relative;">
<div class=" scrollable-menu" style="margin-bottom: 70px;">
<input class="typeahead" placeholder="Search values" type="text">
<div class="checkbox">
<label>
<input value="" type="checkbox">One</label>
</div>
<div class="checkbox">
<label>
<input value="" type="checkbox">Two
</label>
</div>
<div class="checkbox">
<label>
<input value="" type="checkbox">Nine</label>
</div>
<div class="checkbox">
<label>
<input value="" type="checkbox">Eight</label>
</div>
<div class="checkbox">
<label>
<input value="" type="checkbox">Seven</label>
</div>
<div class="checkbox">
<label>
<input value="" type="checkbox">Fifteen
</label>
</div>
<div class="div_form">
<span class="btn_apply">Apply</span> <span class="btn_clear">Clear</span>
</div>
</div>
</div>
</div>
</div>
<!--Warning buttons with dropdown menu-->
</div>