So I would like to set a variable to the text of an element when that element is clicked:
$('.clickme').click(function() {
var selected;
var selected = this.text();
});
I've looked at the documentation and I believe this should work. Any ideas what the issue might be?
Try:
var selected = $(this).text();
If no luck, maybe it's form element so it has value:
var selected = $(this).val();
If still no luck let us know what is clickme (div? span?) and try this as "last resort":
var selected = $(this).html();
if .clickme is input or textarea :
var selected;
$('.clickme').click(function()
{
selected = $(this).val();
});
Other :
var selected;
$('.clickme').click(function()
{
selected = $(this).text();
});
You need to wrap the this with the jQuery object...
var selected = $(this).text();
If your listener is on a button, IE doesn't know the difference between the text and value properties and jQuery doesn't fix it, getAttribute doesn't help either. You need to use getAttributeNode:
<button value="the value"
onclick="alert(this.getAttributeNode('value').value);">The text</button>
Related
I want to know the elements that are not selected inside a select form. (This select has been created dynamically with a for loop).
I know how to know the selected values,
$('#bbdd_btn').click(function(){
$("#select_nodes").each(function() {
var selected = $(this).children(":selected").val();
console.log(selected);
});
});
But I want to know the non selected. I've reading some posts and I found this answer but I don't know how to do it correctly. I try this,
$('#bbdd_btn').click(function(){
$("#select_nodes").each(function() {
var selected = $(this).children(":selected").val();
console.log(selected);
var not_selected = $(this).children:not(":selected").val();
//var no_selected = $(this):not(":selected").val();
//var no_selected = $(this).children(:not(":selected").val();
console.log(not_selected);
});
});
Which is the right way to do it?
Thank you very much.
you can change your code in this way
$('#bbdd_btn').click(function(){
$("#select_nodes option").each(function() {
if($(this).is(':selected')){
console.log(selected);
}else{
console.log(not_selected);
}
});
});
I can't figure out how to get the select tag value. I need to alert the text value "ART"
Any Idea?
<select class='category_drop43' value="ART"><option value='test'>Test</option></select>
$(document).ready(function(){
$('.category_drop43').change(function() {
var keyword = $('select' this ).val();
alert(keyword);
});
})
You need to use .val() instead of .value():
var keyword = $(this).val();
or better using pure javascript to get the value:
var keyword = this.value;
Please note that select does not have value attribute as well as your select don't have any class name as .category_drop43, so you can either add this class to your select
<select class="category_drop43"><option value='test'>Test</option></select>
or target the select element using:
$(document).ready(function(){
$('select').change(function() {
var keyword = this.value;
alert(keyword);
});
});
value is invalid HTML attribute for select element, you can use data-* HTML5 attribute instead:
<select class="category_drop43" data-value="ART"><option value='test'>Test</option></select>
then you can use .data() to retrieve the value:
$(document).ready(function(){
$('select').change(function() {
var keyword = $(this).data('value');
alert(keyword);
});
});
Fiddle Demo
I have two select tags in my website. When I try to get the text of selected item in one select tag, I see that it returns the two texts of the two select tags, even if I specify which select to retrive data from via a class attribute.
My code is
$('select.select').change(function(e) {
e.preventDefault();
var val1 = $(' option:selected').text();
alert(val1);
});
$('select.select2').change(function(e) {
e.preventDefault();
var val2 = $(' option:selected').text();
alert(val2);
});
The alerts are always containing the text of the two select tags concatenated.
Your usual help is appreciated.
Perhaps update the selector to specify the context of the selection:
$('select.select').change(function(e) {
e.preventDefault();
var val1 = $('option:selected', this).text();
alert(val1);
return false;
});
The selector $('option:selected', this) will return values found within the context of the changed element.
It is because of this $('option:selected').text(); you have two selected option in your page so it returns two values.
You need to do this:
// Call the change event for the select
$('select.select').change(function (e) {
e.preventDefault();
// Get the selected option for the select in current scope
var text = $(this).find('option:selected').text();
alert(text );
//return false; No need of this, as we already called the preventDefault() method
});
you need to specify the class when you retrieve the value:
var val1 = $('.select option:selected').text();
and
var val2 = $('.select2 option:selected').text();
I have a textarea like so,
<textarea id="txtaFilter" cols="45" rows="5"></textarea>
and the following script,
$(document).ready(function () {
$(".selector").bind('change', function () {
var value = $(this).val();
$("#txtaFilter").val($("#txtaFilter").val() + value);
$(this).children('option:eq(0)').prop('selected', true);
});
});
where ".selector" is a class applied to two dropdownlists.
When I chose a value on the dropdown, it appears to do nothing, but after looking at the debugger in chrome it is changing the value just not displaying it.
Does anyone know why this is? Is there something special I'm missing about the .val() property?
Problem/Solution:
I forgot that there are multiple "#txtaFilter"'s on the page when I removed the $(this).siblings("#txtaFilter"), So it was accessing the hidden one instead of the visible one. Sorry about that, guess I was wrong on the question too :/
You can use val method:
$("#txtaFilter").val(function(i, oldVal){
return oldVal + value
});
Use .val() to get the text of a textarea.
$(document).ready(function () {
$(".selector").bind('change', function () {
var value = $(this).val();
var txtaFilter = $("#txtaFilter");
txtaFilter.val(txtaFilter.val()+value);
$(this).children('option:eq(0)').attr('selected', true);
});
});
I want to be able to mouse over a <div> and use JavaScript to get the information (for example the id) and store it in a variable.
What would be the most efficient way to make this happen?
This sould do it for you :
$('div').mouseover(function(){
var content = $(this).html();
var id = $(this).attr('id');
alert('the element\'s ID is: '+id+'and content is: '+content);
});
$('#yourDivId').hover(function(){
var value = $(this).html();
});
You can try this:
var currentDivID;
var currentDivValue;
$(document).ready(function(){
$('div').mouseover(function(){
currentDivID = this.id
currentDivValue = $(this).html();
});
});
besides the fact that div's doesn't have values, you can store it's text or argument or something else.
var someVar = '';
$(document).ready(function(){
$('div').mouseover(function(){
someVar = $('div').html();
someVar = $('div').attr('id');
someVar = $('div').attr('class');
someVar = $('div').find('input').val();
}
});
$("div").bind("mouseenter",function(){
var divHTML = $(this).html();
});
here is the fiddle http://jsfiddle.net/fveRk/
Here is a simple example:
<div id="test">Hello world!</div>
$('#test').mouseover(function(){
var test = $(this);
console.log(test);
});
http://jsfiddle.net/4uLzf/
Attach a mouseover event to the div.
Using jquery:
$('#theDiv').mouseover(function() {
var value = $(this).html();
//store value
});
jQuery has a nice way to detect the hovering: http://api.jquery.com/hover/
When you say "get the value" are you talking about getting the div's contents? In that case, the html() jQuery method will do it.
http://api.jquery.com/html/