form onsubmit inline javascript - javascript

I am trying to put an inline onsubmit script on a form, but it's not working:
<!DOCTYPE html>
<html>
<head></head>
<body>
<form onsubmit="(function(event){console.log(event); return false;})(this);">
<button type="submit">Submit</button>
</form>
</body>
</html>
And is the parameter for the function the event or the form element?

In inline Javascript, this is always the element itself. event is available as a variable local to the inline Javascript, so you can write:
<form onsubmit="return (function(event){console.log(event); return false;})(event);">
Since you're using an IIFE, its return statement returns from the function, but not from the event handler. You need to return what the IIFE returns.
I'm not sure why you're using an IIFE, you can just write:
<form onsubmit="console.log(event); return false;">

Related

Loading .js file in <head>

So I am new to javascript (in fact, new to programming in general).
My question is, can I consider loading the .js file in the
<head><script src="script.js"></script>...</head>
as loading a header file (like in c/c++)?
I guess not. Suppose my script.js looks like this:
function copyToClipboard(text)
{window.prompt("Copy to clipboard: Ctrl+C, Enter", text);}
and my index.html looks like this:
<!DOCTYPE html>
<html>
<head>
<script src="script.js"></script>
</head>
<body>
<textarea id="a" autofocus="true"></textarea>
<script> onclick=copyToClipboard(document.getElementById("a").value);
</script>
</body>
</html>
It does not work, namely, it does not wait for my clicking (which means that the function is loaded correctly-it is called successfully, it is just that the pop-up does not wait for the mouse event). But if I put the script in-line, it works:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<textarea id="a" autofocus="true"></textarea>
<script>onclick=function copyToClipboard(text) {
window.prompt("Copy to clipboard:Ctrl+C,Enter",document.getElementById("a").value);
}
</script>
</body>
</html>
The reason why the first code doesn't work is that you're calling the copyToClipboard() function and assigning the return value to the onclick variable. In the second code you're correctly assigning it a function reference instead of calling the function immediately.
In other words:
onclick = copyToClipboard(document.getElementById("a").value);
"Call copyToClipboard(), assign return value (undefined) to the onclick variable"
onclick = function copyToClipboard(text) { ...
"Assign a reference to a function called copyToClipboard() to the onclick variable"
To make it work with the function definition in an external script, wrap the function call in an anonymous function:
onclick = function() {
copyToClipboard(document.getElementById("a").value);
};
All praise the power of javascript to mislead developers into diagnosing their problems incorrectly!
This is not how you define an inline onclick handler. An inline onclick handler is an attribute(or property, as we'll find out in a bit) of an html element:
<textarea id="a" autofocus="true" onclick="copyToClipboard(this.textContent)"></textarea>
What you did with the <script> tag was simply include some javascript code, to be executed as the browser is parsing your html:
<script> onclick=copyToClipboard(document.getElementById("a").value);</script> calls your function, and assigns its return value to onclick.
But wait, why does your second snippet work?
This is because onclick is also a property of dom elements. It also happens that you can assign a click handler to window itself - this is what your second snippet is actually doing(thanks to an uncool feature of javascript that attempts to assign to an undefined variable assigns to properties of the global object). That means that no matter where you click, your new click handler will be called.
As to your opening question, you can't really say that tags are like includes - a script can involve more than just declarations and definitions, unlike an included file. You can look into some of the module standards/frameworks, like RequireJS, for more similar functionality.

javascript onsubmit not working

I am trying to make a javascript function work on submitting the form, the function doesnt seem to run. Can anyone help?
<html>
<head>
<script>
function upload(){
alert("I am an alert box!");
}
</script>
</head>
<body>
<form enctype="multipart/form-data" method="post" onsubmit="return upload();">
<input type="file" name="file">
<input type="submit" name="upload" value="Datei hochladen">
</form>
</body>
</html>
When attaching the event handler to the form element, the scope of the event handler is the form and not the window
<form enctype="multipart/form-data" method="post" onsubmit="return upload(this);">
<script>
function upload(scope) {
console.log(scope); // The passed scope from the event handler is
} // the form, and not window
</script>
As input elements inside a form are attached as properties to the form object, where the name is the key, calling upload() in the event handler, where the scope is the form, would equal calling form.upload(), but the form already has an element with that name so form.upload is the upload button, not the upload() function in the global scope.
To solve it, either rename the function or the element
<html>
<head>
<script>
function upload(){
alert("I am an alert box!");
}
</script>
</head>
<body>
<form enctype="multipart/form-data" method="post" onsubmit="return upload();">
<input type="file" name="file">
<input type="submit" name="upload2" value="Datei hochladen">
</form>
</body>
</html>
FIDDLE
My problem, I had without knowing a form inside a form I was interacting with the inner one no matter what I do the outer form always executes
Add return statement in your code
<script>
function upload(){
alert("I am an alert box!");
return false;
}
</script>

Why isn't this onclick JavaScript call working?

HTML
<div id="test"></div>
<input type="button" value="Go" onclick="test()" />
JavaScript
function test() {
alert("Test!");
}
Fiddle
http://jsfiddle.net/MVBrS/11/
Please look at this one, it is about jsfiddle code frames separation:
Inline event handler not working in JSFiddle
Of course, if you were running the same code embedded on plain HTML it works normally, having the alerted popup appearing.
<!DOCTYPE html>
<html>
<head>
<script>
function test() {
alert("Test!");
}
</script>
</head>
<body>
<div id="test"></div>
<input type="button" value="Go" onclick="test()" />
</body>
</html>
when you do
onclick="test()"
as an attribute of the input element, you are setting the result of the call test() (in your case 'null') as the click event handler
you probably want to do this
onclick="test"
instead, which will set the actual 'test' function as the handler,
or even better, follow the following guidelines: unbtrusive javascript or unobtrusive JS (2),.. you get the point ;)

In JavaScript is it possible that event handlers return to inline evenet listeners?

with inline event listeners I mean HTML elements attributes for event registration like onsubmit/onreset attributes rather than dom node properties for registering event.
I'm asking because when I register an event handler that returns false to onsubmit/onreset attributes of a form, by submitting/reseting the submit/reset process is performed.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>New Web Project</title>
<script type="text/javascript">
function f()
{
return false;
}
</script>
</head>
<body>
<form action="" id = "form" onsubmit = "f()" onreset = "f()">
<input type="text">
<input type = "submit" value = "submit">
<input type = "reset" value = "reset">
</form>
</body>
</html>
When you provide event handlers via the HTML attributes, the string you provide creates a function which is called by the browser when the event occurs.
So in your example, the onsubmit and onreset attributes create two functions equivalent to:
function() {
f();
}
Because that anonymous function doesn't return false, the submit and reset events aren't blocked. If that is what you want to do, you can do one of the following.
To always block default handling:
onsubmit="f(); return false;" onreset="f(); return false;"
To conditionally block default handling (and a little bit better code style, IMO):
onsubmit="return f();" onreset="return f();"

Not able to access external Jscript File even after referencing?

I'm a beginner trying my first program to add external jscript file in scr attribute of script tag, followed all steps as I searched but it's not working the way it should. Can someone please help me with this?
I have one aspx form, and one button onclick calling internal javascript function.
I also have one button onclick calling external .js file function.
This is my aspx code
<head runat="server">
<script type="text/javascript" language="javascript" src="ExternalJScript.js">
function Myfunction()
{
document.getElementById("htmlbutton").innerHTML = "This is Button from Javascript function";
alert("Hi Function Called from Javascript");
}
</script>
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<button type="button" id="htmlbutton" onclick="Myfunction()">This is html button</button><br />
<button type="button" id="Button1" onclick="ExternalJSFileFunction()" value="Call File">HI</button>
</div>
</form>
And this is my .js code
ExternalJSFileFunction()
{
alert("I m from external file");
}
There should not be code in between the script tags of an external script. Try changing it to:
<head runat="server">
<script type="text/javascript" language="javascript" src="ExternalJScript.js"></script>
<script type="text/javascript">
function Myfunction()
{
document.getElementById("htmlbutton").innerHTML = "This is Button from Javascript function";
alert("Hi Function Called from Javascript");
}
</script>
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<button type="button" id="htmlbutton" onclick="Myfunction()">This is html button</button><br />
<button type="button" id="Button1" onclick="ExternalJSFileFunction()" value="Call File">HI</button>
</div>
</form>
Also, the Language attribute is deprecated and is not needed
Edit
It's because the function you are trying to call isn't actually a function because the function keyword is not used. Change the external file so that it is:
function ExternalJSFileFunction()
{
alert("I m from external file");
}
Then it will work
Additionally, there are some other tips as well:
If you're using the HTML5 doctype, you can also get rid of the type attribute on <script> elements too
Also have your opening curly braces on the same line as the function or conditional, so do:
function ExternalJSFileFunction() {
but not:
function ExternalJSFileFunction()
{
You should almost always add your scripts to the end of the page, just before the closing </body> tag for performance
Using the onclick attribute is also not the recommended way of attaching event handlers, you should use the proper addEventListener() method instead. If you need to support <= IE8 you'll need to use IE's older event API. Using a JS library. like jQuery, can really help out with this kind of stuff.
The function in your external JavaScript file is not defined properly.
It should look like this (I added the function keyword).
function ExternalJSFileFunction()
{
alert("I m from external file");
}
You also need to make the changes that danwellman suggested in his answer.

Categories

Resources