Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Forms: event and method submit#454

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to ourterms of service andprivacy statement. We’ll occasionally send you account related emails.

Already on GitHub?Sign in to your account

Merged
Show file tree
Hide file tree
Changes fromall commits
Commits
Show all changes
16 commits
Select commitHold shift + click to select a range
21fb24e
Forms: event and method submit
puntopeDec 9, 2020
af25299
Update task.md
puntopeDec 9, 2020
62f6bc5
Update solution.md
puntopeDec 9, 2020
7a8321a
Update index.html
puntopeDec 9, 2020
a1bf500
Update index.html
puntopeDec 9, 2020
ed8bf56
Update 2-ui/4-forms-controls/4-forms-submit/1-modal-dialog/solution.md
puntopeDec 10, 2020
a3f2a94
Update 2-ui/4-forms-controls/4-forms-submit/1-modal-dialog/solution.md
puntopeDec 10, 2020
d5f8910
Update 2-ui/4-forms-controls/4-forms-submit/1-modal-dialog/solution.v…
puntopeDec 10, 2020
b7350f2
Update 2-ui/4-forms-controls/4-forms-submit/1-modal-dialog/task.md
puntopeDec 10, 2020
9164cba
Update 2-ui/4-forms-controls/4-forms-submit/1-modal-dialog/task.md
puntopeDec 10, 2020
9e2559a
Update 2-ui/4-forms-controls/4-forms-submit/article.md
puntopeDec 10, 2020
a1e0e94
Update 2-ui/4-forms-controls/4-forms-submit/1-modal-dialog/solution.md
puntopeDec 10, 2020
8132ed7
Update 2-ui/4-forms-controls/4-forms-submit/1-modal-dialog/task.md
puntopeDec 10, 2020
f782995
Update 2-ui/4-forms-controls/4-forms-submit/1-modal-dialog/task.md
puntopeDec 10, 2020
91715b7
Update 2-ui/4-forms-controls/4-forms-submit/article.md
puntopeDec 10, 2020
7cbe071
Update 2-ui/4-forms-controls/4-forms-submit/article.md
puntopeDec 10, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
Amodalwindow can be implemented using a half-transparent`<div id="cover-div">`that covers the whole window, like this:
Una ventanamodalpuede ser implementada utilizando un`<div id="cover-div">`semi-transparente que cubra completamente la ventana, como a continuación:

