◐ Shell
reader mode source ↗
Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
File filter
Conversations
Jump to
Diff view
Apply and reload
Show whitespace
Diff view
Apply and reload
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
A modal window can be implemented using a half-transparent `<div id="cover-div">` that covers the whole window, like this:

```css
#cover-div {
Expand All @@ -13,8 +13,8 @@ A modal window can be implemented using a half-transparent `<div id="cover-div">
}
```

Because the `<div>` covers everything, it gets all clicks, not the page below it.

Also we can prevent page scroll by setting `body.style.overflowY='hidden'`.

The form should be not in the `<div>`, but next to it, because we don't want it to have `opacity`.
24 changes: 12 additions & 12 deletions 2-ui/4-forms-controls/4-forms-submit/1-modal-dialog/task.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,30 +4,30 @@ importance: 5

# Modal form

Create a function `showPrompt(html, callback)` that shows a form with the message `html`, an input field and buttons `OK/CANCEL`.

- A user should type something into a text field and press `key:Enter` or the OK button, then `callback(value)` is called with the value they entered.
- Otherwise if the user presses `key:Esc` or CANCEL, then `callback(null)` is called.

In both cases that ends the input process and removes the form.

Requirements:

- The form should be in the center of the window.
- The form is *modal*. In other words, no interaction with the rest of the page is possible until the user closes it.
- When the form is shown, the focus should be inside the `<input>` for the user.
- Keys `key:Tab`/`key:Shift+Tab` should shift the focus between form fields, don't allow it to leave for other page elements.

Usage example:

```js
showPrompt("Enter something<br>...smart :)", function(value) {
alert(value);
});
```

A demo in the iframe:

[iframe src="solution" height=160 border=1]

P.S. The source document has HTML/CSS for the form with fixed positioning, but it's up to you to make it modal.
45 changes: 23 additions & 22 deletions 2-ui/4-forms-controls/4-forms-submit/article.md
Original file line number Diff line number Diff line change
@@ -1,42 +1,42 @@
# 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>
```
Expand All @@ -45,11 +45,12 @@ Here's the demo:

## 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');
Expand All @@ -58,7 +59,7 @@ 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();
Expand Down
Toggle all file notes Toggle all file annotations