HTML input submit onclick doesn't work

Question

I'm following the answer from add onclick function to a submit button

Here's my HTML:

Name: <input type="text" id="name">
<br>
<br>
<input type="submit" onclick="return process();" />

and JS:

var text = document.getElementById("name").value;

function process() {
    alert(text);
    return true;
}

When I click the form, it says: Uncaught ReferenceError: process is not defined

I have double checked everything, and the process() function is already defined. I wonder why this doesn't work

Here's the DEMO

==================UPDATE================================

I tried it using SO's code snippet, and it worked. I guess there's something wrong with jsfiddle, somehow the javascript and HTML are not conected

function process() {
    var text = document.getElementById("name").value;
  
    alert(text);
    return true;
}

Name: <input type="text" id="name">
<br>
<br>
<input type="submit" onclick="return process();" />

Where is the js code? in a external file? Are you sure to include this file in the html page? — Yoann Augen, Nov 07 '14 at 19:53
The jscode is there, under the javascript box. Can you not see it from your screen? I can see it from here just fine — Edwin, Nov 07 '14 at 19:58
@Limantara He's asking where you have it in your markup, not where it's at in the fiddle. — MattD, Nov 07 '14 at 20:11

Michael Mikhjian · Answer 1 · 2014-11-07T20:02:46.477

2

The problem is your order of actions. Your javascript needs to be appended after the DOM loads.

Name: <input type="text" id="name">
<br>
<br>
<input type="submit" onclick="return process();" />

<script>
var text = document.getElementById("name").value;

function process() {
    alert(text);
    return true;
}
</script>

And you should actually include var text within the function then you can load the JS wherever.

Name: <input type="text" id="name">
<br>
<br>
<input type="submit" onclick="return process();" />

<script>

function process() {
    var text = document.getElementById("name").value;
    alert(text);
    return true;
}
</script>

edited Nov 07 '14 at 20:02

answered Nov 07 '14 at 19:53

Michael Mikhjian

2,760
4
36
51

@epascarello correct, if you use var text within the function that will work. I answered based on your current order of operations. – Michael Mikhjian Nov 07 '14 at 20:01
@epascarello woops sorry I thought you were the original poster. – Michael Mikhjian Nov 07 '14 at 20:05

score 1 · Accepted Answer · answered Nov 07 '14 at 20:14

The error message you get is due to the way Jsfiddle.net works. Tested in isolation, the code runs without errors. However, the alerted text is the empty string. The reason is that the variable text is assigned only once, at the start of execution, and then the input field is empty.

One way to fix this is to make the text variable local to the function, so that it will be assigned a value whenever the function is invoked:

function process() {
    var text = document.getElementById("name").value;
    alert(text);
    return true;
}

I just figured that out myself too! Apparently it works just fine with SO's code snippet. Oh yeah, I should have put the `text` inside of the function. Anyway, thanks — Edwin, Nov 07 '14 at 20:18

HTML input submit onclick doesn't work

2 Answers2