Not able to retrieve button text JS/Jquery - javascript

I want to retrieve the text of a button that is clicked. I've read up on other suggestions for similar questions, but cant seem to get it to work. Here is the fiddle: http://jsfiddle.net/z3PKm/63/
Which currently isn't working. What am I doing wrong, or what should I do which is right?
Thanks!
I've tried to copy the following solution
alert($(this).attr("value"));
But it still doesn't work for me.

Use this:-
.text() will give you the text of the button as per your example. You are using button and not input type="button" If it was input type="button" then .val() would work.
function test(name) {
alert($(name).text());
}
Since you are using jquery you can use the click event
$('button').on('click',function(){
alert($(this).text());
});

The type of button that you are using are not using value, they are text.
Write this:
$(name).text()

This is how I would do it jQuery style.
This also show you how to use inputs and buttons and text() or val() as appropriate
$('.choose').on('click', function(){
var $this = $(this);
alert('text: '+$this.text()+'\nval: '+$this.val());
}); // end on click

You need to use alert($(name).text()); I have updated the jsfiddle with the same:
jsfiddle

Related

Form with jQuery don't working correct

I'm trying make a form. Where when you select an option, the empty value is removed and the color changes.
But, when you change the option, all empty values are being removed at the same time.
What i have to do to resolve this?
DEMO
$(document).ready(function() {
$('.changeMe').change(function(){
$('.empty').remove();
$(this).css({'color':'black'});
});
});
Thanks in advance
http://jsfiddle.net/Cjdbx/4/
$('.changeMe').change(function(){
$('.empty',this).remove();
$(this).css({'color':'black'});
});
You are removing all classes with empty. You have to only remove the one which is related. So, use this.
Try:
$(this).find('.empty').remove();
Demo
OK, try this:
$(document).ready(function() {
$('.changeMe').change(function(){
var $this = $(this);
$this.parents("div").find('.empty').remove();
$this.removeClass("blue");
$this.addClass("black");
});
});
Basically, you need first to find the parent div (containing the row) and remove any .empty descendants.

Click a text link with jquery

