I have a buch of checkbox in different containers like below:
$("input:checkbox").click(function() {
var url = "http://example.com/results?&"
var flag = false;
var $box = $(this);
var $facet = $box.val();
var $name = $box.attr("name");
var group = "input:checkbox['" + $facet + $name + "']:checked";
console.log(group);
$("#pruebita").not(this).attr("checked", false);
$(group).each(function() {
if (!flag) {
url = url + $(this).val() + $(this).attr('name');
flag = true; // To trace if first query string added
} else {
url = url + "&" + $(this).val() + $(this).attr('name');
}
});
console.log(url);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="cFilterAction fSpace topFM hidden-sm hidden-md hidden-lg">
<li class="fTitle" id="genderTitle">
<a class="filter facetTitle " id="gender">
gender
</a>
</li>
<div class="fct-bd colorWrap">
<ul class="noShow-filter Wrap">
<li class="cnv-level-1 mbs">
<label class="facetbutton">
<input id="pruebita" type="checkbox" name="women" value="gender=" data-facet="Gender">
<span class="fct-scroll-item">women</span>
</label>
</li>
<li class="cnv-level-1 mbs">
<label class="facetbutton">
<input id="pruebita" type="checkbox" name="men" value="gender=" data-facet="Gender">
<span class="fct-scroll-item">men</span>
</label>
</li>
</ul>
</div>
</ul>
<ul class="cFilterAction fSpace topFM hidden-sm hidden-md hidden-lg">
<li class="fTitle" id="occasionTitle">
<a class="filter facetTitle " id="occasion">
ocassion
</a>
</li>
<div class="fct-bd colorWrap">
<ul class="noShow-filter Wrap">
<li class="cnv-level-1 mbs">
<label class="facetbutton">
<input id="pruebita" type="checkbox" name="beach" value="occasion=" data-facet="Occasion">
<span class="fct-scroll-item">beach</span>
</label>
</li>
<li class="cnv-level-1 mbs">
<label class="facetbutton">
<input id="pruebita" type="checkbox" name="street" value="occasion=" data-facet="Occasion">
<span class="fct-scroll-item">street</span>
</label>
</li>
</ul>
</div>
</ul>
I want that the checkboxes don't uncheck the previous option when checking another section of checkboxes.
The complete code is also at jsfiddle
In your code you have
$("#pruebita").not(this).attr("checked",false);
Which essentially is unchecking all the checkboxes except the clicked one. Removing this line of code will make it work fine.
See updated fiddle
You don't need any javascript at all for this problem; you just need to use appropriate form elements and set their attributes correctly.
Radio buttons are for when only one of a group of options should be selectable; checkboxes are for when more than one should be selectable. They aren't interchangeable. Do not use javascript to disguise radio button functionality as checkbox elements; that's bad usability, as it gives the user incorrect expectations about how the form will work.
Part of the problem is that you've confused the purpose of the "name" and "value" attributes. The "name" attribute is for defining which group the radio buttons belong to; all radio buttons with the same name will be in the same group. The "value" attribute contains the value that will be submitted as part of the form if that option is selected. You had them backwards:
<input type="checkbox" name="women" value="gender=" ...>
<input type="checkbox" name="men" value="gender=" ...>
With the above code, all the boxes have a unique 'name', so none of them would be grouped; meanwhile the user's selection wouldn't have any effect, since they both have the same value. Instead, that should be this:
<input type="radio" name="gender" value="women" ...>
<input type="radio" name="gender" value="men" ...>
That HTML will cause the form field "gender" to contain the value "women" or "men", depending on the user's selection. Here's the full corrected example:
<ul class="cFilterAction fSpace topFM hidden-sm hidden-md hidden-lg">
<li class="fTitle" id="genderTitle">
<a class="filter facetTitle" id="gender">gender</a>
</li>
<div class="fct-bd colorWrap">
<ul class="noShow-filter Wrap">
<li class="cnv-level-1 mbs">
<label class="facetbutton">
<input id="pruebita" type="radio" name="gender" value="women" data-facet="Gender">
<span class="fct-scroll-item">women</span>
</label>
</li>
<li class="cnv-level-1 mbs">
<label class="facetbutton">
<input id="pruebita" type="radio" name="gender" value="men" data-facet="Gender">
<span class="fct-scroll-item">men</span>
</label>
</li>
</ul>
</div>
</ul>
<ul class="cFilterAction fSpace topFM hidden-sm hidden-md hidden-lg">
<li class="fTitle" id="occasionTitle">
<a class="filter facetTitle " id="occasion">ocassion</a>
</li>
<div class="fct-bd colorWrap">
<ul class="noShow-filter Wrap">
<li class="cnv-level-1 mbs">
<label class="facetbutton">
<input id="pruebita" type="radio" name="occasion" value="beach" data-facet="Occasion">
<span class="fct-scroll-item">beach</span>
</label>
</li>
<li class="cnv-level-1 mbs">
<label class="facetbutton">
<input id="pruebita" type="radio" name="occasion" value="street" data-facet="Occasion">
<span class="fct-scroll-item">street</span>
</label>
</li>
</ul>
</div>
</ul>
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 can hide a list item (the first one in this example) in Qualtrics with regular JavaScript. The screenshot below shows my question.
This is the code that I entered into the javascript window belonging to the question:
Qualtrics.SurveyEngine.addOnload(function()
{
/*Place Your JavaScript Here*/
$(this.questionId).getElementsByClassName("ChoiceStructure")[0].getElementsByTagName("li")[0].style.display = "none";
});
I was wondering how the same could be achieved with jQuery?
I have successfully installed jQuery thanks to this handy guide by adding
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
in the source view of the header. Additionally, I added var jq = jQuery.noConflict(); at the top of the javascript window belonging to this question.
By inspecting the source code further I found that the ID of the question is QID2. Based on this answer I therefore tried
$("#QID2 .ChoiceStructure ul li:eq(0)").hide();
but without success.
Please note that ideally I would not want to specify the question ID manually, but instead refer to the question as I have with regular JavaScript.
Edit: the html for the qualtrics question is:
<div class="QuestionOuter BorderColor MC QID2" id="QID2" questionid="QID2" posttag="QID2" data-runtime-remove-class-hidden="runtime.Displayed">
<div class="ValidationError" data-runtime-html="runtime.ErrorMsg" data-runtime-show="runtime.ErrorMsg" style="display: none;"></div> <div class="Inner BorderColor SAVR">
<div class="InnerInner BorderColor TX">
<fieldset>
<!-- BEGIN PARTIALS -->
<!-- Partial for defining the ControlContainerContent -->
<!-- END PARTIALS -->
<h2 class="noStyle"><div class="QuestionText BorderColor">Text</div></h2>
<div class="QuestionBody">
<!-- Begin Choices w/o choice groups -->
<ul class="ChoiceStructure">
<li class="Selection reg"> <input choiceid="1" aria-labelledby="QID2-1-label" class="radio QR-QID2-1 QWatchTimer" type="radio" name="QR~QID2" id="QR~QID2~1" value="1" data-runtime-checked="runtime.Selected"><label for="QR~QID2~1" class="q-radio" data-runtime-class-q-checked="runtime.Choices.1.Selected"></label> <span class="LabelWrapper"> <label for="QR~QID2~1" id="QID2-1-label" class="SingleAnswer" data-runtime-class-q-checked="runtime.Choices.1.Selected"> <span>a (0)</span></label></span> <div class="clear"></div> </li>
<li class="Selection alt"> <input choiceid="2" aria-labelledby="QID2-2-label" class="radio QR-QID2-2 QWatchTimer" type="radio" name="QR~QID2" id="QR~QID2~2" value="2" data-runtime-checked="runtime.Selected"><label for="QR~QID2~2" class="q-radio" data-runtime-class-q-checked="runtime.Choices.2.Selected"></label> <span class="LabelWrapper"> <label for="QR~QID2~2" id="QID2-2-label" class="SingleAnswer" data-runtime-class-q-checked="runtime.Choices.2.Selected"> <span>a (1)</span></label></span> <div class="clear"></div> </li>
<li class="Selection reg"> <input choiceid="3" aria-labelledby="QID2-3-label" class="radio QR-QID2-3 QWatchTimer" type="radio" name="QR~QID2" id="QR~QID2~3" value="3" data-runtime-checked="runtime.Selected"><label for="QR~QID2~3" class="q-radio" data-runtime-class-q-checked="runtime.Choices.3.Selected"></label> <span class="LabelWrapper"> <label for="QR~QID2~3" id="QID2-3-label" class="SingleAnswer" data-runtime-class-q-checked="runtime.Choices.3.Selected"> <span>b (2)</span></label></span> <div class="clear"></div> </li>
<li class="Selection alt"> <input choiceid="4" aria-labelledby="QID2-4-label" class="radio QR-QID2-4 QWatchTimer" type="radio" name="QR~QID2" id="QR~QID2~4" value="4" data-runtime-checked="runtime.Selected"><label for="QR~QID2~4" class="q-radio" data-runtime-class-q-checked="runtime.Choices.4.Selected"></label> <span class="LabelWrapper"> <label for="QR~QID2~4" id="QID2-4-label" class="SingleAnswer" data-runtime-class-q-checked="runtime.Choices.4.Selected"> <span>b (3)</span></label></span><div class="clear"></div> </li>
</ul>
<!-- End Choices w/o choice groups -->
<div class="clear zero"></div>
</div>
</fieldset>
</div>
</div>
</div>
You can use prototypejs (which Qualtrics already uses) to do it quite simply:
Qualtrics.SurveyEngine.addOnload(function()
{
$(this.questionId).down('li').hide();
});
Maybe some of rules that you added in JQuery request ( i mean inside the brackets $(here)) is not valid and JQuery returns wrong link to node element (or returns "undefined"). I guesting that a problem in last construction with .class ul li (because u added class to ul).
So you need to use
$("#QID2 ul li:eq(0)")
or
$("#QID2 ul.ChoiceStructure li:eq(0)"
About refer to the question - you can use variables as in normal JS and add value in JQuery using simple concatenation like
$("#QID"+variableWithQuestionNumber+" li:eq(0)")
(function(){
var counter = 0;
$(".myButton").click(function(e){
if (counter===0){
$("#QID2 ul li:eq(0)").hide();
counter++;
}else{
$("#QID2 ul li:eq(0)").show();
counter--;
}
});
})();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<div class="QuestionOuter BorderColor MC QID2" id="QID2" questionid="QID2" posttag="QID2" data-runtime-remove-class-hidden="runtime.Displayed">
<div class="ValidationError" data-runtime-html="runtime.ErrorMsg" data-runtime-show="runtime.ErrorMsg" style="display: none;"></div>
<div class="Inner BorderColor SAVR">
<div class="InnerInner BorderColor TX">
<fieldset>
<!-- BEGIN PARTIALS -->
<!-- Partial for defining the ControlContainerContent -->
<!-- END PARTIALS -->
<h2 class="noStyle"><div class="QuestionText BorderColor">Text</div></h2>
<div class="QuestionBody">
<!-- Begin Choices w/o choice groups -->
<ul class="ChoiceStructure">
<li class="Selection reg">
<input choiceid="1" aria-labelledby="QID2-1-label" class="radio QR-QID2-1 QWatchTimer" type="radio" name="QR~QID2" id="QR~QID2~1" value="1" data-runtime-checked="runtime.Selected">
<label for="QR~QID2~1" class="q-radio" data-runtime-class-q-checked="runtime.Choices.1.Selected"></label> <span class="LabelWrapper"> <label for="QR~QID2~1" id="QID2-1-label" class="SingleAnswer" data-runtime-class-q-checked="runtime.Choices.1.Selected"> <span>a (0)</span>
</label>
</span>
<div class="clear"></div>
</li>
<li class="Selection alt">
<input choiceid="2" aria-labelledby="QID2-2-label" class="radio QR-QID2-2 QWatchTimer" type="radio" name="QR~QID2" id="QR~QID2~2" value="2" data-runtime-checked="runtime.Selected">
<label for="QR~QID2~2" class="q-radio" data-runtime-class-q-checked="runtime.Choices.2.Selected"></label> <span class="LabelWrapper"> <label for="QR~QID2~2" id="QID2-2-label" class="SingleAnswer" data-runtime-class-q-checked="runtime.Choices.2.Selected"> <span>a (1)</span>
</label>
</span>
<div class="clear"></div>
</li>
<li class="Selection reg">
<input choiceid="3" aria-labelledby="QID2-3-label" class="radio QR-QID2-3 QWatchTimer" type="radio" name="QR~QID2" id="QR~QID2~3" value="3" data-runtime-checked="runtime.Selected">
<label for="QR~QID2~3" class="q-radio" data-runtime-class-q-checked="runtime.Choices.3.Selected"></label> <span class="LabelWrapper"> <label for="QR~QID2~3" id="QID2-3-label" class="SingleAnswer" data-runtime-class-q-checked="runtime.Choices.3.Selected"> <span>b (2)</span>
</label>
</span>
<div class="clear"></div>
</li>
<li class="Selection alt">
<input choiceid="4" aria-labelledby="QID2-4-label" class="radio QR-QID2-4 QWatchTimer" type="radio" name="QR~QID2" id="QR~QID2~4" value="4" data-runtime-checked="runtime.Selected">
<label for="QR~QID2~4" class="q-radio" data-runtime-class-q-checked="runtime.Choices.4.Selected"></label> <span class="LabelWrapper"> <label for="QR~QID2~4" id="QID2-4-label" class="SingleAnswer" data-runtime-class-q-checked="runtime.Choices.4.Selected"> <span>b (3)</span>
</label>
</span>
<div class="clear"></div>
</li>
</ul>
<!-- End Choices w/o choice groups -->
<div class="clear zero"></div>
</div>
</fieldset>
</div>
</div>
</div>
<input type="button" class="myButton" value="Push me"/>
I am having Html in which i need focus on label tag when input is clicked
<li class="princee" data-category="connectivity">
<label class="pack-switch" tabindex="0">
<input class="airplaneMode-input uninit lambas" type="checkbox">
<span id="menuItem-airplaneMode" class="menu-item" data-icon="airplane" data-l10n-id="airplaneMode"></span>
</label>
</li>
Try the following code
<li class="princee" data-category="connectivity">
<label class="pack-switch" tabindex="0" id="cc" contenteditable>Focus Here</label>
<input class="airplaneMode-input uninit lambas" type="checkbox" onchange="scriptmethod()">
<span id="menuItem-airplaneMode" class="menu-item" data-icon="airplane" data-l10n-id="airplaneMode"></span>
Script
function scriptmethod()
{
document.getElementById("cc").focus();
}
First time radio selection works but if i am selecting radio second time then its not showing as selected. attribute checked=checked showing in html but its not reflection in UI.
What is the solution for this that it can reflect.
Here is script code to apply attribute."
$('#' + myradioid+ ' input:radio').attr("checked", "checked")
Here is my html
<ul id="Ulist" class="Ulist1">
<h2 class="QuestionTxt">First question </h2>
<li id="117184normal" class="statusDefaultAns">
<a id="117184" href="#" onclick="Select(117184);">
<h2>
<input quiz-option="multiple-radio" id="Radio1" type="radio" name="quiz-radio" res="117184">
<label style="cursor: pointer" for="117184">true</label>
</h2>
</a>
</li>
<li id="117185normal" class="statusDefaultAns"><a id="117185" href="#" onclick="Select(117185);">
<h2>
<input quiz-option="multiple-radio" id="Radio2" type="radio" name="quiz-radio" res="117185">
<label style="cursor: pointer" for="117185">false</label>
</h2>
</a>
</li>
<li id="117352normal" class="statusDefaultAns">
<a id="117352" href="#" onclick="Select(117352);">
<h2>
<input quiz-option="multiple-radio" id="Radio3" type="radio" name="quiz-radio" res="117352">
<label style="cursor: pointer" for="117352">ws</label>
</h2>
</a>
</li>
</ul>
Plz provide a solution for this so that radio selection can refresh in ui.
Thanks
Dalvir
Try .prop instead of attr:
$('#' + myradioid+ ' input:radio').prop("checked", true)
Better yet, try it with the onclick method on the label instead of the line. Selecting something that selects itself could be causing an infinite loop, which would explain your problem. Try this code:
window.Select = function(id) {
$('#' + id + 'normal input[type="radio"]').click();
};
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="Ulist" class="Ulist1">
<h2 class="QuestionTxt">First question </h2>
<li id="117184normal" class="statusDefaultAns"><a id="117184" href="#"><h2>
<input quiz-option="multiple-radio" id="Radio1" type="radio" name="quiz-radio" res="117184" />
<label style="cursor:pointer" for="117184" onclick="Select(117184);">true</label></h2></a></li>
<li id="117185normal" class="statusDefaultAns"><a id="117185" href="#"><h2>
<input quiz-option="multiple-radio" id="Radio2" type="radio" name="quiz-radio" res="117185" />
<label style="cursor:pointer" for="117185" onclick="Select(117185);">false</label></h2></a></li>
<li id="117352normal" class="statusDefaultAns"><a id="117352" href="#"><h2>
<input quiz-option="multiple-radio" id="Radio3" type="radio" name="quiz-radio" res="117352" />
<label style="cursor:pointer" for="117352" onclick="Select(117352);">ws</label></h2></a></li>
</ul>
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