javascript onsubmit not working - javascript

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>

Related

Function not working during form submission

Why isn't alert('hi') working at all when submit button is clicked?
evt.preventDefault(); & evt.stopPropagation(); is to prevent the form from trying to open another window. However even when I remove these lines my function still isn't called...
'use strict';
function handleSubmission(evt) {
evt.preventDefault();
evt.stopPropagation();
alert('hi');
}
var form = document.querySelector('#formID');
form.addEventListener('submit', handleSubmission);
<!DOCTYPE html>
<html lang="en-US">
<body>
<form action="" method="post" id="formID">
input <input type="text">
<input type="submit" value="submit">
</form>
</body>
</html>
Not getting any errors in the console.
EDIT: To add to the confusion even more. The snippet above doesn't work on Stack Overflow or in my local (chrome) browser. However, on jsfiddle the alert fires just fine... https://jsfiddle.net/jpazrjt4/1/
Below is a SO snippet that provides a means to accomplish this with pure Javascript, but it will not behave correctly as when you click Run Code Snippet.
I would like to address your concern about it not working in SO Snippet. SO snippet does not allow for form submission in the their iframe sandbox. If you run the SO snippet while in Chrome and then open up developer tools (Ctrl+Shift+I), you will see in the console log entry
Blocked form submission to '' because the form's frame is sandboxed and the 'allow-forms' permission is not set.
Jsfiddle does not restrict the allow-forms permission for their constructed iframes. Here is the JSFiddle link so you can test it out: jsFiddle:jsFormIntercept
(function() {
"use strict";
window.addEventListener("load", function() {
document.getElementById("formID").addEventListener("submit", function(event) {
event.preventDefault(); // Prevent form submission
alert('hi');
}, false);
}, false);
}());
<!DOCTYPE html>
<html lang="en-US">
<body>
<form action="" method="post" id="formID">
input <input type="text">
<input type="submit" value="submit">
</form>
</body>
</html>
you simply need to write the below code as evt.preventDefault() & evt.stopPropagation() both have different functioning
'use strict';
function handleSubmission(evt) {
evt.preventDefault();
alert('hi');
}
e.preventDefault and e.stopPropagation are jQuery functions and r valid only when using the jquery libs.
I cannot seem to find a vanila JavaScript way to acheive that so you will have to use jquery for now
JS as:
function handleSubmission(evt) {
evt.preventDefault();
evt.stopPropogation();
alert('hi');
}
var form = document.querySelector('#formID');
form.addEventListener('submit', handleSubmission);
and HTML as:
<!DOCTYPE html>
<html lang="en-US">
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="" method="post" id="formID">
input <input type="text">
<input type="submit" value="submit">
</form>
</body>
</html
Passed the test
Actually when clicked the button will display a an alert say HI and that submit will not go anywhere because of event.preventDefault()
cool change you code to this and please call jquery before this because stoppropogation is a part of jquery library
May be this will not work here but please check it on your side on codepen etc. it is working
check here:-
http://codepen.io/ermayankrajput/pen/VPXKdN
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="" method="post" id="formID">
input <input type="text">
<input type="submit" value="submit">
</form>
<script>
'use strict';
var form = document.getElementById('formID');
form.addEventListener('submit',function(evt){
evt.preventDefault();
evt.stopPropagation();
alert('hi');
});
</script>

form onsubmit inline 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;">

onkeypress does not call function

I need to call a js function everytime a key is pressed in a textbox:
<html>
<script>
function checkValidity() {
alert("Checking...");
}
</script>
<body>
<input type="text" name="username" id="username" onkeypress="checkValidity()">
</body>
</html>
The alert, however, never get displayed. What's wrong with this code?
UPDATE
The script is actually in a separate js file but I'm certain it's declared correctly because if I call checkValidity() from the body's onload I do get the alert.
Actually your markup is right but the function name checkValidity is now an internal keyword for elements
Check here https://developer.mozilla.org/en-US/docs/Web/API/HTMLSelectElement/checkValidity
You can change the name of the function thats all
<html>
<script>
function checkMyValidity() {
alert("Checking...");
}
</script>
<body>
<input type="text" name="username" id="username" onkeypress="checkMyValidity()">
</body>
</html>
checkValidity is Javascript's form validation method. Change the method name. Then it will work.
<html>
<head>
<script>
function checkValid() {
alert("You pressed a key inside the input field");
}
</script>
</head>
<body>
<input type="text" name="username" id="username" onkeypress="checkValid()">
</body>
</html>
I think it is working

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

Submitting form located within another form

Take a look at this html:
<head>
<title>Test page</title>
<script type="text/javascript">
function submitForm() {
document.getElementById("form2").submit();
}
</script>
</head>
<body>
<form id="form1" name="form1">
<input type="hidden" name="test1" value="test" />
<form id="form2" name="form2" action="http://google.com">
<input type="hidden" name="test2" value="nothing" />
</form>
</form>
Submit
</body>
Thing I want to do is submitting form2 located within form1 with a javascript. I want this to be done by submitForm() function. The problem is that it doesn't appear to work. I'm using FireFox for testing and always get an error which says that it's undefined. Does anybody know how I can get it working? Thanks in advance!
You can't nest HTML forms like that. End form1 before starting form2. Duplicate the hidden input if necessary.
Well, given that you have no element with the ID "xxx", I could see where your script might have some difficulty. Perhaps you mean "form2"?

Categories

Resources