We Keep Coding

Submission form : On Enter key press cancel action is being called

I have a submission form with Cancel and Submit button. Once input field is focused and Enter key is pressed then function on Cancel button is invoked. However it should invoke the function on Submit button with type="submit". Also I cannot change the DOM structure. Any tips
<form>
<input id="title" type="text"/>
<button onClick={()=>{console.log("cancel")}>Cancel</button>
<button type="submit" onClick={()=>{console.log("submit")}>Submit</button>
</form>

How do I know what caused a form submission?

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

work with button in form without submit form jsp

I am using two buttons in <form>. one for submit form and other for add categories to textfield.
<button id="catadd" class="btn-default" onclick="me()">+ Add Category</button>
<button name="submitcreate" id="submitcreate" type="submit" class="btn-default">
categories add to textfield using JavaScript. onclick="me()" for that.
but when i click on catadd button form submit too.
how stop it.

You need to set the type attribute to button
<form>
<button type="button">click me for some js logic</button>
<button>I am a submit by default !</button>
</form>

A button with no type attribute acts as type="submit", and will attempt to submit form data when clicked.
So, the simple solution of your query would be to specify the type of the "categories add" button like:
<button id="catadd" class="btn-default" onclick="me()">+ Add Category</button>
More details here: https://dev.to/clairecodes/why-its-important-to-give-your-html-button-a-type-58k9

How can i submit and redirect a form using jquery

I want to submit and redirect a form using jquery.I have tried to do it but redirect does not works, here is my code. The problem is i have two submit buttons in my form and both are redirecting to other page when i set the action=".....php".But i do not want update cart button to redirect to any other page so i want to use jquery for submitting and redirecting form. Please give me some solution. Thanks...
<script type="text/javascript">
$(document).ready(function(){
$('#updateCart').click(function(){
$('#form1').submit();
window.location.href='Checkout.php';
});
});
</script>
<form name="form1" method="post" id="cartform" class="clearfix" action="#">
<input type="submit" id="updateCart" value="Update Cart" class="btn-txt" name="update" onclick="update_cart()">
<input type="submit" class="checkout-button btn" name="checkout" />
</form>

You should do e.preventDefault(); on the update cart button and then fire the function that updates the cart.
Something like this:
<script type="text/javascript">
$(document).ready(function(){
$('#updateCart').click(function(e){
e.preventDefault();
updateCart();
});
});
</script>
You wouldn't want to fire the form submission when the "update cart" button is pressed, only when the "checkout" button is pressed.

Your approach is OK but you need to decide which button is your official form "submit" button, and which is attached to a jQuery function to update the form before submitting.
I would recommend that you don't do any javascript for your main "Checkout" button as you will want this to go to a payment page where you capture payment details - i.e. the form will follow it's action="checkout.php".
For your "Update Cart" button follow APAD1's answer and adapt it to your needs. If you're going to be updating form fields you'll need to think about using JSON-encoded returned data...

You could just make it an html button that doesn't submit by setting it's type to "button" and then it will just run the javascript when clicked. Then you can put the action attribute back on your form and it will only submit for the checkout submit button.
<button type="button" id="updateCart" class="btn-txt" name="update" onclick="update_cart()">Update Cart</button>

add id or class in form tag
<form id="form1" ...>
change submit button to anchor
<a id="submitAnchor"> ... </a>
and in javascript submit the form and redirect the user as well
$("#submitAnchor").click(function(){
$(".form1").submit();
setTimeout(function() {
window.location = 'your URL';
}, 1000);
});

How can i fire a function inside an input-field? or a default button with that function without actually submitting?

It works:
When the button is used
The problem is:
When pressing enter inside the text-field, the default action seems to be submit. I just want it to use the button available as default. Is this possible or will i have to highjack the enterpress with javascript?
Code:
<form>
<label>Password:<input type="password" id="pass" name="pass"></label>
<input type="button" value="hämta data" onclick="getData('password.txt')"/>
</form>

By default, pressing Enter in the last field of a form submits the form. Try this:
<form onsubmit="return false;">
so that submitting the form doesn't do anything.