JavaScript function not executing?

Question

I am very new to JavaScript and web development in general. I have a problem when I want to have my log in system executes a JavaScript function when the user submits but it does nothing when it should print to the screen. I can't figure out exactly what I am missing. Any help will be greatly appreciated!

<form name="sign_in" onsubmit="check_stuff()">
 <b>Username...</b>
 <br>
 <input type="text" name="Username" value="Your Username">
 <br>
 <br>
 <b>Password...</b>
 <br>
 <input type="text" name="Password" value="Your Password">
 <br>
 <br>
 <input type="submit" value="Submit">
</form>
<script>
function check_stuff(){
 document.write("gametime");
}
</script>

• Spencer Wieczorek: I want to note this overwrites the DOM. But I can't replicate your problem. It seems to write gametime on the screen. Note it does indeed do this, but the page is reloaded (depending on your broswer).

Answer 1

The function is writing to the document, but that will just be visible for a very short time while the page reloads. The form will still be posted, so the page will reload and replace what you have written.

You would want to return the result from the function in the event handler:

onsubmit="return check_stuff()"

That will allow you to return false from the function if you want to keep the form to be posted:

function check_stuff(){
 document.write("gametime");
 return false;
}

(I assume that you are just using the document.write for testing purposes, as it will replace the entire current page with what you write.)

Answer 2

This works fine. Although it overwrites the DOM because document.write is called after it loaded. This means only gametime will be on the screen afterwards. It does show but, but submitting a form reloads the page. So it will appear as nothing happened.

To fix this you will want to return false; in which will not submit the form. Also change onsubmit="check_stuff()" to onsubmit="return check_stuff()".

Answer 3

It works ok for me, I think the issue you have is that te page is reloading after submit. Just add a return false; after the check_stuff() call to avoid the reload.

<form name="sign_in" onsubmit="check_stuff(); return false;">

Check out this codepen.

Answer 4

if you want current page not be redirected, you should submit your form to a iframe in current page, like this:

<form name="sign_in" onsubmit="check_stuff()" target="#frame">
 <b>Username...</b>
 <br>
 <input type="text" name="Username" value="Your Username">
 <br>
 <br>
 <b>Password...</b>
 <br>
 <input type="text" name="Password" value="Your Password">
 <br>
 <br>
 <input type="submit" value="Submit">
</form>
 <iframe id="frame" name="frame"></iframe>
<script>
function check_stuff(){
 document.write("gametime");
}
</script>

• ianaya89: I think is not a good practice do that. You could implement an easy solution returning false.