why document.readystate not working

Question

<html>
<head>
<script>
if(document.readystate == "interactive"){
alert(document.forms[0].method);
}
</script>
</head>
<body>
<form name="form1" id="form1" method="post">

</form>
<input type="submit" id="submit" name="check" onclick="check()">

</body>
</html>

I also wrote alert() box within the function and triggered with the submit button, in that case the it executed but why isn't it executing in this stage.

You need to check `document.readystate` inside of an event handler for the `onreadystatechange` event. https://developer.mozilla.org/en-US/docs/Web/Reference/Events/readystatechange — gen_Eric, Apr 25 '14 at 20:03
Your script is executed while the document is still loading, so `document.readystate` should be `loading`. — Barmar, Apr 25 '14 at 20:04
@RocketHazmat - that's not right. You can check `document.readystate` any time. `onreadystatechange` is an event that tells you when the readstate has changed to a new value, but you can examine it's value anytime. Barmar's comment is probably what's happening here. — jfriend00, Apr 25 '14 at 20:05
Put `alert(document.readystate)` before the `if` and it should confirm it. — Barmar, Apr 25 '14 at 20:05
@jfriend00: I guess you're right, but it won't be `interactive` at that time :) — gen_Eric, Apr 25 '14 at 20:06
@RocketHazmat - yes it won't be interactive yet because it hasn't even started loading the `` yet. — jfriend00, Apr 25 '14 at 20:06
If what you're trying to do is to schedule some code in the `` section to run when the document has finished parsing, then I'd suggest you look at this answer with a plain javascript, cross browser way to know when the document is ready, see here [pure JavaScript equivalent to jQuery's $.ready() how to call a function when the page/dom is ready for it](http://stackoverflow.com/questions/9899372/pure-javascript-equivalent-to-jquerys-ready-how-to-call-a-function-when-the/9899701#9899701). That answer uses the DOMContentLoaded event with a few fallbacks for older browsers. — jfriend00, Apr 25 '14 at 20:08

score 3 · Answer 1 · edited May 23 '17 at 11:49

First off, there are a several logic/design errors:

It is document.readyState (different capitalization).
While parsing the <head> section, your document will NEVER have document.readyState == "interactive" because the document doesn't switch to that state until it is done parsing the <body>, but by definition it is only parsing the <head> section at this moment.
If you thought your code would somehow fire when the readyState became == "interactive", then that's just not how a simple if statement works. It tests that condition at the moment the code runs and if it's falsey which it is here, then it will never execute.

If you want to run code when the document is loaded and the DOM is ready to modify and interact with, you can see a summary of your options in this answer.

Your options boil down to this:

Move your javascript to a script tag right before the </body> tag and remove the if test you have. At that point in the document parsing, it is safe to interact with any DOM element that was defined before the script.
In modern browsers, add an event listener for the DOMContentLoaded event and run your code when that event fires.
For more general support including older browsers, get a more complete implementation of a function that will notify you when the browser is safe to interact with. You can see such an implementation that works in pretty much all browsers in use today in this other answer.
Use some sort of javascript framework that already offers you a cross browser way to know when the DOM is ready. jQuery offers $(document).ready() as do pretty much all other similar frameworks.

This simplest solution to your code would be this:

<html>
<head>
</head>
<body>
<form name="form1" id="form1" method="post">
    <input type="submit" id="submit" name="check" onclick="check()">
</form>

<script>
alert(document.getElementById("form1").method);
</script>
</body>
</html>

Working demo: http://jsfiddle.net/jfriend00/Ka4rL/

P.S. I presume you want your <input> tag inside the form. And, I'd recommend you change to using document.getElementById("form1") rather than forms[0] as this is a much more robust way to program because your code doesn't break if someone adds a new form to the page.

why document.readystate not working

1 Answers1