So I tried a couple of things when I using JS and try submitting inputs, and there are odd things I didn't understand the logic.

1. There is a difference between <input tpye="submit/> inside and outside of <form> tag. If it's inside the form tag I need to use preventDefault() function, but if it's outside form tag I am not required to do that if write simple js vanilla code. Why is that?

2. What the difference between onsubmit and onclick ? especially in a form tag. Because If I use onsubmit the js code doesn't really work.

3. If I use preventDefault(event) it's preventing from the form to be sended into a server, and instead it doing the calculations with the browser only ?

Thanks !

So I tried a couple of things when I using JS and try submitting inputs, and there are odd things I didn't understand the logic.

1. There is a difference between <input tpye="submit/> inside and outside of <form> tag. If it's inside the form tag I need to use preventDefault() function, but if it's outside form tag I am not required to do that if write simple js vanilla code. Why is that?

2. What the difference between onsubmit and onclick ? especially in a form tag. Because If I use onsubmit the js code doesn't really work.

3. If I use preventDefault(event) it's preventing from the form to be sended into a server, and instead it doing the calculations with the browser only ?

Thanks !

• javascript
• forms
• submit
• form-submit

• Please show your code. It sounds a bit confusing. A submit button inside a form will submit the form and needs to be stopped to do so, outside not. Makes sense, no? – mplungjan Commented Dec 5, 2019 at 18:41
• Does this answer your question? How to prevent form from being submitted? – Goran Stoyanov Commented Dec 5, 2019 at 18:43
• @GoranStoyanov Actually not, it's just saying it prevents the submitting. Maybe I just don't understand what "prevent submit" means. Is it prevent form to be sent to the server and instead the calculations happening on the browser? – lir sim Commented Dec 5, 2019 at 18:50

2 Answers 2

1. If you have a type="submit" input (Note, The default value for the type attribute of button elements is "submit") inside a form, the default action on click is to submit that form. To prevent it from submitting, place the button outside the </form>. This works because the button doesn't refer to any form to submit. You can instead, add a listener and call event.preventDefault(). This works because you are telling the browser NOT to take the default action (submitting the form)

2. onsubmit is used mostly on <form> elements. It triggers right before the form is submitted regardless of how it is submitted. onclick can be emitted from just about any element. It occurs when you click on an element. This could be on an <input>, a <button>. or even an entire <form>

3. Don't use this.

By default, if you have an input of type "submit" in a form then clicking that input (or hitting enter after filling in ANY inputs in the form) will send a post or get request to the server, redirecting the current page to the server's response.

This was the original way to submit form data to a server, without using javascript. If you want to prevent this from happening, you can either replace the submit input with a plain button (<button onclick="doSomething()">Submit</button>), or prevent the default submission event: (form.onsubmit = event => event.preventDefault()).

The difference between onsubmit and onclick is that onsubmit only fires when a submission event is emitted from the form. To emit a submit event, the form needs an <input type="submit"> to be clicked, or for the user to trigger a submission by hitting enter.

Another way to prevent this default behavior is to return false in the submission handler.

onclick only gets fired when an element is clicked. Because events in javascript propagate up to parents, this will also trigger any onclick handlers on all parent elements.

If you want to pletely ignore the default form submission behavior, then you can define a button with an onclick handler to handle your custom submission logic.