radio button for answering quiz and my radio button is

<input id="ans_ans1" name="ans" type="radio" value="ans1">

my next ajax request is

<a href="#" onclick="Element.show('loader'); jQuery.ajax({data:'answer='+$('ans').value+'&amp;passed_question=1&amp;'+'&amp;exam_group_id=1&amp;' + '&amp;authenticity_token=' + encodeURIComponent('GGKdjhC39b1Fi5fe52Cq0VcPwpi6laphZblC/5ZOl8o='), dataType:'script', success:function(request){Element.hide('loader')}, type:'post', url:'/answers/next'}); return false;">Next</a>

in my console

$('ans').value gives TypeError: Cannot read property 'value' of null

any one help me to get the value of radio button in ajax request

radio button for answering quiz and my radio button is

<input id="ans_ans1" name="ans" type="radio" value="ans1">

my next ajax request is

<a href="#" onclick="Element.show('loader'); jQuery.ajax({data:'answer='+$('ans').value+'&amp;passed_question=1&amp;'+'&amp;exam_group_id=1&amp;' + '&amp;authenticity_token=' + encodeURIComponent('GGKdjhC39b1Fi5fe52Cq0VcPwpi6laphZblC/5ZOl8o='), dataType:'script', success:function(request){Element.hide('loader')}, type:'post', url:'/answers/next'}); return false;">Next</a>

in my console

$('ans').value gives TypeError: Cannot read property 'value' of null

any one help me to get the value of radio button in ajax request

• javascript
• jquery
• ajax

• Because there is no element with tag name as 'ans'. It should have been $('#ans_ans1').val(). – Harry Commented Oct 16, 2013 at 8:47
• Are you sure you're using jQuery and not Prototype or MooTools? "$('ans').value gives TypeError: Cannot read property 'value' of null" That makes no sense with jQuery. jQuery's $ function always returns non-null. It may return an empty set, but it will return non-null. Whereas the $ from either Prototype or MooTools will return null if there's no element with the matching id (and there isn't, in your example). – T.J. Crowder Commented Oct 16, 2013 at 8:50

7 Answers 7

It looks to me like you're using a mix of jQuery and either Prototype or MooTools. (See below for why.)

If so, my first remendation is stop doing that. Pick one and use it throughout.

But your main problem is that you're looking up an element using an id ("ans") that doesn't exist. The id is ans_ans1. So either:

$("ans_ans1").value         // Prototype / MooTools using raw `value` prop

or

$("ans_ans1").getValue()    // Prototype
$("ans_ans1").get('value'); // MooTools

or

jQuery("#ans_ans1").val()   // jQuery

Why I think you're using a mix of libraries:

1. You've said:

   $('ans').value gives TypeError: Cannot read property 'value' of null

   That makes no sense with jQuery. jQuery's $ function always returns non-null. It may return an empty set, but it will return non-null. Whereas the $ from either Prototype or MooTools will return null if there's no element with the matching id (and there isn't, in your example).

2. When calling jQuery's ajax, you're using the symbol jQuery, not $, which suggests to me you're using jQuery's noConflict so that you can have Prototype or MooTools co-exist with it (because those want $).

Since it appears you're using PrototypeJS along with jQuery -- Element.show():

Prototype's $() expects its argument to be the value of an id rather a name. So

$('ans').value

should be

$('ans_ans1').value

To match the <inputid="ans_ans1"...> in the markup.

If you'd like to select by name instead, you can use $$() with an attribute selector. Though, it'll return a collection.

$$('[name="ans"]')[0].value

try with

<a href="#" onclick="Element.show('loader'); jQuery.ajax({data:'answer='+$('#ans_ans1').value+'&amp;passed_question=1&amp;'+'&amp;exam_group_id=1&amp;' + '&amp;authenticity_token=' + encodeURIComponent('GGKdjhC39b1Fi5fe52Cq0VcPwpi6laphZblC/5ZOl8o='), dataType:'script', success:function(request){Element.hide('loader')}, type:'post', url:'/answers/next'}); return false;">Next</a>

Change this to

$('ans').value

This

$('#ans_ans1').val()

The selector is wrong and the method to retrive value :

Modified:

<a href="#" onclick="Element.show('loader'); jQuery.ajax({data:'answer='+$('#ans_ans1').val()+'&amp;passed_question=1&amp;'+'&amp;exam_group_id=1&amp;' + '&amp;authenticity_token=' + encodeURIComponent('GGKdjhC39b1Fi5fe52Cq0VcPwpi6laphZblC/5ZOl8o='), dataType:'script', success:function(request){Element.hide('loader')}, type:'post', url:'/answers/next'}); return false;">Next</a>

You should refer this jquery selectors

You can change

$('ans').value

into

$("input[value='ans1']" ).val()

or

$('#ans_ans1').val()

just use

$('#ans_ans1')

or

$("input[id='ans_ans1']")

or

$("input[name='ans']")

to get the value just Use val() like this $('#ans_ans1').val();

I guess you should study some content on jquery selectors