my html code:
<li id='category-10'>
<label class="selectit">
<input value="10" type="checkbox" name="post_category[]" id="in-category-10" /> Developmental
</label>
</li>
my javascript code:
function onCategoryClick() {
$(".selectit").click(function(e){
var categoryValue = $(e.target).text();
alert("The value is " + categoryValue);
});
}
This returns me the string "The value is Developmental" but what I want is "The value is 10"
I'm new to Javascript, how would I go about targeting the value field in the input, instead of the text?
I've also tried
var categoryValue = $(e.target > input).value;
But this doesn't return anything.
Instead of
$(e.target).text();
try
$(this).find('#in-category-10').val();
Here e.target corresponds to the label . And it has text 'Developmental' and also a nested input element.
So you need to use find to access it. (If there is no id)
But ID is supposed to be unique on the page. So to access the element you can directly used the id selector
var categoryValue = $('#in-category-10').val();
And remember that input has no text property. Need to use the val method
Related
I am creating an A/B test variant using VWO.
The website has a list with checkboxes laid out like so;
<ol>
<li>
<label>
<input class="checkBox" type="checkbox">
<p class="checkBoxAnc">Text to grab</p>
</label>
</li>
</ol>
There is an apply button, when this is clicked I want it to cycle through all of the inputs. If checked is true then I need to grab the text from the class "checkBoxAnc" (p element) and concatenate it to a variable.
I have tried the following:
var self= $(this);
//This is referring to the input that the user has clicked, so class '.checkBox'
self.next() // This doesn't work as element's do not match
self.nextUntil('.checkBoxAnc') // Same issue as .next()
var checkBoxSibling = self.parent().find('.checkBoxAnc').text();
// This returns an empty string
When trying to find the parent type this is being returned as 'undefined' rather than 'label'
Are there any other techniques to access '.checkBoxAnc'?
Something like this...
var foo = '';
$('input[type=checkbox]:checked').map(function() {
foo += $(this).next().text(); // value your looking for
}).get();
https://jsfiddle.net/cmac_/8w7vghbt/
I have a javascript snippet in which I'd like to retrieve the value of a hidden input located in the first column of selected row :
var global_id = $(this).find("td:first").html();
console.log("value=" + global_id);
I get as result :
value =<input id="id" name="id" type="hidden" value="2">
When I try
var global_id = $(this).find("td:first").val();
console.log("value=" + global_id);
I get as result :
value =
So, I need to know :
Why in the second way, the variable is empty
How can I resolve my code to retrieve the first input hidden value?
You need to reference the actual input element, not the containing element. This will find the input element if it is hidden using type="hidden", using css or using jQuery's hide()
var global_id = $("td:first input:hidden:first", this).val();
console.log("value=" + global_id);
i want to get input text value of array in javascript
this is my code :
Item : <input id="t_item" name="t_item[]" type="text" class="teks3">
Cost : <input id="t_cost" name="t_cost[]" type="text" class="teks3">
<input type="button" id="tb_more_item" class="add_file"/>
and the js code is :
$("input#tb_more_item").click(function(){
var new_file = $("
Item : <input id='t_item' name='t_item[]' type='text' class='teks3'/>
Cost : <input id='t_cost' name='t_cost[]' type='text' class='teks3'/>
");
$("div#div_item").append(new_file).fadeIn();
});
i try to get more item value with this code :
var item_value = [], cost_value = [];
$("input#t_item").each(function() {
$thisItem = $(this);
item_value = $thisItem.val();
});
$("input#t_cost").each(function() {
$thisCost = $(this);
cost_value = $thisCost.val();
});
alert(item_value +"-"+ cost_value );
the result is get the last value value i've typed in the input text.
does anyone have the solutions?
thanks
You're creating invalid html by appending elements with duplicate ids. Update the .each() selectors to use the name attribute instead.
Also, inside the .each() functions you are overwriting the array variables with the value of the current item - that is, the array gets thrown away and replaced with the value, which is why that variable holds only the last value after the .each() finishes. What you want to do is add the value of each input as a separate element in the array:
$('input[name="t_item\\[\\]"]').each(function() {
item_value.push(this.value);
});
And similar for t_cost.
I have this html code:
<div class="category" id="154"> Category </div>
<div class="category2" id="156"> Category2 </div>
<div class="category3" id="157"> Category3 </div>
<div class="category4" id="158"> Category4 </div>
<input type="text" />
So in example if I write a id in text box, how to select div .category with this ID and get inner HTML text. With jQuery
so you only need to use the ID as this is a unique value (or should be)
var html = $("#154").html();
NOTE: If you do have duplicate ID values in use then it is important to note that JQuery will only select the first one.
if you want to do this when a textbox value is entered you could do this on the textbox change event...
$("input").change(function(){
var id = $(this).val();
var element = $("#" + id);
if(element){
var html = element.html();
//do something with html here
}
});
NOTE: you may want to put an ID value on your textbox to ensure you get the correct control
Although I strongly suggest you find a way around using duplicate ID values, you could have a function like this to get the DIV you want...
function GetContent(className, id) {
var result = null;
var matchingDivs = $("." + className);
matchingDivs.each(function(index) {
var div = $(matchingDivs[index]);
if (div.attr("id") == id) {
result = div.html();
}
});
return result;
}
Click here for working example
I recommend you give the textbox an ID, in case you add other textboxes to the page.
But if you only have the 1 text input, the following would work:
var id = $('input:text:first').val();
var innerHtml = $('#' + id).html();
Here is a jsFiddle that will alert the html using this technique whenever the text in the textbox changes.
$("#id.class")
will select the necessary element by both class and ID (replacing id and class with their respective names, of course).
Adding .html() to the end will get you the content.
i.e:
$("#id.class").html()
How to iterate over enumerated Check List (check boxes) using JQuery?
Hello there, I have the following check list (containing two check boxes which have two different e-mail addresses in them):
<div id="emailCheckListId" class="checkList">
<ul id="emailCheckListId_ul">
<li>
<label for="mycomponent.emailCheckList_0" class="checkListLabel">
<input type="checkbox"
value="johndoe1#example.com"
id="mycomponent.emailCheckList_0"
name="mycomponent.emailCheckList"/>
johndoe1#example.com
</label>
</li>
<li>
<label for="mycomponent.emailCheckList_1" class="checkListLabel">
<input type="checkbox"
value="johndoe2#example.com"
id="mycomponent.emailCheckList_1"
name="mycomponent.emailCheckList"/>
johndoe2#example.com
</label>
</li>
</ul>
Am able to use a JavaScript event listener to populate / remove from a text field, every time a user clicks on an individual check box using this:
// Event listener which picks individual contacts
// and populates input field.
$('#emailCheckListId_ul input:checkbox').change(function() {
// Declare array
var emails = [];
// Iterate through each array and put email addresses into array
$('#emailCheckListId_ul input:checkbox:checked').each(function() {
emails.push($(this).val());
});
// Assign variable as To: text field by obtaining element's id.
var textField = document.getElementById("mycomponent.textfield");
// Add / Remove array from text field
textField.value = emails;
});
However, I now have an enumerated check list... Just need to append / concatenate the index number (which I stored in an hidden field and can always obtain the
correct one), but can't seem to see how to pass in the second iterator's input:checkbox:checked.
Here's the HTML source of the checked list:
<div id="mycomponent.comment0.replyToRecipientsCheckList"
class="checkList"
onclick="selectIndividualRecipients()">
<ul id="mycomponentcomment0.replyToRecipientsCheckList_ul">
<li>
<label for="mycomponent.comment0.replyToRecipientsCheckList_0"
class="checkListLabel">
<input type="checkbox"
value="johndoe1#example.com"
id="mycomponent.comment0.replyToRecipientsCheckList_0"
name="mycomponent.comment0.replyToRecipientsCheckList"/>
johndoe1#example.com
</label>
</li>
<li>
<label for="mycomponent.comment0.replyToRecipientsCheckList_1"
class="checkListLabel">
<input type="checkbox"
value="johndoe2#example.com"
id="mycomponent.comment0.replyToRecipientsCheckList_1"
name="mycomponent.comment0.replyToRecipientsCheckList"/>
johndoe2#example.com
</label>
</li>
</ul>
</div>
JavaScript:
// Uses an event listener which picks individual contacts
// and populates input field.
function selectIndividualRecipients() {
var checkListPrefix = 'mycomponent.comment';
var index = document.getElementById("commentHiddenField").value;
var checkListPostfix = '.replyToRecipientsCheckList_ul';
var event = checkListPrefix + index + checkListPostfix;
$(event).change(function() {
// Declare array
var emails = [];
// Iterate through each array and put email addresses into array
// THIS DOESN'T SEEM TO BE WORKING:
var test = '#' + event.attr('id') + 'input:check:checked';
$(test).each(function() {
alert('inside iterator');
alert('this.val: ' + $(this).val());
emails.push($(this).val());
alert('emails = ' + emails);
});
// Assign variable to Reply To: text field by obtaining element's id.
var textField = document.getElementById(indexedReplyTextField);
// Add / Remove array from text field
textField.value = emails;
}
The browser says that ($test).each() throws an exception which is not caught and this is not allowed...
What am I possibly doing wrong?
Have you tried changing your var test declaration as follows?
var test = '#' + event.attr('id') + ' input:checkbox:checked';
Notice the space before input and checkbox instead of check.
There may be an easier method:
$('div.checkList').delegate('input', 'change', function() {
textField.value = $('div.checkList ul li input:checked').map(function() {
return $(this).val();
}).get().join('; ');
});