Merge pull request #454 from puntope/Forms-event-and-method-submit

joaquinelio · web-flow · commit 85b14d2b2d7c · 2020-12-14T03:20:19.000-03:00
Forms: event and method submit
diff --git a/2-ui/4-forms-controls/4-forms-submit/1-modal-dialog/solution.md b/2-ui/4-forms-controls/4-forms-submit/1-modal-dialog/solution.md
@@ -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:
+Una ventana modal puede ser implementada utilizando un `<div id="cover-div">` semi-transparente que cubra completamente la ventana, como a continuación:
 
 ```css
 #cover-div {
@@ -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 page scroll by setting `body.style.overflowY='hidden'`.
+También podemos evitar el scroll en 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`.
diff --git a/2-ui/4-forms-controls/4-forms-submit/1-modal-dialog/solution.view/index.html b/2-ui/4-forms-controls/4-forms-submit/1-modal-dialog/solution.view/index.html
@@ -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="Click to show the form" id="show-button">
+  <input type="button" value="Click aquí 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-transparent DIV to "shadow" the page
-    // (the form is not inside, but near it, because it shouldn't be half-transparent)
+    // Mostrar un DIV semi-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);
@@ -56,7 +56,7 @@ <h2>Click the button below</h2>
 
       form.onsubmit = function() {
         let value = form.text.value;
-        if (value == '') return false; // ignore empty submit
+        if (value == '') return false; // ignorar submit vacíos
 
         complete(value);
         return false;
@@ -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>
diff --git a/2-ui/4-forms-controls/4-forms-submit/1-modal-dialog/source.view/index.html b/2-ui/4-forms-controls/4-forms-submit/1-modal-dialog/source.view/index.html
@@ -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>
 
diff --git a/2-ui/4-forms-controls/4-forms-submit/1-modal-dialog/task.md b/2-ui/4-forms-controls/4-forms-submit/1-modal-dialog/task.md
@@ -2,32 +2,32 @@ importance: 5
 
 ---
 
-# Modal form
+# Formulario modal
 
-Create a function `showPrompt(html, callback)` that shows a form with the message `html`, an input field and buttons `OK/CANCEL`.
+Crea una función `showPrompt(html, callback)`  que muestre un formulario con el mensaje `html`, un campo input y 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, 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.
+- El formulario debe estar en el centro de la ventana.
+- El formulario es *modal*. Es decir que no habrá 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 has HTML/CSS for the form with fixed positioning, but it's up to you to make it modal.
+P.S. El código fuente tiene el HTML/CSS para el formulario con posición fija. Pero tú decides cómo haces el modal.
diff --git a/2-ui/4-forms-controls/4-forms-submit/article.md b/2-ui/4-forms-controls/4-forms-submit/article.md
@@ -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 from JavaScript. 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 mediante JavaScript. 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 click en `<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 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.
+Ambas acciones causan que el evento `submit` sea activado en el formulario. El handler puede 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: Enter in the input field <input type="text" value="text"><br>
-  Second: Click "submit": <input type="submit" value="Submit">
+  Primero: Enter en 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 was no click at all.
+Muy curioso, dado que no hubo ningún click en 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 script already did all related processing.
+Entonces el evento `submit` no será generado. Se asume que si el programador llama `form.submit()`, entonces el script ya 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');
@@ -58,7 +58,7 @@ form.method = 'GET';
 
 form.innerHTML = '<input name="q" value="test">';
 
-// the form must be in the document to submit it
+// el formulario debe estar en el document para poder enviarlo
 document.body.append(form);
 
 form.submit();
