I figured out through debugging that I should not name any Form Elements name="submit", but even after searching I didn't find any good explanation of why?
See simple code example below:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<form action="javascript:alert('submitted');" method="post" id="test-form">
<label>Name</label>
<input type="text" name="name-field" value="" />
<input type="submit" name="submit" value="Submit Button" /> <!-- name should not be "submit" -->
<p><a href="javascript: document.getElementById('test-form').submit();">Submit Link</a></p>
</form>
</body>
</html>
- If you Press Enter while on any Form Element or Click the
Submit Button, it will work.
If you Click on the Submit Link, it will have error
Unhandled Error: 'document.getElementById('test-form').submit' is not a function
If you simply rename your Submit Button to anything other than name="submit" (even if you just capitalize some part of it) or just remove the name="submit" attribute, then both the Submit Button and Submit Link will work.
I tried this in the latest version of Internet Explorer, Firefox, Opera, Chrome, and Safari. All of them have consistent behavior with regards to this.
As you can see in my code example, there is no involvement of jQuery or any other JavaScript library.
I would appreciate the explanation. Thanks
See Question&Answers more detail:
os 与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
