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?
Related
So I try to select a div within another div. My html goes like this:
<div id="Stage_game_page1"><div id="cube0">[...]</div><div id="cube1">[...]</div></div>
I want to select my #cube0 within my Stage_game_page specifically, with jQuery or JS.
The goal of the selection is to use it in an loop.
I tried :
var count =$("#Stage_game_page").children().length;
for(i=0; i<count;i++){
$("#Stage_game_page")$("#cube"+i)[...]
}
I don't understand what I'm doing wrong.
var count =$("#Stage_game_page").children().length;
for(i=0; i<count;i++){
$("#cube"+i);
}
This is sufficient to select the "#cube0"/"#cube1"/"#cube2" etc. especially since ids are always unique. To answer the question $("#cube0", "#Stage_game_page")... that is how you select a div in another div
The id attribute should only be used once! I see above that you're using id="cube0" twice. If you want your divs to be recognized in multiple instances, use a class instead (the . instead of the #). Using the same id twice will probably break your script.
I believe for your html, you could use id "cube0", "cube1", etc., as long as you're ok with entering them manually. That should work for the loop you'd like to use.
Loops through each div that starts with the id cube inside Stage_game_page1
$("#Stage_game_page1 > div[id^='cube']").each(function () {
alert($(this).html());
});
JSFiddle
Child Selctor
Starts with Selector
use each() for loop.
$('#Stage_game_page1').children().each(function(index) {
// your code here with index starts from 0
});
or this using jquery attribute starts with selector
$('#Stage_game_page1').find('[id^="cube"]').each(function(index) {
// your code here
});
You need to use .find() or .children() or the like.
The correct jQuery usage would be
$("#Stage_game_page").find('#cube'+i)
to find a div with that id inside the container #stage_game_page
You have duplicate cube0 in your html code..
and i think the look should contain something like that:
$("#cube"+i)[...]
One another solution is:
$("#Stage_game_page1 div[id='cube0']")
The following code should enable the second select element (id=ANSWER.TTQ.MENSYS.8.) when the value in the first select element (id=ANSWER.TTQ.MENSYS.9.) changes, but it doesn't work and I've exhausted all the options I can think of, including those suggested already on this site. (NOTE: the element ids must be these values, hence I'm not using # to select them, as that doesn't work).
$(document).ready(function() {
$("input[id='ANSWER.TTQ.MENSYS.9.']").bind('change',function() {
alert ('this script runs');
$("input[id='ANSWER.TTQ.MENSYS.8.']").removeAttr('disabled');
});
});
If I substitute the enabled select (id=ANSWER.TTQ.MENSYS.9.) with a button and the change event with a click event; it works. So why not with change event on the select element?
Thank you for your help.
Firstly, you can select by id using the # character. Secondly you need to escape the . in the id attribute otherwise the selector engine will look for an element with the id ANSWER which also has TTQ, MENSYS and 9 as classes. Try this:
$("#ANSWER\\.TTQ\\.MENSYS\\.9\\.").bind('change', function () {
alert('this script runs');
$("#ANSWER\\.TTQ\\.MENSYS\\.8\\.").removeAttr('disabled');
});
Example fiddle
$(document).ready(function() {
$("#ANSWER.TTQ.MENSYS.9.").bind('change',function() {
alert ('this script runs');
$("#ANSWER.TTQ.MENSYS.8.").removeAttr('disabled');
});
});
select is not input( i.e. text input)
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().
I have multiple buttons in a form (all are type 'submit'). I would like to determine which one of them is clicked. I am currently using:
$(".MyForm").click(function() {
...
}
to get values from my form. Any help is greatly appreciated.
Inside your handler, 'this' is the DOM element that was clicked, and $(this) is the jQuery object for that DOM element. So...
$(".MyForm").click(function() {
var buttonId = $(this).attr('id');
//...
}
You define an id for each button then you can use $("#buttonid").click to define different action for each button you like or test the id with .attr('id')
I'm not sure if I have the syntax correct in the code below, I'm trying to append a var to a string parameter within the find function. I'm trying to search for a unique id within each input element of a particular form.
//Get value attribute from submit button
var name = $('#myForm').find('input#submitThis').val();
//Other code that manipulates the name variable
//Submit button in hidden form
$('.submitLink').click(function(){
$('#myForm').find('input#'+name).click();
return false;
});
The element with a submitLink class is supposed to be tied to the submit button in the form. I don't think I have the syntax correct though, when I go back and click the element that has the submitLink class, nothing happens.
The syntax appears fine to me. To be sure the selector is what you are expecting it to be, you could do something like this:
$('.submitLink').click(function() {
var selector = 'input#' + name;
alert(selector);
/* rest of the code */
});
Try adding an alert to test the var inside the event handler (and to see that the handler is fired). Also, if you are looking for an element with a specific id you don't need to include the element type. Like this:
$('.submitLink').click(function (event) {
event.preventDefault();
alert(name);
$('#' + name, $('#myForm')).click();
});
NOTE: If you are trying to find an element by its name rather than ID you must use $("input[name='foo']").