<form name="myForm" id="a" action="/action_page.php" method="post">
Name: <input type="email" name="fname">
</form>
<button type="submit" form="a" >submits</button>
<script>
const form=document.querySelector('form');
form.addEventListener('submit',function(e){
e.preventDefault();
console.log('a',e.currentTarget);
console.log(e.target);
},true);
</script>
e.target is 'form' itself on clicking on the button whereas according to what I have understood it should be button.
I checked for other events like invalid and click,it works perfectly fine.
Is it because of some submitter?
You aren't listening to the click event of the button, you are listening to the submit event of the form, that's why you see the form as target of the Event.
The submit event is not necessarily emitted on the submit button click, it could also be emitted by pressing ↲ in a form input field (but not on a programmatic submission: see HTMLFormElement.submit())
Luckily, what caused the form submission is available in the SubmitEvent.submitter property:
document.querySelector('form').addEventListener('submit', e => {
console.log(e.submitter);
e.preventDefault();
});
<form>
<input placeholder="Type Enter here!">
<button>Submit</button>
<button>Just another submit button</button>
</form>
Related
I am replacing some jquery codes with vanilla js, and I am having trouble with the form submit event listener
<!-- html -->
<form name="myForm">
<input type="text" name="name" />
<button type="button">Click me</button>
</form>
/* jquery code that works */
$myForm = $("form[name=myForm]")
$("form button").on("click", function(e){
$myForm.submit()
})
$myForm.on("submit", function(e){
e.preventDefault()
console.log("Submitting form")
})
/* vanilla js replacement */
myForm = document.querySelector("form[name=myForm]")
myForm.querySelector("button").addEventListener('click', function(){
myForm.submit()
})
myForm.addEventListener('submit',function(e){
e.preventDefault()
console.log("Submitting form")
})
In the vanilla js, the form submit event listener does not seem to be triggered when the form is submitted programmatically. How do I fix this?
A form's submit event listener won't be triggered when you use the .submit() method on the HTMLFormElement:
The submit event fires when the user clicks a submit button (
or <input type="submit">) or presses Enter while editing a field (e.g.
<input type="text">) in a form. The event is not sent to the form when
calling the form.submit() method directly.
- MDN
You can use the .requestSubmit() method instead, which does trigger the onsubmit event handler of the form and performs constraint validation on the form:
/* vanilla js replacement */
myForm = document.querySelector("form[name=myForm]")
myForm.querySelector("button").addEventListener('click', function() {
myForm.requestSubmit();
})
myForm.addEventListener('submit', function(e) {
e.preventDefault()
console.log("Submitting form");
})
<form name="myForm">
<input type="text" name="name" />
<button type="button">Click me</button>
</form>
The main downside to this method is that, unlike jQuery's .submit() method, requestSubmit() has weaker browser support.
I am using parsleyjs for form validation. I have two buttons 'save' and 'cancel'. I want to use save button for submitting the form, and for cancel button I do not want to submit form. Currently when I click any of them, they take me to form submission
<form id="form_validation">
<div>
<input type="text" required/>
</div>
<div>
<button type="submit">Save</button>
<button type="submit">Cancel</button>
</div>
</form>
<script>
var $formValidate = $('#form_validation');
$formValidate.parsley().on('form:submit', function () {
//this code is called when I click save or cancel button
});
</script>
If you 'cancel' button isn't to submit the form, then it shouldn't have a type="submit". Problem solved.
I have a HTML form with button:
<form action="/" method="post" id="MyForm">
<input type="hidden" name="Field1" value="Value1" />
<input type="hidden" name="Field2" value="Value2" />
<input type="submit" name="name" value="submit" />
</form>
I have event handler for submit attached to Window:
window.onsubmit = function()
{
alert("Submit happening!");
};
This event handler fires properly if I click "Submit" button.
However events never works when submit is triggered programmatically from javascript:
$("#MyForm")[0].submit();
How to catch submit event handler when it was initiated by Javascript, not by User click?
I tried to subscribe for Form event using Jquery or AddEventListener - does not work.
That's because you shouldn't just use the submit function, but trigger the submit like:
$("#MyForm").trigger('submit');
Browsers don't fire the form's onsubmit handler when you manually call form.submit().
jQuery also mimicks used to mimick that (see this "wontfix" "bug" report).
See also:
Should jQuery's $(form).submit(); not trigger onSubmit within the form tag?
JQuery: on submit doesn't work
If I have the following form, how can I select the submit button based on the form ID to be used for a click event?
<form id="login">
<input type="text" name="email">
<input type="text" name="password">
<input type="submit" name="submit">
</form>
Something like the following works, but it can't just be input[name=submit] because there may be more than one on the page.
$('input[name=submit]').click(function (e) {
e.preventDefault();
console.log('clicked');
});
This will automatically select the form's submit control:
$('#login :submit').click(...);
http://api.jquery.com/submit-selector/
Cheers
Use :
document.querySelectorAll("input[type=submit]")[0].click();
Use
$('#login input[type="submit"]')
You can read http://www.w3.org/TR/selectors/ for all CSS selectors.. (jQuery supports all default selector + more http://api.jquery.com/category/selectors/)
I'm trying to call a simple function onsubmit. I tried using onsubmit and also a listener with jQuery. My problem is that when the user presses enter he gets redirected to mysite.com?
<form id="teleport">
<input id="tInput" type="text" value="Type a location" />
<input type="button" id="tSubmit" value="Submit"/>
</form>
$("#teleport").submit(function () {
teleport(document.getElementById('tInput').value);
});
How do I prevent anything from happening when submitting? Also .submit() is only detecting the enter key, how do I listen for both enter key and clicks on the submit button?
You need to prevent the default action of the form. You can do that with event.preventDefault():
$("#teleport").submit(function (e) {
e.preventDefault();
teleport(document.getElementById('tInput').value);
});
Alternatively, you could return false inside the submit event handler for the same effect.
The easiest way to make the button submit the form too will be to change it's type to submit:
<input type="submit" id="tSubmit" value="Submit" />
Or you could attach a click event handler to your current button and trigger the submit event of the form.
Prevent submiting a form:
$("#teleport").submit(function (e) {
teleport(document.getElementById('tInput').value);
e.preventDefault();
});
Submit event catches any way of submitting a form - both with clicking the submit button and enter key press.