jQuery click(fn) won't work with input element - javascript

I want to use jQuery to detect clicks on a bunch of radio buttons. They have all been assigned a css class, foobar, to detect them. Easy, right? Still, this code doesn't work:
$("input.foobar").click(function ()
{
alert(this.id);
}
);
What wrong with the code above?
Does this.id really return the id of the current radio button?
EDIT: The HTML on the page is really borked (doesn't valdiate), so maybe that's the problem...
EDIT 2: The HTML is messed up beyond salvation. Will have to let it be and fix a workaround. May the HTML Gods forgive me!

$("input.foobar").change(function () {
alert(this.id);
});

Essentially there is nothing wrong with your code, it should work. But maybe the html would help, to understand where the problem lies.
And to answer your second question, yes, 'this.id' is valid javascript.

Try
$("input.foobar").change(function ()
rather than .click(function ()

There is nothing wrong with your code example and it works as expected for me:
<input type="radio" class="foobar" id="x1" />
<input type="radio" class="foobar" id="x2" />
<input type="radio" class="foobar" id="x3" />
Clicking on the radios shows the alert box with the radio's id. Did you really click on the box, not some surrounding text or label element?

Related

Any Change in textbox will automatically check the checkbox

Hi I have coded a Grid view where we have one checkbox and two textbox. My need is that as we make any change in textbox like modify text from 0 to 1, the Checkbox should get automatically checked. This code is in asp.net and this can be done by javascript or Jquery.
Need code to do this activity.
Try this example
Html
<input type="text"/>
<input type="checkbox"/>
Script
$('input[type="text"]').keypress(function(){
$('input[type="checkbox"]').attr("checked","checked");
});
Working demo
This will be Better answer of this question.. I initially debug by help of Manoj. Thanks again.
HTML
<input type="text" id="selector"/>
<input type="checkbox" id="myCheckbox"/>
SCRIPT
$('#selector').change(function () {
$('#myCheckbox').prop('checked', true); // Checks it
alert($('#selector').val());
});

How to find specific ID with Jquery and perform action

I have 2 styles radio buttons with Enable / Disable, please check below..
<p class="switch-options">
<label class="cb-enable selected" data-id="company_slogan_check">
<span>Enable</span>
</label>
<label class="cb-disable" data-id="company_slogan_check">
<span>Disable</span>
</label>
<input id="company_slogan_check" class="checkbox" type="hidden" value="0" name="company_slogan_check">
<input id="company_slogan_check" class="checkbox main_checkbox" type="checkbox" value="1" name="company_slogan_check" checked="checked">
</p>
and I want to check if the "Enable" button is clicked I want to hide some DIV within the code. I am trying with the following code but nothing works..
jQuery('#company_slogan_check').click(function() {
alert('sssss');
});
it doesnt even respond to the click.. can someone please help..
data-id is not the same as an id, to which the css selector #something would apply to id="something".
It would be easier to use .switch-options input
thanks guys, I did another workaround.. cheers
if($(this).attr('data-id') == "company_slogan_check")
alert('clicked');
first of all ID's need to be unique as already mentioned..
second your not using radio buttons u use a checkbox..
and way not try the ":checked" ?
something like this:
$("#company_slogan_check").change(function(){
if($(this).is(':checked')){
// your function
}
});
hope this was helpful

javascript working with <input type="button" ...> and not with <button ...>

Hi I´m new with javascript and I´m trying to learn everything I can and I came yesterday to this problem. I was trying to programe my own calculation, but this problem occured:
with this input, the script is working well:
<input type="button" value = "1" onClick = "pridajZnak(kalkulacka, jedna)">
but with this, it´s kind of broken:
<button name="jedna" onClick="pridajZnak(kalkulacka, jedna)">1</button>
The problem is that function pridajZnak is adding one char to the actual value of different element, input working well, but button is doing funny things, after button pressed it will just blick with added char and then come back to previous state...
Can someone tell me where´s the problem? I just want to undestand the difference...thanks
try this type="button" like this
<button name="jedna" type="button" onClick="pridajZnak(kalkulacka, jedna);">1</button>
hope it will help
Button tag has attribute value. Assign the value and I think it should be fine
try placing return false; on onclick event. Example:
<button name="jedna" onClick="pridajZnak(kalkulacka, jedna); return false;">1</button>
Does this solve your problem?
<input type="button" name="jedna" onClick="pridajZnak(kalkulacka, jedna)" value="1"></input>
Edit:
Oh! I saw your part about wanting to understand the difference - commendable.
You're using an <input> for the text field and a <button> for the button. It is possible to use an <input> for both. There's some more information about input vs. button in this SO answer. Also, you've set the value as an attribute on the <input>, while you've set the value between the tags on the <button>. I'm fairly sure you can't do this with an <input>.
Good luck!

How To Ensure A CheckBox Is Checked Using Javascript

This is my html Code:
<input type="checkbox" name="test" id="test" />
Here i want to check if the checkbox test is checked or not when clicking on that checkbox.
That means there have function to call when clicked the checkbox and in that function check the test is checked or not using javacsript.
How can i do this?
<input type="checkbox" name="test" id="test" onClick="check(this)" />
In your script : function check(element) {
alert(element.checked);
} Hope this may help you, if not let me know.
The answers of this question kind of make me feel down. I thought that one thing jQuery learned to everybody was at least to not use inline event handlers for the sake of unobtrusive javascript.
With unobtrusive javascript, cross-browser, here is a way to do it:
document.getElementById('test').onclick = function() {
alert(this.checked)
}

when i click on this textbox it gets big but when i click away how do i make it go back to normal?

i'm basically mimicking the share button feature on facebook with jquery and what im trying to do is when i click on the textbox area the textbox gets larger by height. and when i click away it should get back to normal. with the last piece of jquery the code doesnt work at all. what are my options in getting this to work?
thanks.
ps:
i know most of this can be done with css but i'm experimenting with jquery to better learn it. :)
here is my jquery.
$(function() {
$('input[name=search]').click(function() {
$(this).addClass('txthover');
});
$('body').click(function() {
$('input[name=search]').removeClass('txthover');
});
});
the html
<div id="box">
<div id="search">
<input type="text" name="search" /><input type="button" name="btnsearch" value="search" />
</div>
</div>
The proper way to do it would be to use the focus and blur events of the element:
$('input[name=search]').focus(function() {
$(this).addClass('txthover');
}).blur(function() {
$(this).removeClass('txthover');
});
Here is a quick example.

Categories