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');
}
Related
I'm working on a filtering script and I need some help.
My question is, how can I check what filters are selected (they remain checked on page reload/going back from a different page) and run the filtering script on page reload?
The page is: https://www.raw-partner.de/wer-wir-sind/team-2/
The user interaction is loading the page - clicking on 'Filter' - selecting the checkboxes/filters user desired - clicking on an entry which redirects to a different page - when going back the same filters must be applied. (note: the previously checked checkboxes remain checked once going back, so the only thing to do is to run the script again)
I can post the script as well.
Any idea on how I can achieve this? Thanks in advance!
HTML:
<ul class="filters box">
<li>
<input name="is-partner" type="checkbox" value="partner" id="partner" />
<label for="partner">Partner</label>
</li>
<li>
<input name="other-job" type="checkbox" value="berufstrager" id="berufstrager" />
<label for="berufstrager"> Berufsträger </label>
</li>
<li>
<input name="other-job" type="checkbox" value="mitarbeiter" id="mitarbeiter" />
<label for="mitarbeiter"> Mitarbeiter </label>
</li>
</ul>
<ul class="filters box">
<li style="font-weight: bold"> Standorte </li>
<li>
<input name="location" type="checkbox" value="munchen" id="munchen" />
<label for="munchen"> München </label>
</li>
<li>
<input name="location" type="checkbox" value="berlin" id="berlin" />
<label for="berlin">Berlin</label>
</li>
<li>
<input name="location" type="checkbox" value="bad-worishofen" id="bad-worishofen" />
<label for="bad-worishofen">Bad Wörishofen</label>
</li>
<li>
<input name="location" type="checkbox" value="gera" id="gera" />
<label for="gera">Gera</label>
</li>
</ul>
<ul class="filters box">
<li style="font-weight: bold"> Partner mit Team </li>
<li>
<input name="parner-team" type="checkbox" value="appelt-duile" id="appelt-duile" />
<label for="appelt-duile"> Appelt/Duile </label>
</li>
<li>
<input name="parner-team" type="checkbox" value="bley" id="bley" />
<label for="bley"> Bley </label>
</li>
<li>
<input name="parner-team" type="checkbox" value="dietrich-kogler" id="dietrich-kogler" />
<label for="dietrich-kogler"> Dietrich/Kögler </label>
</li>
<li>
<input name="parner-team" type="checkbox" value="barth" id="barth" />
<label for="barth"> Dr. Barth </label>
</li>
<li>
<input name="parner-team" type="checkbox" value="buck" id="buck" />
<label for="buck"> Dr. Buck </label>
</li>
<li>
<input name="parner-team" type="checkbox" value="drost" id="drost" />
<label for="drost"> Drost </label>
</li>
<li>
<input name="parner-team" type="checkbox" value="lux-kronig-harbauer" id="lux-kronig-harbauer" />
<label for="lux-kronig-harbauer"> Lux-Krönig/Harbauer </label>
</li>
<li>
<input name="parner-team" type="checkbox" value="metzler" id="metzler" />
<label for="metzler"> Metzler </label>
</li>
<li>
<input name="parner-team" type="checkbox" value="stegmann" id="stegmann" />
<label for="stegmann"> Stegmann </label>
</li>
</ul>
</div>
</div>
<div id="filtering">
<div class="entry" data-id="max-appelt" data-category="partner munchen berufstrager appelt-duile">
<a href="http://www.raw-partner.de/maximilian-appelt-4/" target="_blank"><p><img class="" src="/wp-content/uploads/2018/08/Appelt_P_0613_Zuschnitt.png" alt="null" /></p>
<h3 id="name"><b>Maximilian <br> Appelt</b></h3></a>
</div>
<div class="entry" data-category="partner munchen berufstrager barth">
<a href="http://www.raw-partner.de/dr-hans-guenther-barth/" target="_blank"><p><img class="" src="/wp-content/uploads/2018/08/Barth_P_0187_Zuschnitt.png" alt="null" /></p>
<h3 id="name"><b>Dr. Hans Günther Barth</b></h3></a>
</div>
<div class="entry" data-category="munchen mitarbeiter ">
<a href="http://www.raw-partner.de/katrin-bartl-3/" target="_blank"><p><img class="" src="/wp-content/uploads/2018/08/Bartl_0820_F_Zuschnitt.png" alt="null" /></p>
<h3 id="name"><b>Katrin <br> Bartl</b></h3></a>
</div>
<div class="entry" data-id="hans" data-category="bad-worishofen mitarbeiter stegmann">
<a href="http://www.raw-partner.de/alexander-baumgaertner-2/"><p><img class="" src="/wp-content/uploads/2018/08/Baumgärtner_0035_F2.png" alt="null" /></p>
<h3 id="name"><b>Alexander <br> Baumgärtner</b></h3></a>
</div>
<div class="entry" data-id="hans" data-category="bad-worishofen mitarbeiter">
<a href="http://www.raw-partner.de/margit-baur-3/"><p><img class="" src="/wp-content/uploads/2018/08/Baur_0533_F_Zuschnitt.png" alt="null" /></p>
<h3 id="name"><b>Margit <br> Baur</b></h3></a>
</div>
<div class="entry" data-id="hans" data-category="bad-worishofen mitarbeiter">
<a href="http://www.raw-partner.de/peter-harbauer-3-7/"><p><img class="" src="/wp-content/uploads/2018/08/Bernhardt_0137_Zuschnitt.png" alt="null" /></p>
<h3 id="name"><b>Yvonne <br> Bernhardt</b></h3></a>
</div>
jQuery:
(function($){
var $filterCheckboxes = $('input[type="checkbox"]');
$filterCheckboxes.on('change', function() {
var selectedFilters = {};
$filterCheckboxes.filter(':checked').each(function() {
if (!selectedFilters.hasOwnProperty(this.name)) {
selectedFilters[this.name] = [];
}
selectedFilters[this.name].push(this.value);
});
var $filteredResults = $('.entry');
$.each(selectedFilters, function(name, filterValues) {
$filteredResults = $filteredResults.filter(function() {
var matched = false,
currentFilterValues = $(this).data('category').split(' ');
$.each(currentFilterValues, function(_, currentFilterValue) {
if ($.inArray(currentFilterValue, filterValues) != -1) {
matched = true;
return false;
}
});
return matched;
});
});
$('.entry').hide().filter($filteredResults).show();
});
$(window).trigger('resize')
})(jQuery);
JSFiddle: https://jsfiddle.net/u39kmoxz/2/
Note: I have a basic understanding of jQuery, not advanced enough to use cookies, I was thinking that since the checkboxes are remaining checked when going back, the only thing that should be done is re-running the script but I can't understand how since the script is being applied on change.
Welcome!
Conceptually, you need to make the function callable from 2 events: change checkbox + page load. Therefore you need to name the function so that you can call it from these 2 events.
(function($){
var $filterCheckboxes = $('input[type="checkbox"]');
var doFiltering = function() {
var selectedFilters = {};
$filterCheckboxes.filter(':checked').each(function() {
if (!selectedFilters.hasOwnProperty(this.name)) {
selectedFilters[this.name] = [];
}
selectedFilters[this.name].push(this.value);
});
var $filteredResults = $('.entry');
$.each(selectedFilters, function(name, filterValues) {
$filteredResults = $filteredResults.filter(function() {
var matched = false,
currentFilterValues = $(this).data('category').split(' ');
$.each(currentFilterValues, function(_, currentFilterValue) {
if ($.inArray(currentFilterValue, filterValues) != -1) {
matched = true;
return false;
}
});
return matched;
});
});
$('.entry').hide().filter($filteredResults).show();
} // end of doFiltering function
$filterCheckboxes.on('change',doFiltering()); // call it with the on change
doFiltering() // call it when your parent function executes at page load (only executes once)
$(window).trigger('resize')
})(jQuery);
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 simple radio button, using bootstrap like this
<div class="radio">
<label>
<span class="btn btn-danger">
<input type="radio" name="tipe" value="str" style="display: none;" /> A
</span> Strength
</label>
</div>
<div class="radio">
<label>
<span class="btn btn-danger">
<input type="radio" name="tipe" value="agi" style="display: none;" /> B
</span> Agility
</label>
</div>
<div class="radio">
<label>
<span class="btn btn-danger">
<input type="radio" name="tipe" value="int" style="display: none;" /> C
</span> Intelligence
</label>
</div>
So what i want really to do is, when i click the radio, the span class is change from btn-danger into btn-success. Of course previous button that has btn-success is would be back into btn-danger again. I try with my javascript code but it wouldn't work out.
$(document).ready(function() {
$("label").click(function() {
if ($(this).children().children().is(":checked")) {
$(this).children().attr("class", "btn btn-success");
} else {
$(this).children().attr("class", "btn btn-danger");
}
});
});
Ok when I click the radio it turned in to green (btn-success), but when i check another radio, it turned in to green but previous radio which i click it, it still green (still has btn-success class). Can someone help me? Thanks :)
You also need to remove/add the proper CSS class from unckecked radio's parent element element.
Also .addClass() and .removeClass() can be used to add and remove the CSS class. Here in the example I have also used .filter()
$(document).ready(function() {
$("label").click(function() {
//Cache elements
var radioElem = $(":radio[name=tipe]");
//Remove the btn-success and add btn-danger class to all the parent element of radio
radioElem.parent().removeClass('btn-success').addClass('btn-danger');
//Filter out checked radio and add/remove the classes
radioElem.filter(":checked").parent().addClass('btn-success').removeClass('btn-danger');
});
});
.btn-danger {
color: red
}
.btn-success {
color: green
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="radio">
<label>
<span class="btn btn-danger">
<input type="radio" name="tipe" value="str" style="display: none;" /> A
</span> Strength
</label>
</div>
<div class="radio">
<label>
<span class="btn btn-danger">
<input type="radio" name="tipe" value="agi" style="display: none;" /> B
</span> Agility
</label>
</div>
<div class="radio">
<label>
<span class="btn btn-danger">
<input type="radio" name="tipe" value="int" style="display: none;" /> C
</span> Intelligence
</label>
</div>
On change of any radio button iterate loop through all the radio buttons and check whether the radio button is checked or not and accordingly made change the classes of the parent div. Please refer the below snippet for more understanding.
$("input[type='radio']").on("change",function(){
$("input[type='radio']").each(function(){
if($(this).is(':checked')){
$(this).parent().removeClass('btn-danger').addClass('btn-success');
}else{
$(this).parent().removeClass('btn-success').addClass('btn-danger');
}
});
});
.btn-danger {
color: red
}
.btn-success {
color: green
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="radio">
<label for="radio-A">
<span class="btn btn-danger">
<input id="radio-A" type="radio" name="tipe" value="str" style="display: none;" /> A
</span> Strength
</label>
</div>
<div class="radio">
<label for="radio-B">
<span class="btn btn-danger">
<input id="radio-B" type="radio" name="tipe" value="agi" style="display: none;" /> B
</span> Agility
</label>
</div>
<div class="radio">
<label for="radio-C">
<span class="btn btn-danger">
<input id="radio-C" type="radio" name="tipe" value="int" style="display: none;" /> C
</span> Intelligence
</label>
</div>
You are only checking the children of the clicked button and set or rest that one. But you have to reset the children of the buttons that have not been clicked in order to make them red again.
You could do something like
$(document).ready(function() {
$("label").click(function() {
$("label").children().attr("class", "btn btn-danger"); // reset all
$(this).children().attr("class", "btn btn-success"); // set current
});
});
It is very simple
if(!$('[name="tipe"][value="str"]').is(':checked')) {
alert("it's not checked");
}
Try this code,
$(document).ready(function() {
$('label').click(function() {
$('label').find('span').attr('class','btn btn-danger');
if ($(this).find('input:checked')) {
$(this).find('span').attr('class','btn btn-success');
}
});
});
Thanks!
You can just replace above jQuery code with below code
$(document).ready(function() {
$("label").click(function() {
if ($(this).find('input[type="radio"]').is(':checked')) {
$(this).children('span').removeClass('btn btn-danger').addClass('btn btn-success');
} else {
$('label').children('span').removeClass('btn btn-success').addClass('btn btn-danger');
}
});
});
I'm attempting to change a message describing a product's condition when the user clicks on an element. The code below seems to be valid, however when I click on the element (.conditionOption label), my message is not being changed.
I'm using jQuery 1.7.2, so .live(); is still valid, I have however attempted to switch things to .click() with the same results.
HTML CODE
<div class="productAttributeRow productAttributeConfigurablePickListSet productAttributeRuleCondition" id="a9e1018b0d4a98a6836fdf644eb227a1">
<div class="productAttributeLabel">
<label for="4fe3d80e78f0e0dc478e7ee56e98d3ea">
<span class="required">*</span>
<span class="name">Cosmetic Condition:</span>
<i class="fa fa-info-circle conditionHelp helpIcon modalOpener"></i>
</label>
</div>
<div class="productAttributeValue">
<div class="productOptionViewRectangle conditionOption">
<ul class="list-horizontal">
<li class="option">
<label for="4a43f295a3273a1b90567090ac3fc9f3">
<input type="radio" class="validation" name="attribute[267]" value="1216" id="4a43f295a3273a1b90567090ac3fc9f3">
<span class="name">Excellent</span>
</input>
</label>
</li>
<li class="option">
<label for="f03ed6c05af7ea80dc1b75d853f43026">
<input type="radio" class="validation" name="attribute[267]" value="311" id="f03ed6c05af7ea80dc1b75d853f43026">
<span class="name">Good</span>
</input>
</label>
</li>
<li class="option selected selectedValue">
<label for="1598c6f69093cdf495f564397485e044">
<input type="radio" class="validation" name="attribute[267]" value="312" id="1598c6f69093cdf495f564397485e044" checked="checked">
<span class="name">Fair</span>
</input>
</label>
</li>
</ul>
<div id="conditionExplanationWrapper">
<span id="conditionExplanation">MESSAGE 1</span>
</div>
</div>
</div>
<div class="cf"></div>
</div>
Javascript/jQuery
function conditionExplanation() {
// Set vars for three conditions
var excellentMessage = 'MESSAGE 1';
var goodMessage = 'MESSAGE 2';
var fairMessage = 'MESSAGE 3';
// Assign finder class to div
$('.productOptionViewRectangle:contains("Excellent")').addClass('conditionOption');
// Build wrapper for message
$('.conditionOption').append('<div id="conditionExplanationWrapper"><span id="conditionExplanation"></span></div>');
// Insert message corresponding to .conditionOption .selectedValue
$('.conditionOption label').live('click', function(){
if ($('.conditionOption .selectedValue:contains("Excellent")')) {
$('#conditionExplanation').html(excellentMessage);
} else if ($('.conditionOption .selectedValue:contains("Good")')) {
$('#conditionExplanation').html(goodMessage);
} else if ($('.conditionOption .selectedValue:contains("Fair")')) {
$('#conditionExplanation').html(fairMessage);
}
});
}
See Fiddle at https://jsfiddle.net/mvnxg3t4/
The problem is that you're comparing the same value over and over; instead you should make use of this and then use regular text search:
var value = $(this).text();
if (value.indexOf('Excellent') != -1) {
$('#conditionExplanation').html(excellentMessage);
} else if (value.indexOf('Good') != -1) {
$('#conditionExplanation').html(goodMessage);
} else if (value.indexOf('Fair') != -1) {
$('#conditionExplanation').html(fairMessage);
}
$(document).ready(conditionExplanation);
function conditionExplanation()
{
// Set vars for three conditions
var excellentMessage = 'MESSAGE 1';
var goodMessage = 'MESSAGE 2';
var fairMessage = 'MESSAGE 3';
// Assign finder class to div
$('.productOptionViewRectangle:contains("Excellent")').addClass('conditionOption');
// Build wrapper for message
$('.conditionOption').append('<div id="conditionExplanationWrapper"><span id="conditionExplanation"></span></div>');
// Insert message corresponding to .conditionOption .selectedValue
$('.conditionOption label').live('click', function (e) {
var value = $(this).text();
if (value.indexOf('Excellent') != -1) {
$('#conditionExplanation').html(excellentMessage);
} else if (value.indexOf('Good') != -1) {
$('#conditionExplanation').html(goodMessage);
} else if (value.indexOf('Fair') != -1) {
$('#conditionExplanation').html(fairMessage);
}
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<div class="productAttributeRow productAttributeConfigurablePickListSet productAttributeRuleCondition" id="a9e1018b0d4a98a6836fdf644eb227a1">
<div class="productAttributeLabel">
<label for="4fe3d80e78f0e0dc478e7ee56e98d3ea">
<span class="required">*</span>
<span class="name">Cosmetic Condition:</span>
<i class="fa fa-info-circle conditionHelp helpIcon modalOpener"></i>
</label>
</div>
<div class="productAttributeValue">
<div class="productOptionViewRectangle conditionOption">
<ul class="list-horizontal">
<li class="option">
<label for="4a43f295a3273a1b90567090ac3fc9f3">
<input type="radio" class="validation" name="attribute[267]" value="1216" id="4a43f295a3273a1b90567090ac3fc9f3">
<span class="name">Excellent</span>
</input>
</label>
</li>
<li class="option">
<label for="f03ed6c05af7ea80dc1b75d853f43026">
<input type="radio" class="validation" name="attribute[267]" value="311" id="f03ed6c05af7ea80dc1b75d853f43026">
<span class="name">Good</span>
</input>
</label>
</li>
<li class="option selected selectedValue">
<label for="1598c6f69093cdf495f564397485e044">
<input type="radio" class="validation" name="attribute[267]" value="312" id="1598c6f69093cdf495f564397485e044" checked="checked">
<span class="name">Fair</span>
</input>
</label>
</li>
</ul>
<div id="conditionExplanationWrapper">
<span id="conditionExplanation">MESSAGE 1</span>
</div>
</div>
</div>
<div class="cf"></div>
</div>
Try using on click and add it in on your on load of body.
$(function () {
$('.conditionOption label').click(function () {
});
});
I have a list (style taken from bootstrap) of elements, to which I want to add some more elements using text input. Here is my code-
<div class="col-lg-6">
<div class="input-group">
<input type="text" id = "input" class="form-control">
<span class="input-group-btn">
<button class="btn btn-default" type="button" id = "add" >Add</button>
</span>
</div><!-- /input-group -->
<form>
<ul class="list-group" id = "tagList">
<li class="list-group-item"> <b>Tags </b></li>
<li class="list-group-item"> <span class ="input-group-addon">
<input type="radio">
</span>Apple</li>
<li class="list-group-item"> <span class ="input-group-addon">
<input type="radio">
</span> Orange</li>
<li class="list-group-item"> <span class ="input-group-addon">
<input type="radio">
</span> Pear</li>
<li class="list-group-item"> <span class ="input-group-addon">
<input type="radio">
</span> Banana</li>
</ul>
</form>
<script src="http://codeorigin.jquery.com/jquery-2.0.3.js"></script>
<script>
$('#add').click(function(){
var text = $('#input').val();
if(text.length){
$('<li />', {html: text}).appendTo('ul.tagList')
}
});
</script>
I can get the code to work with a simpler list, but not with this one. Can anyone spot why not?
Your li's are not closed:
<li class="list-group-item" <span class ="input-group-addon">
<input type="radio">
</span>Apple</li>
Should be:
<li class="list-group-item"><span class ="input-group-addon">
<input type="radio">
</span>Apple</li>
Always funny to spot such issues once you placed the code into the code highlighting here on SO.
In order for your javascript to work, you might use the following: http://jsfiddle.net/jX2K3/21/
try following code..
$('#add').click(function(){
var text = $('#input').val();
if(text.length){
$('ul').append('<li class="list-group-item"><span class ="input-group-addon"> <input type="radio"> </span>'+text+'</li>');
}
});
jsFiddle