javascript - Behavior of html form onsubmit event in JSFiddle -
i have simple form has nothing other submit button. want prevent submission of form (i know doesn't make sense illustration). i'm making use of form's onsubmit
event , event returns false
. work 'incomprehensible behavior' arises.
i can associate return false;
statement onsubmit
event of form either using inline javascript
or keep in different place.
<form onsubmit="return false;" id="form1" method="post"> <input type="submit" id="btnbutton" value="submit" /> </form>
now, aforementioned code works fine. see => http://jsfiddle.net/mcck5/
i can modify above code follows in order make javascript separate (unobtrusive).
--some html markup <form onsubmit="return falsifier()" id="form1" method="post"> <input type="submit" id="btnbutton" value="submit" /> </form> <script> function falsifier() { return false; } </script> --other html markup follows
here, script tag placed right after form in html
markup. works too. see => http://jsfiddle.net/afdq5/
but when shift javascript
different place (ex: external file), doesn't seem work.
by taking console in inspect element, noted error falsifier not defined
.
see here => http://jsfiddle.net/5cr5r/2/
could elaborate on why so?
you're encountering design feature (or flaw) in jsfiddle:
in jsfiddle, "javascript" pane not direct source code of referenced javascript file, instead jsfiddle wraps code below , inserts <head>
. go view source see does:
<script type='text/javascript'> //<![cdata[ window.onload=function(){ function falsifier() { return false; } } //]]> </script>
your <form>
elements can't find falsifier
because falsifier
exists within scope of anonymous function.
Comments
Post a Comment