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
Related
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>
So I have perused the similar questions in this vein but they all have syntax errors. I have checked my codes with the available answers but it doesn't seem to be a syntax error; but I keep getting the same "getElementById() is not a function" error. The following is the snippets of code in question. The alert is working so ik the function is being called appropriately on the dropdown menu element option.
$('.dropdown-menu a').on("click", "#1", function(e){
alert("hi");
getElementById("#caseReport").style.display = 'block';
});
<div class= "radioform" style='display:none;' id='caseReport'>
<h3>Please answer the following questions.</h3><br>
<form>
Previous Credible Reports in Humans:
<label class="radio-inline">
<input type="radio" name= "optradio1">Yes
</label>
<label class="radio-inline">
<input type="radio" name= "optradio1">No
</label>
<label class="radio-inline">
<input type="radio" name= "optradio1">Unsure
</label>
</form>
</div>
EDIT: Including the drop down div for ref
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">Evidence Type
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="#" id= "1">Case Report</a></li>
</ul>
</div>
You need to refer any DOM location before instructing it to get any element by its ID, you can simply use the whole document in this case:
document.getElementById('caseReport');
Please note the # is not required in this case
Since you are using jQuery then do:-
$("#caseReport").css({'display':'block'});
//or $("#caseReport").css('display','block');
//or $("#caseReport").show();
If you decided to use javascript anyhow,then do:-
document.getElementById("caseReport").style.display = 'block';
Working example:-
$(document).ready(function() {
$('.dropdown-menu a#1').click(function(e) {
e.preventDefault();
alert("hi");
$("#caseReport").css({'display':'block'});
//or $("#caseReport").css('display','block');
//or $("#caseReport").show();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">Evidence Type
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="#" id= "1">Case Report</a></li>
</ul>
</div>
<div class= "radioform" style='display:none;' id='caseReport'>
<h3>Please answer the following questions.</h3><br>
<form>
Previous Credible Reports in Humans:
<label class="radio-inline">
<input type="radio" name= "optradio1">Yes
</label>
<label class="radio-inline">
<input type="radio" name= "optradio1">No
</label>
<label class="radio-inline">
<input type="radio" name= "optradio1">Unsure
</label>
</form>
</div>
Note:-
I personally said that don't mix java-script syntax with jQuery syntax. Use either-one purely.
Please check comments carefully.
Since you're already using jQuery you might as well use
$(function() {
$('.dropdown-menu a#1').click(function(e) {
e.preventDefault();
alert("hi");
$("#caseReport").css("display","block");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="dropdown-menu">
<a id="1" href="#">Click Me</a>
</div>
<div class= "radioform" style='display:none;' id='caseReport'>
<h3>Please answer the following questions.</h3><br>
<form>
Previous Credible Reports in Humans:
<label class="radio-inline">
<input type="radio" name= "optradio1">Yes
</label>
<label class="radio-inline">
<input type="radio" name= "optradio1">No
</label>
<label class="radio-inline">
<input type="radio" name= "optradio1">Unsure
</label>
</form>
</div>
To access an HTML element, JavaScript can use the document.getElementById(id) method.
In the HTML DOM (Document Object Model), everything is a node:
The document itself is a document node
All HTML elements are element nodes
All HTML attributes are attribute nodes
Text inside HTML elements are text nodes
Comments are comment nodes
did you try using document.getElementById()?
document.getElementById("caseReport").style.display = 'block';
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 will have html like this:
<form class="form-horizontal" role="form">
<div class="form-group">
<ul class="select_list">
<li id="s1" class="chosen">Apple</li>
<li id="s2" style="display: none;">Peach</li>
<li id="s3" style="display: none;">Plum</li>
<li id="s4" class="chosen">Banana</li>
<li id="s5" style="display: none;">Grapes</li>
<li id="s6" class="chosen">Pear</li>
<li id="s7" style="display: none;">Kiwi</li>
</ul>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
how can I use $_POST to get the ids of the elements with class="chosen"
There is no "direct" way to do this. Forms POST data from input, textarea, and button elements, possibly a few more I'm forgetting. You will have to use JavaScript to "transcribe" the li elements to one of these, possibly an <input type="hidden">. For instance:
var form = $formselector
form.onsubmit = function() {
var chosen = form.getElementsByClassName("chosen");
for (var i=0; i<chosen.length; i++) {
form.innerHTML += '<input type="hidden" name="chosen[]" value="'+chosen[i].id+'">';
}
}
This should loop through your form, finding all elements with class chosen and adding a hidden input with the ID of that element. Note that you might need to change the name of the hidden input element to match your server-side code. Also make sure you update $formselector to actually match your form.
You need to create a hidden input and assign value to it by javascript or jquery.
<form class="form-horizontal" role="form">
<input type="hidden" name="my_data" value="" />
<div class="form-group">
<ul class="select_list">
<li id="s1" class="chosen">Apple</li>
<li id="s2" style="display: none;">Peach</li>
<li id="s3" style="display: none;">Plum</li>
<li id="s4" class="chosen">Banana</li>
<li id="s5" style="display: none;">Grapes</li>
<li id="s6" class="chosen">Pear</li>
<li id="s7" style="display: none;">Kiwi</li>
</ul>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
<script>
$('.select_list').change(function(){
$('.my_data').val($(this).val());
});
</script>
Try this...
I figured it out:
var value = [];
$('.chosen').each(function(){
value.push(this.id.substring(1));
});
$('.form-horizontal').submit(function(){
$('.form-horizontal').append('<input type="hidden" value="' + value +'"/>');
}