Uncaught TypeError: Unable to set property value to 'null

Question

I am trying to pass the entered text to the controller using an ajax request. But I get the error "Uncaught TypeError: I can not set the value of the" null "property when trying to execute a JS file.

Here is the HTML code:

<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 fix this.

Answer 1

You have no item with id u . That is why an error occurs. Note that the global variable document.getElementById("u").value means that you are trying to get the value of an input element named u and it is not defined in your code.

Answer 2

The problem may be where the code is executed. If you are at the head of a document executing JavaScript, even if you have an element with id = "u" in your web page, the code runs before the DOM loads and therefore no HTML exists yet ... You can fix it this by moving your code to the bottom of the page just above the closing html tag. This is one of the good reasons to use jQuery.

Answer 3

The problem is that you do not have an element with id u so that you call something that does not exist.
To fix this, you must add id to the element.

 <input id="u" type="text" class="searchbox1" name="search" placeholder="Search for Brand, Store or an Item..." value="text" /> 

And I also saw that you added a value for the input, so this means that the input is not empty, and it will contain text. As a result, the placeholder will not be displayed.

Finally, there is a warning that the W3Validator will say due to a “/” at the end.

For the current document, the validator interprets strings, for example, according to outdated rules that violate the expectations of most authors and, thus, cause confusing warnings and error messages from the validator. This interpretation is triggered by HTML 4 documents or other SGML-based HTML documents. To avoid messages, simply remove the “/” character in such contexts. NB: If you expect <FOO /> to be interpreted as an XML-compatible "self-closing" tag, then you need to use XHTML or HTML5.

The conclusion is that you need to remove the slash. Just write this:

 <input id="u" type="text" class="searchbox1" name="search" placeholder="Search for Brand, Store or an Item..."> 

Answer 4

I knew it was too late for this answer, but I hope this helps others who collide and who collide.

As you wrote, h_url is a global var like var = h_url; so you can use this variable anywhere in your file.

• h_url=document.getElementById("u").value; Here h_url contains the value of your text value in the search field that the user typed.

• document.getElementById ("U"); This is the identifier of the form field with a specific ID .

• Search field without ID

  <input type="text" class="searchbox1" name="search" placeholder="Search for Brand, Store or an Item..." value="text" />

• Change search field using ID

  <input id="u" type="text" class="searchbox1" name="search" placeholder="Search for Brand, Store or an Item..." value="text" />

• When you click on submit, which will try to extract the value from document.getElementById("u").value; which is syntactically correct, but you did not define an identifier to return null .

• So, just make sure that when using form fields, first identify this identifier and complete the other letter of the task.

Hope this helps you and never gets the Cannot set property 'value' of null error.

Answer 5

It seems that this function

 h_url=document.getElementById("u").value; 

You can help yourself with some "console.log" to find out which Null object.

Answer 6

h_url=document.getElementById("u") here is null.

No item with id like u

Answer 7

If someone has landed on this page for a similar problem, I have found that this error can occur if your JavaScript is running in HEAD before your form is ready. Moving JavaScript at the bottom of the page fixed this for my situation.

Answer 8

Guys, this error is due to the fact that the element ID is not visible from js. Try checking the element from the user interface and inserting it into the javascript file:

before:

 document.getElementById('form:salesoverviewform:ticketstatusid').value =topping; 

After:

 document.getElementById('form:salesoverviewform:j_idt190:ticketstatusid').value =topping; 

Credits Divya Akke .... :)