Uncaught TypeError: Cannot set property 'value' of null

Question

I'm trying to pass the entered text to the controller using an ajax request. But i'm getting athe error "Uncaught TypeError: Cannot set property 'value' of null " when I tried to execute JS file..

Here is the HTMLcode:

<form action="">     <input type="text" class="searchbox1" name="search" placeholder="Search for Brand, Store or an Item..." value="text" />     <input type="button" class="searchbox_submit1" name="submit" value="text" onClick="javascript:getSearchText();"> </form> 

Here is the JS code:

function getSearchText() {     var searchText = document.getElementByName("search").value;     h_url=document.getElementById("u").value;     var theURL = h_url+'search_all/' + deptid + '/' + searchText + '/1';     $.ajax({         url : theURL,         fail: function(){         },         success : function() {         },         error:function(){         }     }); } 

Please help me to fix this.

Answer 1

You don't have an element with the id u.That's why the error occurs. Note that you are trying to get the value of the input element with the name 'u' and it's not defined in your code.

Answer 2

The problem may where the code is being executed. If you are in the head of a document executing JavaScript, even when you have an element with id="u" in your web page, the code gets executed before the DOM is finished loading, and so none of the HTML really exists yet... You can fix this by moving your code to the end of the page just above the closing html tag. This is one good reason to use jQuery.