javascript - TypeError: Cannot read property 'value' of null - Stack Overflow

admin管理员组

文章数量:1312811

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

Share Improve this question Follow edited Oct 16, 2013 at 8:47 웃웃웃웃웃 12k1515 gold badges6262 silver badges9494 bronze badges asked Oct 16, 2013 at 8:45 Rajasekar SankarRajasekar Sankar 10122 gold badges33 silver badges1313 bronze badges 2

• 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

Add a ment  | 

7 Answers 7

Sorted by: Reset to default 3

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

本文标签： javascriptTypeError Cannot read property 39value39 of nullStack Overflow