65 lines
2.2 KiB
Markdown
65 lines
2.2 KiB
Markdown
# Forms: event and method submit
|
|
|
|
The `submit` event triggers when the form is submitted, it is usually used to validate the form before sending it to the server or to abort the submission and process it in JavaScript.
|
|
|
|
The method `form.submit()` allows to initiate form sending from JavaScript. We can use it to dynamically create and send our own forms to server.
|
|
|
|
Let's see more details of them.
|
|
|
|
## Event: submit
|
|
|
|
There are two main ways to submit a form:
|
|
|
|
1. The first -- to click `<input type="submit">` or `<input type="image">`.
|
|
2. The second -- press `key:Enter` on an input field.
|
|
|
|
Both actions lead to `submit` event on the form. The handler can check the data, and if there are errors, show them and call `event.preventDefault()`, then the form won't be sent to the server.
|
|
|
|
In the form below:
|
|
1. Go into the text field and press `key:Enter`.
|
|
2. Click `<input type="submit">`.
|
|
|
|
Both actions show `alert` and the form is not sent anywhere due to `return false`:
|
|
|
|
```html autorun height=60 no-beautify
|
|
<form onsubmit="alert('submit!');return false">
|
|
First: Enter in the input field <input type="text" value="text"><br>
|
|
Second: Click "submit": <input type="submit" value="Submit">
|
|
</form>
|
|
```
|
|
|
|
````smart header="Relation between `submit` and `click`"
|
|
When a form is sent using `key:Enter` on an input field, a `click` event triggers on the `<input type="submit">`.
|
|
|
|
That's rather funny, because there was no click at all.
|
|
|
|
Here's the demo:
|
|
```html autorun height=60
|
|
<form onsubmit="return false">
|
|
<input type="text" size="30" value="Focus here and press enter">
|
|
<input type="submit" value="Submit" *!*onclick="alert('click')"*/!*>
|
|
</form>
|
|
```
|
|
|
|
````
|
|
|
|
## Method: submit
|
|
|
|
To submit a form to the server manually, we can call `form.submit()`.
|
|
|
|
Then the `submit` event is not generated. It is assumed that if the programmer calls `form.submit()`, then the script already did all related processing.
|
|
|
|
Sometimes that's used to manually create and send a form, like this:
|
|
|
|
```js run
|
|
let form = document.createElement('form');
|
|
form.action = 'https://google.com/search';
|
|
form.method = 'GET';
|
|
|
|
form.innerHTML = '<input name="q" value="test">';
|
|
|
|
// the form must be in the document to submit it
|
|
document.body.append(form);
|
|
|
|
form.submit();
|
|
```
|