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
– Yoann Augen, Commented Nov 7, 2014 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
– Edwin, Commented Nov 7, 2014 at 19:58
@Limantara He's asking where you have it in your markup, not where it's at in the fiddle. — MattD
– MattD, Commented Nov 7, 2014 at 20:11

Michael Mikhjian · Accepted Answer · 2014-11-07 20:02:46Z

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 7, 2014 at 20:02

answered Nov 7, 2014 at 19:53

Michael Mikhjian

2,7944 gold badges37 silver badges54 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Michael Mikhjian Over a year ago

@epascarello correct, if you use var text within the function that will work. I answered based on your current order of operations.

Michael Mikhjian Over a year ago

@epascarello woops sorry I thought you were the original poster.

Jukka K. Korpela · Accepted Answer · 2014-11-07 20:14:30Z

1

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;
}

answered Nov 7, 2014 at 20:14

Jukka K. Korpela

203k38 gold badges281 silver badges408 bronze badges

1 Comment

Edwin Over a year ago

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

Collectives™ on Stack Overflow

HTML input submit onclick doesn't work

2 Answers 2

2 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related