I wrote the below code for a booking flight and it works good. when i click on class that called firstadd it will append a new div under page. my problem is the plus and the minus that recently added not work. i want to click on each plus and minus then the value of each textbox change . the same as div with classname : new
here is my snippet :
$(function() {
var createChildDropdown = function(i) {
var $childDropdown = $('<div />', {
'class': 'childs'
});
$childDropdown.append($('<label />', {
'for': 'childDropdown-' + i
}).text('Child ' + i));
$childDropdown.append($('<select />', {
'id': 'childDropdown-' + i
}));
var options = ['a', 'b', 'c'];
options.forEach(function(option, index) {
$childDropdown.find('select').append($('<option />')
.text(option).attr('value', index));
});
return $childDropdown;
};
var destroyChildDropdown = function($el, i) {
$el.find('div.childs').get(i).remove();
};
$(".button-click a").on("click", function() {
var html = '<div class="new">'+
'<label>'+
'<span>Adult</span>'+
'<input type="text" class="travel" id="CAT_Custom_410672" name="CAT_Custom_410672" value="0" />'+
'<ul class="button-group button-click">'+
'<li><i class="fa fa-plus"><span class="hide">+</span></i></li>'+
'<li><i class="fa fa-minus"><span class="hide">-</span></i></li>'+
'</ul>'+
'</label>'+
'<label>'+
'<span>Child</span>'+
'<input type="text" class="travel" id="CAT_Custom_410672" name="CAT_Custom_410672" value="0" />'+
'<ul class="button-group button-click">'+
'<li><i class="fa fa-plus"><span class="hide">+</span></i></li>'+
'<li><i class="fa fa-minus"><span class="hide">-</span></i></li>'+
'</ul>'+
'</label>'+
'</div>';
$("#collectnew").append(html);
var button = $(this);
var oldVal = parseInt(button.closest("ul").prev().val());
var newVal = (button.text() == "+") ? oldVal + 1 : (oldVal > 0) ? oldVal - 1 : 0;
var total_value = "";
button.closest("ul").prev().val(newVal);
$(".travel").each(function() {
var cat = $(this).prev('span').text();
total_value += cat + ": " + $(this).val() + ", ";
});
total_value = total_value.substring(0, total_value.length - 2);
$(".main").val(total_value);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<label>
Count Room
<input type="text" name="no_travellers" class="main" value="Room:1, Adult:1" placeholder="" />
</label>
<br/>
<label>
<span>Room</span>
<input type="text" class="travel" id="CAT_Custom_410672" name="CAT_Custom_410672" value="1" />
<ul class="button-group button-click">
<li><i class="fa fa-plus firstadd"><span class="hide">+</span></i></li>
<li><i class="fa fa-minus firstadd"><span class="hide">-</span></i></li>
</ul>
</label>
<div id="collectnew">
<div class="new" style="border:1px solid red;">
<label>
<span>Adult</span>
<input type="text" class="travel" id="CAT_Custom_410672" name="CAT_Custom_410672" value="0" />
<ul class="button-group button-click">
<li><i class="fa fa-plus"><span class="hide">+</span></i></li>
<li><i class="fa fa-minus"><span class="hide">-</span></i></li>
</ul>
</label>
<label>
<span>Child</span>
<input type="text" class="travel" id="CAT_Custom_410672" name="CAT_Custom_410672" value="0" />
<ul class="button-group button-click-child">
<li><i class="fa fa-plus"><span class="hide">+</span></i></li>
<li><i class="fa fa-minus"><span class="hide">-</span></i></li>
</ul>
</label>
</div>
</div>
<div class="childDropdowns"></div>
$(".button-click a").on("click", function() {}
replace this by
$(document).on("click",".button-click a" ,function() {});
Related
Here is my Html Code
<div>
<input type="checkbox" class="input-checkbox-correct" name="checkCheckbox"
onclick="addRightAnswer();">
<input type="text"
placeholder="Enter your option"
class="form-control-range-number"
id="get-radio-input5"
name="get-radio-input"><input
type="number" class="get-radio-input-number" value="0"
name="get-radio-input"/>
<button type="click" onclick="addMoreOptions(this)"><i
class="fa fa-plus-circle" aria-hidden="true"></i></button>
<button type="click" onclick="removeOptions(this)"><i
class="fa fa-minus-circle" aria-hidden="true"></i></button>
</div>
<div>
<input type="checkbox" class="input-checkbox-correct" name="checkCheckbox"
onclick="addRightAnswer();">
<input type="text"
placeholder="Enter your option"
class="form-control-range-number"
id="get-radio-input5"
name="get-radio-input">
<input
type="number" class="get-radio-input-number" value="0"
name="get-radio-input"/>
<button type="click" onclick="addMoreOptions(this)"><i
class="fa fa-plus-circle" aria-hidden="true"></i></button>
<button type="click" onclick="removeOptions(this)"><i
class="fa fa-minus-circle" aria-hidden="true"></i></button>
</div>
<div>
<input type="checkbox" class="input-checkbox-correct" name="checkCheckbox"
onclick="addRightAnswer();">
<input type="text"
placeholder="Enter your option"
class="form-control-range-number"
id="get-radio-input5"
name="get-radio-input">
<input
type="number" class="get-radio-input-number" value="0"
name="get-radio-input"/>
<button type="click" onclick="addMoreOptions(this)"><i
class="fa fa-plus-circle" aria-hidden="true"></i></button>
<button type="click" onclick="removeOptions(this)"><i
class="fa fa-minus-circle" aria-hidden="true"></i></button>
</div>
<div>
<input type="checkbox" class="input-checkbox-correct" name="checkCheckbox"
onclick="addRightAnswer();">
<input type="text"
placeholder="Enter your option"
class="form-control-range-number"
id="get-radio-input5"
name="get-radio-input">
<input
type="number" class="get-radio-input-number" value="0"
name="get-radio-input"/>
<button type="click" onclick="addMoreOptions(this)"><i
class="fa fa-plus-circle" aria-hidden="true"></i></button>
<button type="click" onclick="removeOptions(this)"><i
class="fa fa-minus-circle" aria-hidden="true"></i></button>
</div>
This is my Javascript Code
function addRightAnswer() {
var getRadioOptionsNumberCheck = document.querySelectorAll('.input-checkbox-correct');
var getRadioInputNumber = document.querySelectorAll('.get-radio-input-number');
getRadioOptionsNumberCheck.forEach(function(current, index) {
current.addEventListener('click', function() {
if (current.checked) {
getRadioInputNumber[index].value = 1; //
}
else
{
getRadioInputNumber[index].value = 0;
}
});
});
}
initially value is 0 after one click value wiill increase by 1 , but in my case everything is working But First click on Checkbox value is not increasing in 2nd click value is increasing
You don't need to add an Event Listener if you already call addRightAnswer() on click.
Right now when you click the checkbox, you add the event listener, which will then modify the input value at the next click.
function addRightAnswer() {
var getRadioOptionsNumberCheck = document.querySelectorAll('.input-checkbox-correct');
var getRadioInputNumber = document.querySelectorAll('.get-radio-input-number');
getRadioOptionsNumberCheck.forEach(function(current, index) {
if (current.checked) {
getRadioInputNumber[index].value = 1; //
} else {
getRadioInputNumber[index].value = 0;
}
});
}
<div><input type="checkbox" class="input-checkbox-correct" name="checkCheckbox" onclick="addRightAnswer();"><input type="text" placeholder="Enter your option" class="form-control-range-number" id="get-radio-input5" name="get-radio-input"><input type="number"
class="get-radio-input-number" value="0" name="get-radio-input" /><button type="click" onclick="addMoreOptions(this)"><i class="fa fa-plus-circle" aria-hidden="true"></i></button><button type="click" onclick="removeOptions(this)"><i class="fa fa-minus-circle" aria-hidden="true"></i></button></div>
I'm trying to make a menu builder like wordpress. I have something like this in the pic. ( https://prnt.sc/podhpu ). I enter a value in the left side then click button "Menü Ekle - eng. Add Menu" But value goes empty.
I tried to transfer the value into a variable called "x". Then on click i tried to send x in value"" but it is not working. I think it needs something like trigger before sending it but i do not know exactly.
HTML Code:
<div class="kt-portlet__body">
<div class="form-group">
<label>URL</label>
<input type="text" class="form-control menu-url" value="" placeholder="Menü başlığını giriniz.">
</div>
<div class="form-group">
<label>Başlık</label>
<input type="text" class="form-control menu-title" value="" placeholder="Menü bağlantı adresini giriniz.">
</div>
Menü Ekle
</div>
Javascript Code:
$(function(){
var x = $('.menu-url').val();
$('#add-menu').on('click', function (e) {
$('#menu').append('<li>\n' +
' <div class="menu-item">\n' +
' <a href="#" class="delete-menu">\n' +
' <i class="fa fa-times"></i>\n' +
' </a>\n' +
' <input type="text" name="title[]" placeholder="Menü Adı">\n' +
' <input type="text" name="url[]" val="'+ x +'" placeholder="Menü Linki">\n' +
' </div>' +
'<div class="sub-menu"><ul></ul></div>\n' +
' Alt Menü Ekle\n' +
' </li>');
e.preventDefault();
});
I want to transfer entered value when i click to "add menu" button.
value is true attribute not val.
and you forget a bracket too.
$(function(){
var x = $('.menu-url').val();
$('#add-menu').on('click', function (e) {
$('#menu').append(
`<li>
<div class="menu-item">
<a href="#" class="delete-menu">
<i class="fa fa-times"></i>
</a>
<input type="text"
name="title[]"
placeholder="Menü Adı">
<input type="text"
name="url[]"
value="${x}"
placeholder="Menü Linki">
</div>' +
<div class="sub-menu"><ul></ul></div>
Alt Menü Ekle </li>`);
e.preventDefault();
})
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" class="menu-url" value="i am here"
placeholder="menu url">
<button id="add-menu">add menu</button>
<div id="menu"></div>
I want the items I add to go under the correct category and only one at a time. But it appears I get products going into the dairy and fruit section at the same time. Can anyone please assist me? Here is my code:
$('#catty').change(function () {
if ($(this).val() == 'Dairy') {
$('#product-info').keydown(function (e) {
if (e.keyCode == 13) {
var add = $('#product-info').val();
$('.dairy-product').append('<li>' + add + '</li>');
}
})
}
});
$('#catty').change(function () {
if ($(this).val() == 'Fruits') {
$('#product-info').keydown(function (e) {
if (e.keyCode == 13) {
var add = $('#product-info').val();
$('.fruit-product').append('<li>' + add + '</li>');
}
})
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="catty" class="form-control" value="Select">
<option hidden >Select Catergory</option>
<option>Dairy</option>
<option>Frozen Foods</option>
<option>Fruits</option>
<option>Vegetables</option>
</select>
<div class="form-group">
<input type="text" class="form-control" id="product-info" placeholder="Item Name">
</div>
<button type="button" id="btn1" class="btn btn-primary">Add Item</button>
</form>
</div>
<div class="panel-group col-xs-12">
<div class="category">
<div class="my-panel parent">
<p class="description" id="dairy">Dairy</p>
<a href="#" class="add-item">
<i class="fa fa-plus-circle" aria-hidden="true"></i>
</a>
</div>
<ol class="dairy-product"></ol>
</div>
<div class="category">
<div class="my-panel parent">
<p class="description" id="fruits">Fruits</p>
<a href="#" class="add-item">
<i class="fa fa-plus-circle" aria-hidden="true"></i>
</a>
</div>
<ol class="fruit-product"></ol>
</div>
$('#product-info').keydown(function(e) {
var selectid = $('#catty option:selected').text().toLowerCase()
if (e.keyCode == 13) {
var add = $('#product-info').val();
$("."+selectid +'-product').append('<li>' + add + '</li>');
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="catty" class="form-control" value="Select">
<option hidden>Select Catergory</option>
<option>Dairy</option>
<option>Frozen Foods</option>
<option>Fruits</option>
<option>Vegetables</option>
</select>
<div class="form-group">
<input type="text" class="form-control" id="product-info" placeholder="Item Name">
</div>
<button type="button" id="btn1" class="btn btn-primary">Add Item</button>
</form>
</div>
<div class="panel-group col-xs-12">
<div class="category">
<div class="my-panel parent">
<p class="description" id="dairy">Dairy</p>
<a href="#" class="add-item">
<i class="fa fa-plus-circle" aria-hidden="true"></i>
</a>
</div>
<ol class="dairy-product"></ol>
</div>
<div class="category">
<div class="my-panel parent">
<p class="description" id="fruits">Fruits</p>
<a href="#" class="add-item">
<i class="fa fa-plus-circle" aria-hidden="true"></i>
</a>
</div>
<ol class="fruits-product"></ol>
</div>
Change OL class from fruit to fruits.
Dont need to call the change function of the select, just get the current selected value then use it as parameter for the enter key.
Make sure to add validation if nothing was selected in select
You have two onchange event handlers for the element with id catty. And also two event handlers for keydown on the same element in those two onchange handlers.
Modify your code, so your handlers are simplified:
$('#product-info').keydown(function(e) {
if (e.keyCode == 13) {
var add = $('#product-info').val();
var value = $("#catty").text();
if(value !== '') {
$('.' + value.toLowerCase() + '-product').append('<li>' + add + '</li>');
}
}
});
I have a booking flight form that takes input of the number of travelers. I created 3 textboxes each taking in number of travelers for Adult, Children and Infant and a main textbox to show the final result in it, however it does not work.
Here is my code snippet:
$(function() {
$(".button-click a").on("click", function() {
var $button = $(this);
var oldValue = $button.closest("ul").prev().val();
if ($button.text() == "+") {
var newVal = parseInt(oldValue) + 1;
} else {
// Don't allow decrementing below zero
if (oldValue > 0) {
var newVal = parseInt(oldValue - 1);
} else {
newVal = 0;
}
}
$button.closest("ul").prev().val(newVal);
var total_value = 0;
$(".cat_textbox").each(function() {
total_value += parseInt($(this).val());
});
$(".main").val(total_value);
})
});
<html>
<head>
<title>Input Number Incrementer</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
</head>
<body>
<label>
Count all1 Traveller(s)
<input type="text" class="main" value="0" placeholder="" />
</label>
<br/>
<br/>
<label>
Adults
<ul class="button-group button-click">
<li><i class="fa fa-plus"><span class="hide">+</span></i>
</li>
<input type="text" class="cat_textbox" id="CAT_Custom_410672" name="CAT_Custom_410672" maxlength="4000" value="0" />
<li><i class="fa fa-minus"><span class="hide">-</span></i>
</li>
</ul>
</label>
<label>
Children
<ul class="button-group button-click">
<li><i class="fa fa-plus"><span class="hide">+</span></i>
</li>
<input type="text" class="cat_textbox" id="CAT_Custom_410672" name="CAT_Custom_410672" maxlength="4000" value="0" />
<li><i class="fa fa-minus"><span class="hide">-</span></i>
</li>
</ul>
</label>
<label>
Infants
<ul class="button-group button-click">
<li><i class="fa fa-plus"><span class="hide">+</span></i>
</li>
<input type="text" class="cat_textbox" id="CAT_Custom_410672" name="CAT_Custom_410672" maxlength="4000" value="0" />
<li><i class="fa fa-minus"><span class="hide">-</span></i>
</li>
</ul>
</label>
</body>
</html>
You can have 2 different handlers for + and - and search input using this
$(function() {
registerEvents();
});
function registerEvents(){
$('.button-group .fa-plus').on('click', function(){
var input = $(this).closest('li').next()
input.val(+input.val() + 1);
updateTravellerCount();
return false;
})
$('.button-group .fa-minus').on('click', function(){
var input = $(this).closest('li').prev()
var val = +input.val() > 0 ? +input.val() - 1 : 0
input.val(val);
updateTravellerCount();
return false;
});
}
function updateTravellerCount(){
var total = 0;
$.each($('.button-group input'), function(){
total += +$(this).val();
});
$('.main').val(total)
}
<html>
<head>
<title>Input Number Incrementer</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
</head>
<body>
<label>
Count all1 Traveller(s)
<input type="text" class="main" value="0" placeholder="" />
</label>
<br/>
<br/>
<label>
Adults
<ul class="button-group button-click">
<li><i class="fa fa-plus"><span class="hide">+</span></i>
</li>
<input type="text" class="cat_textbox" id="CAT_Custom_410672" name="CAT_Custom_410672" maxlength="4000" value="0" />
<li><i class="fa fa-minus"><span class="hide">-</span></i>
</li>
</ul>
</label>
<label>
Children
<ul class="button-group button-click">
<li><i class="fa fa-plus"><span class="hide">+</span></i>
</li>
<input type="text" class="cat_textbox" id="CAT_Custom_410672" name="CAT_Custom_410672" maxlength="4000" value="0" />
<li><i class="fa fa-minus"><span class="hide">-</span></i>
</li>
</ul>
</label>
<label>
Infants
<ul class="button-group button-click">
<li><i class="fa fa-plus"><span class="hide">+</span></i>
</li>
<input type="text" class="cat_textbox" id="CAT_Custom_410672" name="CAT_Custom_410672" maxlength="4000" value="0" />
<li><i class="fa fa-minus"><span class="hide">-</span></i>
</li>
</ul>
</label>
</body>
</html>
I have tried to make it more modular. Not my best attempt but might help JSFiddle
You are using the selector ".button-click a" which should be ".button-click > a"
which would denote an a element with an element with the class button-click as a parent
I have added two different classes to the anchor tags and formatted the jQuery to keep things clean and easy.
Plnkr Demo:
http://plnkr.co/edit/GqOeRWaaAq8BjeQSVDHc?p=preview
Stack Snippet:
$(function() {
$(".button-click a").on("click", function() {
var $button = $(this);
var oldValue = $button.closest("ul").children('input').val();
if ($button.hasClass('plus')) {
var newVal = parseInt(oldValue) +1;
} else {
// Don't allow decrementing below zero
if (oldValue > 0) {
var newVal = parseInt(oldValue - 1);
} else {
newVal = 0;
}
}
$button.closest("ul").children('input').val(newVal)
var total_value = 0;
$(".cat_textbox").each(function(){
total_value += parseInt($(this).val());
});
$(".main").val(total_value);
})
});
<!DOCTYPE html>
<html>
<head>
<script data-require="jquery#3.0.0" data-semver="3.0.0" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js"></script>
</head>
<body>
<label>
Count all1 Traveller(s)
<input class="main" value="0" placeholder="" type="text" />
</label>
<br />
<br />
<label>
Adults
<ul class="button-group button-click">
<li>
<a href="#" class="small button secondary plus">
<i class="fa fa-plus">
<span class="hide">+</span>
</i>
</a>
</li>
<input class="cat_textbox" id="CAT_Custom_410672" name="CAT_Custom_410672" maxlength="4000" value="0" type="text" />
<li>
<a href="#" class="small button secondary minus">
<i class="fa fa-minus">
<span class="hide">-</span>
</i>
</a>
</li>
</ul>
</label>
<label>
Children
<ul class="button-group button-click">
<li>
<a href="#" class="small button secondary plus">
<i class="fa fa-plus">
<span class="hide">+</span>
</i>
</a>
</li>
<input class="cat_textbox" id="CAT_Custom_410672" name="CAT_Custom_410672" maxlength="4000" value="0" type="text" />
<li>
<a href="#" class="small button secondary minus">
<i class="fa fa-minus">
<span class="hide">-</span>
</i>
</a>
</li>
</ul>
</label>
<label>
Infants
<ul class="button-group button-click">
<li>
<a href="#" class="small button secondary plus">
<i class="fa fa-plus">
<span class="hide">+</span>
</i>
</a>
</li>
<input class="cat_textbox" id="CAT_Custom_410672" name="CAT_Custom_410672" maxlength="4000" value="0" type="text" />
<li>
<a href="#" class="small button secondary minus">
<i class="fa fa-minus">
<span class="hide">-</span>
</i>
</a>
</li>
</ul>
</label>
</body>
</html>
Some older browsers may have issues with <input type="number" why don't you try something like this :
<html>
<head>
<title>Input Number Incrementer</title>
</head>
<body>
<label>
Count all1 Traveller(s)
<input type="text" class="main" value="0" placeholder="" />
</label>
<br/><br/>
<label>
Adults
<ul class="button-group button-click">
<li><i class="fa fa-plus"><span class="hide">+</span></i></li>
<input type="text" class="cat_textbox" id="CAT_Custom_410672" name="CAT_Custom_410672" maxlength="4000" value="0" />
<li><i class="fa fa-minus"><span class="hide">-</span></i></li>
</ul>
</label>
<label>
Children
<ul class="button-group button-click">
<li><i class="fa fa-plus"><span class="hide">+</span></i></li>
<input type="text" class="cat_textbox" id="CAT_Custom_410672" name="CAT_Custom_410672" maxlength="4000" value="0" />
<li><i class="fa fa-minus"><span class="hide">-</span></i></li>
</ul>
</label>
<label>
Infants
<ul class="button-group button-click">
<li><i class="fa fa-plus"><span class="hide">+</span></i></li>
<input type="text" class="cat_textbox" id="CAT_Custom_410672" name="CAT_Custom_410672" maxlength="4000" value="0" />
<li><i class="fa fa-minus"><span class="hide">-</span></i></li>
</ul>
</label>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
$(function() {
$(".button-click a").on("click", function() {
var $button = $(this);
var input = $button.closest("ul").find("input");
var oldValue = parseInt(input.val());
var newVal = 0;
var total_value = 0;
if ($button.text() == "+") {
newVal = parseInt(oldValue) +1;
} else {
// Don't allow decrementing below zero
if (oldValue > 0) {
newVal = parseInt(oldValue - 1);
} else {
newVal = 0;
}
}
$(input).val(newVal);
$(".cat_textbox").each(function(){
total_value += parseInt($(this).val());
});
$(".main").val(total_value);
});
});
</script>
</body>
</html>
Try This:
I have modified your existing function little bit.
$(function() {
$(".button-click a").on("click", function() {
var $button = $(this);
var mainCount=$('.main').val();
var bText= $button.text();
var oldVal=$button.closest("ul").children('input').val();
var nexVal=null;
if(bText=='+'){
nexVal=parseInt(oldVal) +1;
mainCount=parseInt(mainCount) +1;
}else{
nexVal=parseInt(oldVal) -1;
mainCount=parseInt(mainCount) -1;
}
$button.closest("ul").children('input').val(nexVal);
$('.main').val(mainCount);
});
});
I have created a multi-select dropdown list. Currently when an input is selected, if the user clicks on the label to make a selection, the dropdown list disappears. If they click on the actual checkbox, the list stays in focus. I'd like to keep focus on the dropdown list until the user is finished making their selections and clicks the Submit button; regardless of where they click inside of the list. I've tried various combinations of click/focus listener functions as well as playing with the Bootstrap data attributes, but nothing seems to work.
function ddInputsChanged($inputs, $outputWrapper) {
var $inputs = $('#ddDistrict input');
var $outputWrapper = $('#lblDistrict');
var outputLabel = 'All';
var firstChecked = true;
$inputs.each(function() {
if (this.checked) {
var currentLabel = $(this).next('label').text();
if (firstChecked == true) {
firstChecked = false;
outputLabel = currentLabel;
} else
outputLabel = outputLabel + ', ' + currentLabel;
}
});
$outputWrapper.text(outputLabel);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="col-lg-12">
<div class="button-group" style="padding: 7px 0px 7px 0px; margin-left: 18px;">
<button type="button" class="btn btn-default btn-sm dropdown-toggle" data-toggle="dropdown"><span class="glyphicon glyphicon-user"></span> Districts <span class="caret"></span>
</button>
<ul id="ddDistrict" class="dropdown-menu">
<li>
<input type="checkbox" id="inpDist1" value="1">
<label for="inpDist1" class="input small" data-value="1">District 1 (Porter)</label>
</li>
<li>
<input type="checkbox" id="inpDist2" value="2">
<label for="inpDist2" class="input small" data-value="2">District 2 (Jones Jr.)</label>
</li>
<li>
<input type="checkbox" id="inpDist3" value="3">
<label for="inpDist3" class="input small" data-value="3">District 3 (Horne)</label>
</li>
<li>
<input type="checkbox" id="inpDist4" value="4">
<label for="inpDist4" class="input small" data-value="4">District 4 (Haddaway)</label>
</li>
<li>
<input type="checkbox" id="inpDist5" value="5">
<label for="inpDist5" class="input small" data-value="5">District 5 (Duncan)</label>
</li>
<li>
<input type="checkbox" id="inpDist6" value="6">
<label for="inpDist6" class="input small" data-value="6">District 6 (Willner)</label>
</li>
<li>
<input type="checkbox" id="inpDist7" value="7">
<label for="inpDist7" class="input small" data-value="7">District 7 (Brady)</label>
</li>
<li>
<button type="button" class="btn btn-default btn-sm btn-info center-block" onclick="ddInputsChanged('#ddDistrict input', '#lblDistrict');">Submit</button>
</li>
</ul>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<div id="lblDistrict"></div>
</div>
</div>
This seemed to do the trick in a little test. Added stop propagation and added code to close the menu after submit.
$(document).on('click', '.dropdown-menu', function (e) {
e.stopPropagation();
});
function ddInputsChanged($inputs, $outputWrapper) {
var $inputs = $('#ddDistrict input');
var $outputWrapper = $('#lblDistrict');
var outputLabel = 'All';
var firstChecked = true;
$inputs.each(function() {
if (this.checked) {
var currentLabel = $(this).next('label').text();
if (firstChecked === true) {
firstChecked = false;
outputLabel = currentLabel;
} else
outputLabel = outputLabel + ', ' + currentLabel;
}
});
$outputWrapper.text(outputLabel);
$(".open").removeClass('open');
}