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>
Related
I had a bug on IE with a login form that resulted on a page refresh, and I realized it was happening because I was accidentally calling event.preventDefault() twice in my code.
This does not happen with other browsers. Is there a logic explanation to get this behavior with IE?
Code (can't be recreated on a fiddle):
<!DOCTYPE html>
<html>
<body>
<form id="myForm" method="POST">
<label for="someInput"></label>
<input id ="someInput" type="text">
<button type="submit">submit</button>
</form>
<script>
var myForm = document.querySelector('#myForm');
myForm.addEventListener("submit", function(event){
event.preventDefault();
event.preventDefault();
document.querySelector('body').style.backgroundColor = "blue";
});
</script>
</body>
</html>
I've a project where I scan a QR code, and it will then automatically print out information based on which code was scanned.
I have the scanner, and a printer. Each QR code is to correspond to a URL. I can get the scanner to fill an input field, and I can get an alert to show the information that was scanned. However, whenever I try to assign the URL it simply appends the information to the current URL, instead of replacing it.
I need it to replace the current URL. Does anyone know why it is doing this, and how to fix it?
<html>
<head><title>QR Printing</title></head>
<body onload="document.myform.mytextfield.focus();">
<form name="myform">
<input type="text" name="mytextfield" onchange="checkForm()">
</form>
<script type="text/javascript" language="JavaScript">
function checkForm() {
var field1 = document.forms['myform'].elements['mytextfield'].value;
alert(field1);
window.location.assign(field1);
}
</script>
</body>
</html>
Looks like the form is submitting. Cancel it.
<form name="myform" onsubmit="return false">
You want:
window.location = field1;
add return false; after window.location.assign(field1);
<html>
<head><title>QR Printing</title></head>
<body onload="document.myform.mytextfield.focus();">
<form name="myform">
<input type="text" name="mytextfield" onchange="checkForm()">
</form>
<script type="text/javascript" language="JavaScript">
function checkForm() {
var field1 = document.forms['myform'].elements['mytextfield'].value;
alert(field1);
window.location.assign(field1);
return false;
}
</script>
</body>
</html>
Neither of the solutions worked for me in chrome browser.
I have resolved this using:
setTimeout(function () { document.location.href = YourUrlLink }, 500);
Hope this helps who are seeking a solution for chrome browser issue.
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>
I have a form with only one file input and I want to auto submit the form every time when someone selects file. Now I use this code:
$(function(){
$("#fil1").change(function(){
$("#form1").submit();
});
});
but it works only for the first selection. When I select some other file the form is't submitted again! It seems the change function is called only for the first time! Can anyone help? I use jquery...
What version of jQuery are you using? I just tried the code below and it worked multiple times. Also wonder if it's your browser. I tried Chrome and IE 8.
<html>
<head>
<title>index.html</title>
<script type="text/javascript" src="js/jquery/jquery-1.5.1.min.js"></script>
<script type="text/javascript">
alert('hit');
$(function(){
$("#fil1").change(function(){
$("#form1").submit();
});
});
</script>
</head>
<body>
<form action="" method="post" enctype="multipart/form-data" name="form1" id="form1">
<label for="fileField"></label>
<input type="file" name="fileField" id="fil1">
</form>
</body>
</html>
hope this helps...
It appears that oncopy and onpaste do not work with iOS devices that support copy and paste now. Is there another means to bind to these events in javascript?
You didn't attached any code with your question, so I can't tell what was the actual issue.
Probably the issue is with your code.
I used the following html code and it is working perfectly. Please check with this:
<html>
<head>
<script type="text/javascript">
function read()
{
var name = document.getElementById('p').value;
alert('Hi: '+name);
}
function copy()
{
alert('Copy');
}
function paste()
{
alert('Paste');
}
</script>
</head>
<body oncopy='copy();' onpaste='paste();'>
<form>
<input type="text" name='m' id='p'/>
<input type="button" value="Submit" onclick='read();'/>
</form>
</body>
</html>