How to get value of textbox on page load, if it is null?

Question

Want to check first that, Is text box contains nothing on page load ?

Then assign some value to it.

if (document.getElementById("txtBoxID").value == null) {
document.getElementById("txtBoxID").value = "Some text here";
}

But getting error "JavaScript runtime error: Unable to set property 'value' of undefined or null reference" How to do this?

score 0 · Answer 1 · edited Oct 13 '14 at 20:30

0

Are you doing your code above after the page is loaded?

window.onload = function() {
  if (document.getElementById("txtBoxID").value == null) {
    document.getElementById("txtBoxID").value = "Some text here";
  }
}

Note that window.onload isn't best way to check whether page is loaded. It depends on the browser's spec. See window.addEventListener or window.attachEvent or IE.

edited Oct 13 '14 at 20:30

Shriike

1,351
9
20

answered Jun 28 '13 at 07:16

mattn

7,571
30
54

score 0 · Answer 2 · answered Jun 28 '13 at 07:16

0

It is because your DOM is not ready so wait until load complete:

window.onload=function(){
  if (document.getElementById("txtBoxID").value == null) {
    document.getElementById("txtBoxID").value = "Some text here";
  }
};

answered Jun 28 '13 at 07:16

Zaheer Ahmed

28,160
11
74
110

score 0 · Answer 3 · answered Jun 28 '13 at 07:18

You're probably trying to access the element before you defined in page, so you should execute that code on window.load event or move that code just before </body>

as alternative you may use the placeholder attribute supported on many modern browsers

<input type="text" id="txtBoxId" placeholder="Some text here" />

If the input has no value, the placeholder value will be shown instead
(polyfills of this behaviour are available for older browser)

score 0 · Answer 4 · answered Jun 28 '13 at 07:18

0

You are trying to access the property 'value' on a null (or undefined) object, wich cause an exception, assuming your ID may not be txtBoxID

answered Jun 28 '13 at 07:18

Jaay

2,103
1
16
34

score 0 · Answer 5 · answered Jun 28 '13 at 07:23

0

It is not safe to test null for the textbox value. You should use empty string instead. I created a jsFiddle which shows this:

<input type="text" id="txtBx" />

document.getElementById("txtBx").value = null;
alert("test 1 textbox is null \n" +  (document.getElementById("txtBx").value == null));

alert("test 2 textbox is empty string \n" +  (document.getElementById("txtBx").value == ""));

http://jsfiddle.net/kZhHa/3/

(I'm using Chrome)

answered Jun 28 '13 at 07:23

mortb

9,361
3
26
44

using the falsy nature, `if (!document.getElementById("txtBoxID").value)` might suffice. This would account null, "" and 0 (which might be a problem). – Christoph Jun 28 '13 at 12:45

score 0 · Answer 6 · edited Dec 05 '17 at 22:18

Please try the below code, you need to set the value to the null first in the line

Name: <input type="text" id="myText" value=''>

Here is the demo :

function func() {
  if (document.getElementById("myText").value == '') {
    document.getElementById("myText").value = "Some text here";
  } else {
    alert("not null");
  }
}

Name: <input type="text" id="myText" value="">

<p>Click the button to change the value of the text field.</p>
<input type="button" id="button" value="Click Me" onClick="func();" />

score -1 · Answer 7 · answered Feb 06 '14 at 21:08

If you have JQuery available here is another way of accomplishing what you are asking for. In the document.ready function you can get the value of your text using the id of your textbox and wrapping it in JQuery. This will allow you to check and replace the value of your text box in the case that it is empty by using the .val() function

$(document).ready(function () {         
    if($('#id-of-your-textbox').val() == ' ') 
    {
       $('#id-of-your-textbox').val('some text');
    }
});

How to get value of textbox on page load, if it is null?

7 Answers7