javaScript will not let me write to a textbox value

Question

EDIT thanks to everyone!

I have a cookie on a page and when the page loads I want to put the value from the cookie into a input box as its defualt value.

However it will not work and I cant find the problem. I even made a test div and tried to change that but it wont work.

function checkCookie() {
    var cookieName = getCookie("username");

    if (cookieName != null && cookieName != "") {
        alert(cookieName);
        document.getElementById("fname").value = cookieName
    } else {
        alert("else");
        return;
    }
}

Here is the html

<input type="text" name="fname" id="fname" onKeyUp="isName(this.value)">

I tried this code as well (I just made a div called tester2

document.getElementById("fname").value = "hello"

doesnt work

document.getElementById("tester2").innerHTML = cookieName

doesnt work

Nothing works. It will not let me change a element within this function. If I try and put the code (ie document.etcetc.innerHTML = "hi") in another function then it works perfectly... however it will not run as shown above. Its driving me crazy.

Any ideas?

can you post all the relevant code ? we don't know what's inside `getCookie` and `isName` — Frederik.L, May 17 '13 at 01:12
Consider this: http://stackoverflow.com/questions/5871640/why-is-using-onclick-in-html-a-bad-practice and http://en.wikipedia.org/wiki/Unobtrusive_JavaScript — Xotic750, May 17 '13 at 02:04
@Frederik.L the console says "[12:06:29.360] TypeError: document.getElementById(...) is null" — Ghozt, May 17 '13 at 02:07
Creating a test case on jsfiddle that demonstrates your issue would aid matters considerably. — Xotic750, May 17 '13 at 02:12
Also, I think you should rely on localStorage if available, as people don't always allow cookies anymore. — Frederik.L, May 17 '13 at 02:37

score 1 · Answer 1 · answered May 17 '13 at 01:21

1

First step should be to make sure that checkCookie returns exactly what you want. If it's empty, it will obviously have the same effect as if it didn't do anything because it will put an empty value in the textarea.

You should be fine with this line, assuming that cookie contains the correctly formatted value:

document.getElementById("fname").value = cookie;

answered May 17 '13 at 01:21

Frederik.L

5,522
2
29
41

When you try to assign the value to the textarea, is the document ready yet ? If not, you assign a value to an undefined element. Try this on the `window.onload` event – Frederik.L May 17 '13 at 02:01
This fiddle is working : http://jsfiddle.net/svH4r/1/ you can start from it and add complexity until your particular case work. I think you should clarify your code to better see what's going on. A common mistake is to write all the code before testing, then it doesn't work. – Frederik.L May 17 '13 at 02:25
I GOT IT WORKING. I deleted window.load and went to the html doc and did body onload="checkcookie()" and it worked! – Ghozt May 17 '13 at 02:43
@Ghozt `window.onload = checkCookie;` (whithout `()`) should have done the same, I just noticed that error. Ideally, you should always test *EVERY BIT* of code that you write so when a problem comes in, you don't have to search the whole thing. – Frederik.L May 17 '13 at 03:10

plalx · Accepted Answer · 2013-05-17T02:47:13.537

0

I suspect that when the checkCookie function executes, the DOM is not ready yet and your input doesn't exist.

To make sure it's not the case, try the following:

 window.onload = checkCookie;

This will execute the checkCookie function only when the window content has been loaded. It is not the most efficient way to do it, but since I don't know which browser you are using, it was the most reliable way to test.

EDIT: After taking a look at your code, the problem is this line:

window.onload = checkCookie();

That will execute the checkCookie function right away and try to assign the function's result to window.onload.

Check in my previous example to see how it should be done.

edited May 17 '13 at 02:47

answered May 17 '13 at 00:58

plalx

42,889
6
74
90

@Ghozt, I updated my answer. You will see that's not exactly what you were doing... ;) – plalx May 17 '13 at 02:42
1

@Ghozt, The problem is not with `window.onload`, it's the way you were trying to register the `onload` handler. Read my answer and you will understand what you were doing wrong ;) Anyway, glad that you got it working hehe. Cheers! – plalx May 17 '13 at 02:45

score 0 · Answer 3 · answered May 17 '13 at 00:58

0

I think in JS, every statement ends with the ; semi colon

document.getElementById("fname").value = cookieName

I think you should add ; at the end

answered May 17 '13 at 00:58

2

While this is good practice to put the semi-colon at the end of each instruction, JS will generally figure out how to interprete it correctly even if it's not there. This counts toward a misleading code but probably not the main issue here. – Frederik.L May 17 '13 at 01:10

score 0 · Answer 4 · edited May 23 '17 at 10:25

Here is an example

HTML

<input type="text" name="fname" id="fname">

Javascript

function getCookie(something) {
    var cookies = {
        "username": "John Smith"
    }

    return cookies[something];
}

function checkCookie() {
    var cookieName = getCookie("username");

    if (cookieName != null && cookieName != "") {
        alert(cookieName);
        this.value = cookieName;
    } else {
        alert("else");
    }
}

var fname = document.getElementById("fname");

fname.addEventListener("keyup", checkCookie, false);

On jsfiddle

So based on your comments it maybe that you have not waited until the DOM has loaded before trying to access it.

Here is an example of how to do that.

window.addEventListener("load", function onLoad() {
    this.removeEventListener("load", onLoad);

    function getCookie(something) {
        var cookies = {
            "username": "John Smith"
        }

        return cookies[something];
    }

    function checkCookie() {
        var cookieName = getCookie("username");

        if (cookieName != null && cookieName != "") {
            alert(cookieName);
            this.value = cookieName;
        } else {
            alert("else");
        }
    }

    var fname = document.getElementById("fname");

    fname.addEventListener("keyup", checkCookie, false);
}, false);

On jsfiddle

See:

window.onload

Notes

The load event fires at the end of the document loading process. At this point, all of the objects in the document are in the DOM, and all the images and sub-frames have finished loading.

EventTarget.addEventListener

Summary

addEventListener() registers a single event listener on a single target. The event target may be a single element in a document, the document itself, a window, or an XMLHttpRequest.

Why is using onClick() in HTML a bad practice?

Unobtrusive JavaScript

I was just messing around with diffrent variable names as you can see in the psatebin — Ghozt, May 17 '13 at 02:21
Here is your code from pastebin, changed slightly on jsfiddle: http://jsfiddle.net/Xotic750/eN3Lu/ — Xotic750, May 17 '13 at 02:31
I GOT IT WORKING @Xotic750 !, i change from window.onload and went to the html doc and did body onload="checkCookie" and it worked! — Ghozt, May 17 '13 at 02:40
Congratulations! But please consider reading the information posted about event handling and unobtrusive javascript. — Xotic750, May 17 '13 at 02:52

javaScript will not let me write to a textbox value

4 Answers4