```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.
Debido a que el`<div>`cubre toda la ventana, recibe todos los clicks,en vez de la página tras él.

Also we can prevent pagescrollby setting `body.style.overflowY='hidden'`.
También podemos evitar elscrollen la página utilizando `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`.
El formulario no debe estar en el `<div>` sino junto a él, porque no queremos que tenga `opacity`.
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -8,28 +8,28 @@

<body style="height:3000px">

<h2>Click the button below</h2>
<h2>Pulsa el botón de abajo</h2>

<input type="button" value="Clickto show the form" id="show-button">
<input type="button" value="Clickaquí para mostrar el formulario" id="show-button">


<div id="prompt-form-container">
<form id="prompt-form">
<div id="prompt-message"></div>
<input name="text" type="text">
<input type="submit" value="Ok">
<input type="button" name="cancel" value="Cancel">
<input type="button" name="cancel" value="Cancelar">
</form>
</div>

<script>
//Show a half-transparentDIVto "shadow" the page
// (the form is not inside, but near it, because it shouldn't be half-transparent)
//Mostrar unDIVsemi-transparente para cubrir la página.
// (el formulario no está dentro sino junto a él, porque no debe tener transparencia.
function showCover() {
let coverDiv = document.createElement('div');
coverDiv.id = 'cover-div';

//make the page unscrollable while the modal form is open
//evitar el scroll en la página cuando el modal esta abierto
document.body.style.overflowY = 'hidden';

document.body.append(coverDiv);
Expand All@@ -56,7 +56,7 @@ <h2>Click the button below</h2>

form.onsubmit = function() {
let value = form.text.value;
if (value == '') return false; //ignore emptysubmit
if (value == '') return false; //ignorarsubmit vacíos

complete(value);
return false;
Expand DownExpand Up@@ -94,8 +94,8 @@ <h2>Click the button below</h2>
}

document.getElementById('show-button').onclick = function() {
showPrompt("Enter something<br>...smart :)", function(value) {
alert("You entered: " + value);
showPrompt("Escribe algo<br>...inteligente :)", function(value) {
alert("Escribiste: " + value);
});
};
</script>
Expand Down
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -11,11 +11,11 @@

<div id="prompt-form-container">
<form id="prompt-form">
<div id="prompt-message">Enter something...
<br>Please..</div>
<div id="prompt-message">Escribe algo...
<br>Por favor...</div>
<input name="text" type="text">
<input type="submit" value="Ok">
<input type="button" name="cancel" value="Cancel">
<input type="button" name="cancel" value="Cancelar">
</form>
</div>

Expand Down
28 changes: 14 additions & 14 deletions2-ui/4-forms-controls/4-forms-submit/1-modal-dialog/task.md
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -2,32 +2,32 @@ importance: 5

---

#Modal form
#Formulario modal

Create a function `showPrompt(html, callback)`that shows a form with the message`html`,aninputfield and buttons`OK/CANCEL`.
Crea una función `showPrompt(html, callback)` que muestre un formulario con el mensaje`html`,un campoinputy botones`OK/CANCELAR`.

-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.
-Un usuario debe escribir algo en el campo de texto y pulsar`key:Enter`o el botón OK, entonces `callback(value)`es llamado con el valor introducido.
-En caso contrario, si el usuario pulsa`key:Esc`o CANCELAR, entonces `callback(null)`es llamado.

In both cases that ends the input process and removes the form.
En ambos casos se finaliza el proceso se y borra el formulario.

Requirements:
Requisitos:

-The form should be in the center of the window.
-The form is *modal*.In other words, nointeraction 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.
-El formulario debe estar en el centro de la ventana.
-El formulario es *modal*.Es decir que nohabrá interacción con el resto de la página, siempre que sea posible, hasta que el usuario lo cierre.
-Cuando se muestra el formulario, el foco debe estar en el `<input>`del usuario.
-Las teclas`key:Tab`/`key:Shift+Tab`deben alternar el foco entre los diferentes campos del formulario, no se permite cambiar el foco a otros elementos de la página.

Usage example:
Ejemplo de uso:

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

A demo in the iframe:
Demo en el iframe:

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

P.S.The source document hasHTML/CSSfor the form with fixed positioning, but it's up to you to make it modal.
P.S.El código fuente tiene elHTML/CSSpara el formulario con posición fija. Pero tú decides cómo haces el modal.
48 changes: 24 additions & 24 deletions2-ui/4-forms-controls/4-forms-submit/article.md
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -1,55 +1,55 @@
#Forms: event and method submit
#Formularios: evento y método 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.
El evento`submit`se activa cuando el formlario es enviado, normalmente se utiliza para validar el formulario antes de ser enviado al servidor o bien para abortar el envío y procesarlo con JavaScript.

The method `form.submit()`allows to initiate form sending fromJavaScript.We can use it to dynamically create and send our own forms to server.
El método `form.submit()`permite iniciar el envío del formulario medianteJavaScript.Podemos utilizarlo para crear y enviar nuestros propios formularios al servidor.

Let's see more details of them.
Veamos más detalles sobre ellos.

##Event: submit
##Evento: submit

There are two main ways to submit a form:
Mayormente un formulario puede enviarse de dos maneras:

1.The first --to click `<input type="submit">`or `<input type="image">`.
2.The second --press`key:Enter`on an input field.
1.La primera --Haciendo clicken`<input type="submit">`o en `<input type="image">`.
2.La segunda --Pulsando la tecla`key:Enter`en un campo del formulario.

Both actions lead to`submit`event on the form. The handlercan check the data, and if there are errors, show them and call`event.preventDefault()`,then the form won't be sent to the server.
Ambas acciones causan que el evento`submit`sea activado en el formulario. El handlerpuede comprobar los datos, y si hay errores, mostrarlos e invocar`event.preventDefault()`,entonces el formulario no será enviado al servidor.

In the form below:
1.Go into the text field and press `key:Enter`.
2.Click `<input type="submit">`.
En el formulario de abajo:
1.Ve al campo tipo texto y pulsa la tecla `key:Enter`.
2.Haz click en `<input type="submit">`.

Both actions show `alert`and the form is not sent anywhere due to `return false`:
Ambas acciones muestran `alert`y el formulario no es enviado debido a la presencia de `return false`:

```html autorun height=60 no-beautify
<form onsubmit="alert('submit!');return false">
First: Enterin the input field<input type="text" value="text"><br>
Second: Click "submit": <input type="submit" value="Submit">
Primero: Enteren el campo de texto<input type="text" value="texto"><br>
Segundo: Click en "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">`.
Cuando un formulario es enviado utlizando `key:Enter`en un campo tipo texto, un evento`click`se genera en el `<input type="submit">`

That's rather funny, because there wasno clickat all.
Muy curioso, dado quenohubo ningúnclicken absoluto.

Here's the demo:
Aquí esta la demo:
```html autorun height=60
<form onsubmit="return false">
<input type="text" size="30" value="Focus here and press enter">
<input type="text" size="30" value="Sitúa el cursor aquí y pulsa Enter">
<input type="submit" value="Submit" *!*onclick="alert('click')"*/!*>
</form>
```

````

##Method: submit
##Método: submit

To submit a form to the server manually, we can call `form.submit()`.
Para enviar un formulario al servidor manualmente, podemos usar `form.submit()`.

Then the`submit`event is not generated. It is assumed that if the programmer calls`form.submit()`,then the scriptalready did all related processing.
Entonces el evento`submit`no será generado. Se asume que si el programador llama`form.submit()`,entonces el scriptya realizó todo el procesamiento relacionado.

Sometimes that's used to manually create and send a form, like this:
A veces es usado para crear y enviar un formlario manualmente, como en este ejemplo:

```js run
let form = document.createElement('form');
Expand All@@ -58,7 +58,7 @@ form.method = 'GET';

form.innerHTML = '<input name="q" value="test">';

//the form must be in the documentto submit it
//el formulario debe estar en el documentpara poder enviarlo
document.body.append(form);

form.submit();
Expand Down
[8]ページ先頭
©2009-2025 Movatter.jp