I have a simple html form and Javascript. I have been trying to prevent form submission. but it ignores my code e.preventDefault() and continues to submit and refreshes the page anyways.
most solutions I encountered include JQuery. can't this be done without JQuery?
why is this not working? what is the problem?
<html>
<head>
<script>
function onsubmit(e) {
e.preventDefault();
e.stopPropagation();
console.log("submitting...");
return false;
}
</script>
</head>
<body>
<form method="POST" onsubmit="onsubmit">
<input placeholder="email" style="display:block"> </input>
<input placeholder="password" style="display:block"> </input>
<input type="submit" value="login" style="display:block"> </input>
</form>
</body>
</html>
Though I don't know the reason why the inline event listener didn't work, as #teemu suggested in the comment, It worked for me when I discarded the inline onsubmit event listener and rather used addEventListener.
document.addEventListener("DOMContentLoaded", (e)=>{
document.querySelector("form").addEventListener("submit", onsubmit);
}
added this in of the <script>, and it worked
Related
src = "http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"
$(document).ready(function() {
$("#testForm").submit(sendPost)
});
function sendPost() {
alert('Submitted');
}
<form id="testForm">
<input type="text" ID="txtDescription"><br>
<input type="submit" value="Save" />
</form>
Clicking the Submit button does not fire the alert. What am i missing?
The original code had the reference to jquery lib inside the javascript, without script tags. That does not load the external resource. Since jquery doesn't load, the click event doesn't get registered.
One solution to this issue is to reference the external js file in your HTML, with a <script> tag:
HTML Solution
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="testForm">
<input type="text" ID="txtDescription"><br>
<input type="submit" value="Save" />
</form>
and remove the reference from your .js
$(document).ready(function() {
$("#testForm").submit(sendPost)
});
function sendPost() {
alert('Submitted');
}
Jquery Solution
A solution for jquery to load some other js file, if you don't want to put <script src=... in the HTML, is to put the following in your .js. This requires that jquery is already loaded.
$(document).ready(function(){
$('body').append($('<script src="/path/to/script/foo.min.js"></script>'));
});
https://stackoverflow.com/a/42378530/209942
Your code works as is. You have to click on the button to submit it. But looking at the I believe, you want to submit the the form on document ready.
You can do it in following way.
$(document).ready(function() {
$("#testForm").submit(sendPost);
$('#submit').click();
});
function sendPost() {
alert('Submitted');
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="testForm">
<input type="text" ID="txtDescription"><br>
<input id="submit" type="submit" value="Save" />
</form>
Assume I have many html forms in a website. I need to find out which html form was submitted.
$("form").submit(function(event){ }
Using the function above, can i find out which form was submitted?
You should assign an identifiable attribute to the form and use event.target to access that attribute.
In this case, I've assigned name to each form and printed the name on the console when the form is submitted.
$("form").submit(function(event) {
event.preventDefault();
console.log(event.target.name);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form name="form1">
<button type="submit">submit</button>
</form>
<form name="form2">
<button type="submit">submit</button>
</form>
<form name="form3">
<button type="submit">submit</button>
</form>
Even though it is recommended to use ID, you can do without it. your event.target provides the reference for the form.
$("form").on("submit", function(event){
event.preventDefault();
var a = $(event.target).children("input[type='text']").val();
console.log(a);
});
JSFiddle
Thanks #31piy for reminding about it.
Have a look into link below to identify submission of different forms.
$(document).ready(function() {
$("#Form1").submit(function(event) {
alert($(this).attr('id'));
event.preventDefault();
});
$("#Form2").submit(function(event) {
alert($(this).attr('id'));
event.preventDefault();
});
$("#other").click(function() {
$("#Form1").submit();
});
$("#other2").click(function() {
$("#Form2").submit();
});
});
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
</head>
<body>
<form id="Form1" action="destination.html">
<input type="text" value="Hello there">
<input type="submit" value="Go">
<div id="other">
Click to trigger the handler for first form
</div>
</form>
<form id="Form2" action="destination.html">
<input type="text" value="Hello there">
<input type="submit" value="Go">
<div id="other2">
Click to trigger the handler for second form
</div>
</form>
</body>
</html>
Good question.
I usually submit every form to a different route handler. This way I manage to keep some basic principles (Single responsibility principle). Otherwise, you risk your code becoming too complicated to read.
If you insist on having the same route and then differentiate in the backend, I believe the other answers will give you answer your question.
I have a form with a structure as such:
<form id="myForm">
<div>
<input .....>
<input ......>
</div>
<div>
<input ....>
<input ....>
</div>
<input type="submit">
</form>
I need to do an confirm box when the form is submitted so i did this:
$('#myForm').submit(function(e){
e.preventDefault();
if(confirm('something here')){
$('myForm').submit();
}
});
As we all know, IE8 does not like divs in form and clearly the html is a little broken. This results in my jquery being broken!
How can I work around this?
Since you are using the submit event handler, if the confirmation is negative then you have to prevent the default action, it can be done via
It should be
$('#myForm').submit(function(e){
if(!confirm('something here')){
e.preventDefault();
}
});
Try this instead:
$('#myForm').submit(function(e){
e.preventDefault();
if(confirm('something here')){
this.submit();
}
});
Or you can simply use javascript, No need for doing extra effort on this
<form id="myForm" onsubmit="return confirm('Something Here');">
For some reason, when the form button is clicked, the jQuery script I wrote isn't running, does anyone know why?
<body>
<form id="inputform" action="google.com">
<text id="text">Enter Your Number:</text>
<input id="input" name="input" type="text">
<input id="submitArea" type="submit" value="">
</form>
</body>
$('#inputform').submit(function() {
window.location = "http://mysite.com/";
});
Yes, I imported the jQuery library and everything, I've sourced the external JS file, but I can't figure out why it still isn't working.
You need to prevent the default action from occuring. You can do that by using preventDefault action on the event e. Something like this:
$(function(){
$('#inputform').submit(function(e) {
e.preventDefault();
window.location = "http://mysite.com/";
});
});
Assuming your script is inside document ready, else you need to move the script inside `jQuery(function($){.....});
You need to prevent the default action of the submit button
$('#inputform').submit(function(e) {
window.location = "http://mysite.com/";
return false; // or call e.preventDefault();
});
Ideally you should not do a window.location call from inside a submit button. The data you entered in the Form's text input field wont be automatically posted to the action page if you do so.
<body>
<form id="inputform" action="http://mysite.com/">
<text id="text">Enter Your Number:</text>
<input id="input" name="input" type="text">
<input id="submitArea" type="submit" value="">
</form>
I have a website where we use Javascript to submit the login form. On Firefox it prompts the user to remember their password, when they login, but on IE7 it doesn't.
After doing some research it looks like the user is only prompted in IE7 when the form is submitted via a Submit control. I've created some sample html to prove this is the case.
<html>
<head>
<title>test autocomplete</title>
<script type="text/javascript">
function submitForm()
{
return document.forms[0].submit();
}
</script>
</head>
<body>
<form method="GET" action="test_autocomplete.html">
<input type="text" id="username" name="username">
<br>
<input type="password" id="password" name="password"/>
<br>
Submit
<br>
<input type="submit"/>
</form>
</body>
</html>
The href link doesn't get the prompt but the submit button will in IE7. Both work in Firefox.
I can't get the style of my site to look the same with a submit button, Does anyone know how to get the remember password prompt to show up when submitting via Javascript?
Why not try hooking the form submission this way?
<html>
<head>
<title>test autocomplete</title>
<script type="text/javascript">
function submitForm()
{
return true;
}
</script>
</head>
<body>
<form method="GET" action="test_autocomplete.html" onsubmit="return submitForm();">
<input type="text" id="username" name="username">
<br>
<input type="password" id="password" name="password"/>
<br>
Submit
<br>
<input id="FORMBUTTON" type="submit"/>
</form>
</body>
</html>
That way your function will be called whether the link is clicked or the submit button is pushed (or the enter key is pressed) and you can cancel the submission by returning false. This may affect the way IE7 interprets the form's submission.
Edit: I would recommend always hooking form submission this way rather than calling submit() on the form object. If you call submit() then it will not trigger the form object's onsubmit.
Did you try putting in url in the href and attaching a click event handler to submit the form and returning false from the click handler so that the url does not get navigates to.
Alternatively hidden submit button triggered via javascript?
You could try using the HTML <button> tag instead of a link or a submit button.
For example,
<button type="submit">Submit</button>
The <button> tag is much easier to style than the standard <input type="submit">. There are some cross-browser quirks but they are not insurmountable.
A really great article about the use of <button> can be found at particletree: Rediscovering the button element