I am trying to click the link found at the bottom of this page with the text "Show more companies".
I tried these two ways so far:
$('a:contains("Show more companies")').click();
$('a:contains("Show more companies")').trigger('click');
but I am getting this error:
TypeError: Object <a class="button AjaxPagerLink" href="http://www.trustpilot.co.uk/categories/computer?page=2">
Show more companies </a> has no method 'click' at Request._callback (C:\app.js:42:43)
Any clues what the problem is? Is my command correct? Any advice/help is really appreciated.
Edit: Tried all these solutions. Getting the same error.
Triggering the class should be easy, but you should verify (it seems so) that there is just an element with that class name.
$(".AjaxPagerLink").trigger("click");
This second version triggers the first class="AjaxPagerLink" element on that page, just to take a wild guess.
$(".AjaxPagerLink")[0].trigger("click");
You can also try a [href^="http"] CSS selector.
$("a[href^='http://www.trustpilot.co.uk/categories/computer?page']").trigger("click");
In general:
Using classes and IDs to retrieve DOM elements is a best practice (as it's also faster than parsing the contained text).
<a href='companies.html' id='show_companies'>Show more companies</a>
You should assign an ID to the element and then trigger a click on that ID:
$('#show_companies').trigger('click');
Just make sure your ID is unique (there must be only a show_companies element in your page).
try this:
$('a.button.AjaxPagerLink').click();
this is better than selecting based on the text.
EDIT: if that is not the issue, then make sure you are calling .click() after you have registered a onClickListener for that link.
Try:
$('a:contains("Show more companies")').click(function(){
var link = $(this).attr('href');
window.location.href = link;
}
$('a:contains("Show more companies")')[0].click();
Try this:
$('a:contains("Show more companies")')[0].click();
You can also use this...
$(document).ready(function () {
$('a:contains("Show more companies")').click(function () {
alert('I am clicked');
});
});

Using javascript on multiple Div Id's

I have created an expanding div that hides on load and expands when clicked using javascript and jQuery. My problem is that I need to use this feature multiple times on each page (10-30x). Is there a way to call the function to work with multiple Div ids using an array or something of that nature (I am a newbie, my apologies), e.g. a few of my div ids would be eb1, eb2, eb3, eb4. and here is my script that currently works on one id:
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('#eb1').hide();
//hides box at the begining
jQuery("#hide").click(function() {
jQuery('#eb1').fadeOut(300);
//jQuery('#the_box').hide();
});
jQuery("#show").click(function() {
jQuery('#eb1').fadeIn(300);
//jQuery('#the_box').show();
});
});
</script>
Any help would be appreciated, even a link to an explanation.
Thanks,
Travis
Further to John Conde's answer this is also possible using attribute-starts-with:
jQuery('div[id^="eb"]').hide();
JS Fiddle demo.
It is, of course, easier to just use a particular class-name, and the selector then becomes:
jQuery('.className').hide();
JS Fiddle demo.
References:
Attribute-starts-with ([attribute^="value"]) selector.
You should be able to do this by separating the ids with a comma:
jQuery('#eb1','#eb2','#eb3').hide();
just type "jquery multiple div show hide" into google:
the first link gives this:
Show/Hide Multiple Divs with Jquery
:)
Maybe it is cleaner to add a css class to all the div (or whatever tag you use) elements that should behave like that, then use that class in the selector ?
jQuery('div.hidable').hide();
//hides all 'hidable' boxes
jQuery("#hide").click(function() {
jQuery('div.hidable').fadeOut(300);
});
etc...
You could create a function to do that.
let me explain
function ToogleDiv(container){
// simple toogle
$(container).toggle();
// a toogle with some effect
$(container).toggle('slow', function() {
// add some action }); }
here's is a Jquery example Toogle Jquery Example
Hope this helps.
You can use Attribute Starts With Selector [name^="value"]
var divs = $('div[id^="eb"]');
$(divs).hide();
$('#show').click(function(){
$(divs).show();
});
$('#hide').click(function(){
$(divs).hide();
});
Live example on JSFiddle
function show(var id){
jQuery(id).fadeIn(300);
}
function hide(var id){
jQuery(id).fadeOut(300);
}
and then, in your divs:
<a id="hide" onClick="hide('eb1')">hide</a>
<a id="show" onClick="show('eb1')">show</a>
<div id="eb1"></div>

getting individual atrributes while selecting a class with JQuery

I'm new to javascript and JQuery, and I'm working in a small project with JSP.
I create a grid dynamically with JSP and I added some buttons wich class is "select" and in the alt attribute I set the current row index. That works perfectly, I'm trying to set the onclick dynamically. This is my code
$('.select').click(function (){
alert($('.select').attr('alt'));
}
I want to each button to show its own index, but that code shows just the first index in each button. I've searched how to do it, but nothing comes out.
Is there a chance to do what I want?
change this line as:
alert($(this).attr('alt'));
When jQuery calls your event handler it sets this to be the DOM element in question, so try this:
$('.select').click(function (){
alert($(this).attr('alt'));
});
If you need to access DOM element properties you can then get them directly, e.g.:
alert( this.id );
this.value = "test";
If you need to use jQuery methods on the element you need to pass it to the jQuery function first, e.g.:
$(this).hide();
$(this).css("color","red").slideDown();
$('.select').click(function (){
alert($(this).attr('alt'));
});
Change
alert($('.select').attr('alt'));
by
alert($(this).attr('alt'));
Now you select the attr alt of the button lauch the event.
Not sure if that's what you're looking for but...
$('.select').click(function() {
$('.select').each(function() {
$(this).attr('value', $(this).attr('alt'));
});
});
This'll have every button "show" the value stored within their alt attribute when you click one button.
By the way, if you're using 1 button per row, you'd probably better go with index().

Button.Click event is not firing up

I am new in JQ. I have created this fiddle here: http://jsfiddle.net/SZ6mY/7/
All I want to do is to show an "ALERT" message when "C" button is clicked. Also I want to know that if you click "7" how you grab the value 7 in a variable in JQ?
Any input is appreciated! Thanks.
change btnClear to #btnClear. The # tells jquery that the following string is an ID and not a class, selector, etc.
$("#btnClear").click(function() {
alert("test");
});
You comment question:
$('input:button').click(function () {
alert(parseInt($(this).val(), 10))
})
this code will look for ALL input buttons and bind this event to them.
You need to add a "#" to specify that you are looking to use the id "btnClear".
You need a number sign to select by id, like $("#btnClear"). As for your second questions, all your numbered buttons are calling a function right now like NumPressed(7); So you can just use the parameter passed to that function. If you want to clean up your code though and remove those onclicks. You can also detect the value of the button like $(selector).val();
you should change the
$("btnClear").click(function() {
alert("test");
});
to
$("#btnClear").click(function() {
alert("test");
});
Then the jQuery can find the input element with id 'btnClear'.
Is that clear?
The number input elements you placed a function named NumPressed with the click event, so you can do it like normal js.
Okay! I did something like this: http://jsfiddle.net/SZ6mY/8/
So I'm assuming that in my seven variable the value 7 will be stored. Is this correct?

Categories

Resources