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.

possible duplicate of [Why does jQuery or a DOM method such as \`getElementById\` not find the element?](http://stackoverflow.com/questions/14028959/why-does-jquery-or-a-dom-method-such-as-getelementbyid-not-find-the-element) — Felix Kling, Apr 19 '13 at 09:32

웃웃웃웃웃 · Answer 1 · 2021-05-23T11:51:03.673

35

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.

edited May 23 '21 at 11:51

answered Apr 19 '13 at 08:38

웃웃웃웃웃

11,829
15
59
91

4

Not the global variable.document.getElementById("u").value means you are trying to get the value of input elemnet with name 'u' and its not defined in your code. – 웃웃웃웃웃 Apr 19 '13 at 08:48

score 25 · Answer 2 · answered Sep 20 '16 at 15:09

25

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.

answered Sep 20 '16 at 15:09

MJMacarty

537
7
17

One relevant thing: this is a good reason to know the fundamentals, i.e., JavaScript, DOM and HTML first. Frameworks, even the best ones, leave you in the dark. – mold Aug 26 '23 at 05:13

score 6 · Answer 3 · answered Jul 29 '14 at 14:49

6

In case anyone landed on this page for a similar issue, I found that this error can happen if your JavaScript is running in the HEAD before your form is ready. Moving your JavaScript to the bottom of the page fixed it for my situation.

answered Jul 29 '14 at 14:49

Ivan Town

445
8
11

Good catch. But when I moved the script to the bottom, I now get no errors, but I still have completed fields (not blank at all). – WilliamK Jul 16 '15 at 05:38

score 4 · Answer 4 · answered Nov 30 '15 at 19:53

The problem is that you haven't got any element with the id u so that you are calling something that doesn't exist.
To fix that you have to add an 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've seen too you have added a value for the input, so it means the input is not empty and it will contain text. As result placeholder won't be displayed.

Finally there is a warning that W3Validator will say because of the "/" in the end. :

For the current document, the validator interprets strings like according to legacy rules that break 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 the 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.

In conclusion it says you have to remove the slash. Simply write this:

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

score 2 · Answer 5 · edited Jun 20 '20 at 09:12

I knew that i am too late for this answer, but i hope this will help to other who are facing and who will face.

As you have written h_url is global var like var = h_url; so you can use that variable anywhere in your file.

h_url=document.getElementById("u").value; Here h_url contain value of your search box text value whatever user has typed.
document.getElementById("u"); This is the identifier of your form field with some specific ID.
Your Search Field without id

<input type="text" class="searchbox1" name="search" placeholder="Search for Brand, Store or an Item..." value="text" />
Alter Search Field with 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 that will try to fetch value from document.getElementById("u").value; which is syntactically right but you haven't define id so that will return null.
So, Just make sure while you use form fields first define that ID and do other task letter.

I hope this helps you and never get Cannot set property 'value' of null Error.

score 2 · Answer 6 · edited May 16 '19 at 10:48

2

guys This error because of Element Id not Visible from js Try to inspect element from UI and paste it on javascript file:

before :

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

After :

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

Credits to Divya Akka .... :)

edited May 16 '19 at 10:48

barbsan

3,418
11
21
28

answered May 16 '19 at 10:32

vinoth kumar

21
2

score 2 · Answer 7 · answered Nov 11 '22 at 21:48

Add defer to your script tag, if it's in header. It will allow your script to execute after the DOM is loaded.

<script src="script.js type="text/javascript"></script>

It should look like this:

<script src="script.js type="text/javascript" defer></script>

score 1 · Answer 8 · answered Apr 19 '13 at 08:38

1

It seems to be this function

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

You can help yourself using some 'console.log' to see what object is Null.

answered Apr 19 '13 at 08:38

pierallard

3,326
3
21
48

score 1 · Answer 9 · answered Apr 19 '13 at 08:39

1

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

There is no element exist with id as u

answered Apr 19 '13 at 08:39

PSR

39,804
41
111
151

I've declared h_url as a global variable.... I believe its not a problem from that.. – user2218532 Apr 19 '13 at 08:45
@user2218532: I'm not sure you understand what they mean. What that error means is that it cannot set to `h_url` the property `value` of what `document.getElementById("u")` returns (which is `null`, which doesn't have a `value` property), meaning this answer is (well, should be) correct. – Qantas 94 Heavy Apr 19 '13 at 08:48
@user2218532 but there is no element with id u – PSR Apr 19 '13 at 08:49
try to put h_url = somevalue for testing purpose – PSR Apr 19 '13 at 09:02
I got my answer.I just replaced getElementByName with getElementById var searchText = document.getElementById("search").value; Also whenever I typed the text I was pressing 'Enter' button instead of using onClick event. Thanks for your support.. :) – user2218532 Apr 19 '13 at 09:30

James Bienaime · Answer 10 · 2023-06-18T17:26:53.190

0

I solved this by adding an id to the submit button and changing the callback to onclick.

edited Jun 18 '23 at 17:26

answered Jun 18 '23 at 17:18

James Bienaime

1
1

Uncaught TypeError: Cannot set property 'value' of null

10 Answers10

Linked

Related