CODEWITHSUNDEEP
javascriptjqueryhtml
manu29.d
manu29.d

Reputation: 1568

jQuery radio button on change does not work

I have seen this question and I have seen this fiddle.

My Fiddle here. It's a simple question. Why doesn't it work?

#html
<input checked="checked" id="article_format_html" name="article[format]" type="radio" value="html">Some meaningful value
<input id="article_format_text" name="article[format]" type="radio" value="text">Another Value

#js
$("input[name='article[format]']:radio").change(alert('hola'));

Edit:

On popular demand I did this:

.change(function(){alert('hola')});

Fiddle.

Result: Doesn't work.

Edit 2: (Why I had the problem)

So, JS-Fiddle wraps your js code in the head of the iframe that is your Result section. For jQuery selectors (or any js that manipulates the DOM) to work properly, it has to be executed *after* the DOM element has been rendered. Hence, wrapping your code on ready and/or just before body closes, is the safest way to ensure that your query selectors don't return undefined.

Upvotes: 0

Views: 11219

Answers (11)

Sam
Sam

Reputation: 51

You forgot the $(document).ready() and also u forgot to write function() in change()

$(document).ready(function(){
    $("input[name='article[format]']:radio").change(function(){
        alert('hola')
    });
});

Upvotes: 0

Manimaran
Manimaran

Reputation: 76

Use the below code

Always use DOM manipulation and events only after DOM gets fully loaded 

$(document).ready(function(){
        $("input[name='article[format]']:radio").change(function(){alert('hola')});
    });

Upvotes: 0

Awlad Liton
Awlad Liton

Reputation: 9351

put that in side document raedy

like this:

$(document).ready(function () {
$("input[name='article[format]']:radio").change(function(){
    alert('hola')
});
});

demo

Upvotes: 0

Rakesh Shetty
Rakesh Shetty

Reputation: 4568

You code is not working because you are not wrapping your jQuery inside document.ready function:

$(document).ready(function()
{
   $("input[name='article[format]']:radio").change(function()
   {
       alert('hola')
   });

});

FIDDLE DEMO

Upvotes: 3

Mad Angle
Mad Angle

Reputation: 2330

Put the code in document ready and try like this. Please see the syntax too

$(function () {
    $("input[name='article[format]']:radio").change(function () {
        alert('hola')
    });
});

Upvotes: 0

Ghost-Man
Ghost-Man

Reputation: 2187

The code with .on() should be:

$(document).on('change',"input[name='article[format]']:radio",function(){alert('hola')});

Working fiddle: http://jsfiddle.net/e5ByP/10/

Upvotes: 2

Girish
Girish

Reputation: 12117

Please use anonymous callback function in change event

$("input[name='article[format]']:radio").change(function(){
  alert('hola');
});

Upvotes: 0

Abhitalks
Abhitalks

Reputation: 28387

  1. Use a callback or anonymous function block
  2. You are using jQuery 1.11 (better to use .on syntax)

Demo: http://jsfiddle.net/abhitalks/e5ByP/2/

$("input[name='article[format]']:radio").on("change", function() { 
    alert('hola'); 
});

Upvotes: 6

Ishan Jain
Ishan Jain

Reputation: 8161

In your code you not wrap handler with .change()

handler is A function to execute each time the event is triggered.

Type: Function( Event eventObject )

Try This :

$("input[name='article[format]']:radio").change(function(){
  alert('hola')
});

Working Example

Upvotes: 0

Milind Anantwar
Milind Anantwar

Reputation: 82231

That is because you have incorrect change handler syntax. also you need to wrap the code in DOM ready :

$("input[name='article[format]']:radio").change(function(){
  alert('hola')
});

Demo

Upvotes: 1

Amit Joki
Amit Joki

Reputation: 59232

Wrap that in a anonymous function and DOM ready:

$(function () {
    $("input[name='article[format]']:radio").change(function () {
        alert('hola')
    });
});

Demo:http://jsfiddle.net/e5ByP/6/

Upvotes: 1

Related Questions