FormData en javascript - Obteniendo datos de un formulario - Como cuando y porque usarlo - JS
Summary
TLDREn este video, el presentador ofrece una guía detallada sobre cómo utilizar una aplicación para gestionar gastos. Se describe cómo agregar un sueldo de 700 dólares a la categoría correspondiente. Se aborda el uso de 'event.preventDefault()' para evitar que el navegador recargue la página al enviar un formulario, lo cual es crucial para la funcionalidad de la aplicación. Además, se explica cómo utilizar FormData para recolectar y manejar fácilmente los datos del formulario. El presentador también destaca la importancia de entender la diferencia entre memoria dinámica y estática, y cómo se relaciona con la creación de objetos en JavaScript. Finalmente, se muestra cómo acceder a los valores de los campos del formulario utilizando 'transactionForm.get()', y se menciona la necesidad de asignar valores predeterminados a los campos para evitar errores. El video concluye con una llamada a la acción para que los espectadores compartan el contenido y se suscriban al canal para recibir más información sobre programación.
Takeaways
- 📝 Se discute la gestión de gastos a través de una aplicación, utilizando un formulario que incluye campos como descripción, monto y categoría.
- 💰 Se menciona el uso de un sueldo como ejemplo, con un monto de 700 dólares, en la categoría de 'salario'.
- 🔄 Se aborda el problema de que al añadir un nuevo registro, la página no se recarga debido a la utilización de `event.preventDefault()`.
- 🛠️ Se explica que `event.preventDefault()` cancela el comportamiento por defecto del navegador, como recargar la página después de enviar un formulario.
- 📚 Se recomienda revisar un video anterior para comprender mejor `event.preventDefault()` si el usuario no está familiarizado con él.
- 💡 Se presenta la idea de utilizar `FormData` para obtener los datos del formulario de manera más fácil y eficiente.
- 🔬 Se muestra cómo crear un objeto `FormData` y cómo utilizarlo para almacenar los pares clave-valor de los campos del formulario.
- 📋 Se destaca la diferencia entre la memoria dinámica y la memoria estática, y cómo `new FormData` utiliza memoria dinámica.
- 📝 Se describe el proceso de selección de campos del formulario utilizando `document.querySelector` y cómo acceder a ellos mediante `get()` con el nombre del campo.
- 🔄 Se discute la necesidad de asignar un valor por defecto a los campos del formulario para que el objeto `FormData` pueda capturarlos adecuadamente.
- 📱 Se menciona el uso de `querySelector` para actualizar campos en tiempo real, lo que es diferente al uso de `FormData` que guarda una referencia al valor actual del campo.
- 🚀 Se concluye con una demostración de cómo utilizar `FormData` para capturar y enviar los datos del formulario a un servidor.
Q & A
¿Qué es el evento 'event.preventDefault()' en JavaScript?
-El evento 'event.preventDefault()' se utiliza para evitar el comportamiento por defecto del navegador. En el contexto del script, se usa para evitar que la página se recargue después de enviar un formulario.
¿Cómo se puede obtener un objeto FormData a partir de un formulario HTML?
-Para obtener un objeto FormData de un formulario HTML, se puede utilizar la propiedad 'FormData' de JavaScript, pasando como argumento el elemento del formulario. Esto se hace con la sintaxis: `new FormData(formElement)`.
¿Qué es un objeto 'FormData' y cómo se utiliza en JavaScript?
-Un objeto 'FormData' es una interfaz de JavaScript que permite crear un objeto que contiene pares clave-valor, representando los datos de un formulario. Se utiliza comúnmente para enviar estos datos a través de una solicitud AJAX.
¿Cómo se accede a los valores de un objeto 'FormData'?
-Se puede acceder a los valores de un objeto 'FormData' utilizando el método 'get' seguido del nombre del campo del formulario que se desea obtener. Por ejemplo: `formData.get('transaction_description')`.
¿Por qué se deben asignar valores por defecto a los campos de un formulario antes de utilizarlos en un objeto 'FormData'?
-Se deben asignar valores por defecto a los campos de un formulario para garantizar que el objeto 'FormData' tenga un valor inicial cuando se crea, incluso si el usuario no ha modificado el campo en el formulario.
¿Cómo se puede actualizar el valor de un campo en tiempo real utilizando 'querySelector'?
-Para actualizar el valor de un campo en tiempo real, se puede utilizar el método 'querySelector' para obtener una referencia al elemento del formulario y luego modificar su valor. Esto se hace después de que el usuario interactúa con el campo.
¿Qué sucede si se modifica el valor de un campo del formulario después de haber creado el objeto 'FormData'?
-Si se modifica el valor de un campo del formulario después de haber creado el objeto 'FormData', el objeto no se actualizará automáticamente. Para reflejar los cambios, es necesario crear un nuevo objeto 'FormData' o utilizar 'querySelector' para obtener la referencia actualizada al campo.
¿Cómo se puede usar el objeto 'FormData' para enviar datos a un servidor?
-Para enviar datos a un servidor utilizando un objeto 'FormData', se puede utilizar la propiedad 'fetch' o 'XMLHttpRequest' de JavaScript, pasando el objeto 'FormData' como cuerpo de la solicitud.
¿Por qué es importante entender el concepto de memoria dinámica y estática al trabajar con objetos en JavaScript?
-La comprensión de la memoria dinámica y estática es importante porque ayuda a entender cómo se asignan y reservan los recursos de memoria para los objetos. Esto afecta la vida útil y el rendimiento del objeto, especialmente en aplicaciones grandes y complejas.
¿Cómo se puede acceder a la propiedad 'name' de un campo del formulario dentro de un objeto 'FormData'?
-Se puede acceder a la propiedad 'name' de un campo del formulario dentro de un objeto 'FormData' utilizando el método 'get' y pasando el 'name' del campo como argumento. El valor devuelto será el valor asociado con ese 'name'.
¿Qué es la función de un constructor en un objeto de JavaScript?
-La función de un constructor en un objeto de JavaScript es ejecutar acciones por defecto cuando se crea una instancia del objeto. Normalmente se utiliza para inicializar las propiedades del objeto y establecer su estado inicial.
¿Cómo se pueden manejar los datos de un formulario utilizando un objeto 'FormData'?
-Los datos de un formulario se pueden manejar utilizando un objeto 'FormData' al crear una instancia de este con el formulario como argumento. Luego, se puede acceder a los valores de los campos del formulario y manipularlos o enviarlos a un servidor utilizando los métodos proporcionados por 'FormData'.
Outlines
😀 Introducción y descripción de la aplicación de gestión de gastos
El primer párrafo inicia con un saludo y una breve descripción del clima. Seguidamente, se aborda el tema principal, que es la aplicación para gestionar gastos, mencionando un vídeo pasado donde se había configurado una descripción de un gasto. Se discute la adición de un evento 'prevent default' para evitar el recarga de la página al enviar el formulario y se ofrece una explicación detallada de cómo obtener los datos del formulario y crear un objeto FormData.
📝 Creación y uso del objeto FormData
En el segundo párrafo se profundiza en la creación de un objeto FormData, que se utiliza para manejar los campos del formulario de una manera más eficiente. Se describe cómo se puede obtener el objeto FormData a partir de un formulario HTML y cómo se puede acceder a los valores de los campos del formulario. Además, se discute la importancia de entender la diferencia entre la memoria dinámica y la memoria estática en el contexto de la creación de objetos en JavaScript.
🔄 Manipulación de datos y selección de campos con querySelector
El tercer párrafo se enfoca en la manipulación de datos una vez que se han obtenido a través del objeto FormData. Se muestra cómo se pueden asignar valores predeterminados a los campos del formulario y cómo se pueden actualizar en tiempo real. Se destaca la utilidad del método 'querySelector' para seleccionar y manipular campos específicos del formulario, y se menciona la importancia de entender la referencia a los campos en tiempo real para la actualización de datos.
Mindmap
Keywords
💡event.preventDefault
💡FormData
💡querySelector
💡memoria dinámica
💡atributos y métodos
💡transacción
💡console.log
💡categoría
💡input
💡valor por defecto
💡envío de datos
Highlights
Buenos días y descripción del clima frío en el que se encuentra el hablante.
Introducción a una aplicación para gestionar gastos, mencionada en un video anterior.
Explicación de cómo agregar un sueldo de 700 dólares como categoría de gasto en la aplicación.
Discusión sobre el comportamiento por defecto del navegador y cómo evitar la recarga de página con 'event.preventDefault'.
Demostración de cómo utilizar 'FormData' para obtener datos de un formulario y crear un objeto con ellos.
Procedimiento para seleccionar un formulario y acceder a sus elementos utilizando la consola.
Descripción técnica de la diferencia entre memoria dinámica y memoria estática en el contexto de la creación de objetos.
Creación de un objeto 'transactionForm' para manejar los campos del formulario de manera eficiente.
Uso de 'new FormData' para transformar un formulario en un objeto que contiene pares clave-valor.
Importancia de entender cómo funcionan los formularios y cómo se procesan en el servidor.
Técnica para acceder a los valores de los campos del formulario utilizando 'transactionForm.get' y el 'name' del campo.
Establecimiento de valores por defecto para los campos del formulario para evitar confusiones.
Corrección de un error al asignar valores por defecto a los campos de ingreso y egreso.
Demostración de cómo se actualiza el objeto 'transactionForm' con los valores más recientes de los campos del formulario.
Discusión sobre la diferencia entre 'transactionForm' y 'querySelector' en términos de actualización de datos en tiempo real.
Uso del objeto 'FormData' para preparar los datos del formulario antes de enviarlos a un servidor.
Conclusión del video con una revisión de los conceptos clave aprendidos sobre la manipulación de formularios y objetos 'FormData'.
Invitación a los espectadores a seguir el canal y compartir el contenido en redes sociales.
Transcripts
estimados estimados buenos días como
están por acá todo bien un poco frío
digo un poco frío y estoy tiempo de
manera corta es bastante
contraproducente de mi parte espero que
por ahí esté todo bien
bueno acá básicamente tenemos la
aplicación para gestionar nuestros
gastos que habíamos hecho en el vídeo
pasado si se acuerdan habíamos puesto la
siguiente descripción le voy a poner mi
sueldo monto de 700 dólares y categoría
salario y básicamente yo puedo añadir le
dije cuando yo presté añadir
se levanten los datos de este campo
digamos se obtengan los datos de este
formulario y se agreguen acá si se fijan
ahora cuando apretamos añadir no se
recarga la página esto es porque en el
vídeo pasado agregamos y explicamos
event punto prevén default que
básicamente evento prevén default lo que
hace es cancelar el evento pero también
se puede interpretar como que cancela el
comportamiento por defecto del navegador
el comportamiento por defecto del
navegador al enviar este formulario era
recargar la página digamos enviada
enviarlo y obtener tipo de la letra
página pero con los datos procesados
nosotros con event punto prevén de foul
lo cancelamos es importante que si
ustedes no saben que es prevén default o
los usuarios saben bien que hace miren
el video anterior para entenderlo mejor
bueno continuemos la idea ahora es que
se levanten los datos este formulario
cómo podemos hacer eso en realidad hay
varios métodos en este vídeo les voy a
enseñar una decisión
prevén de que se prevén de fondo foronda
está básicamente fórmula está nos va a
servir para obtener los campos de este
formulario fácilmente para ello lo que
voy a hacer es básicamente hacerlo en la
consola y después pasarlo al código para
que quede más ilustrado lo primero que
tenemos que hacer es básicamente
seleccionar nuestro formulario en este
caso lo tengo una constante que se llama
form así que puedo acceder a él lo
selecciona mediante siete elementos by
de que 'the element by de entonces yo
pongo con sacar puedo acceder al
formulario excelente portero
seleccionado lo que vamos a hacer ahora
es crear un objeto de tipo formato
ustedes me estarán preguntando creo que
fórmula está básicamente foronda está es
un objeto de javascript
formalmente sería como un interfaz pero
esa interfaz nos provee de un objeto nos
permite crear un objeto for data que va
a tener los elementos de nuestro
formulario como claves como pares clave
o valor se acuerda que nosotros cuando
introdujimos los formularios dijimos que
en el servidor ellos se iban a hacer
un par clave valor acá sucede lo mismo
básicamente confort plata vamos a poder
obtener ese par clave valor más
fácilmente si no sabes bien qué es un
formulario y cómo se tratan te
recomiendo que mires el video donde
introdujimos los formularios te va a
ayudar mucho bueno lo siguiente es
básicamente transformar este formulario
a un objeto font data que nos va a
permitir manejar más fácilmente los
campos como hacemos eso bueno voy a
declarar una variable let
for transacción form
transaction form data le va a poner
porque esto y por eso y acá ya lo tengo
pero vamos a hacerlo desde el principio
y ahora quiere decirles crearme un
objeto de tipo for data como digo
creando un objeto eso se hace con new
see you y después ya pasamos el nombre
de el objeto que queremos crear digamos
bien señor básicamente tenemos una buena
dinámica y la memoria estática new
agarra un pedazo de memoria dinámica y
ahí es donde vamos a poner nuestro
nuestro objeto digamos esto se encarga
toda la computadora internamente la
memoria estática básicamente se puede
decir que es como pedazos de memoria que
se reservan en tiempo de compilación y
la memoria dinámica básicamente son
pedazos de memoria que vos podés ir
agarrando en tiempo de ejecución es
básicamente esa como una gran diferencia
a grandes rasgos digo se pone sutilmente
a ver cómo es internamente la diferencia
vas a encontrar más cosas pero por ahora
qué hacen con esa nación bueno entonces
le voy a decir dame un objeto créame un
objeto agarra mi memoria dinámica para
poner un objeto esos en you de tipo
fórmula está luego tipo pero formalmente
no sería un tipo ncn bueno ahora que
hago esto que te digo nuevo objeto de
tipo fórmula está lo que tenemos que
hacer es pasarle entre paréntesis el
elemento a partir del cual se van a
obtener esas claves valor digamos a
partir del cual se va a construir ese
formato si entre paréntesis
como podemos ver esto pareció una
función se lo pasamos como paréntesis y
acá esto se debe a que internamente los
objetos si recuerdan cuando los
introdujimos ya sean pasos cali draw
básicamente los objetos son tipo un
conjunto de variables y métodos
o sea variables y funciones y acá tipo
de las funciones estos son todos
funciones y tienen una función en
particular que estaba constructor
sí
la función muy importante del
constructor recuerden en un objeto a las
funciones se le llama métodos y a los
hay variables internas de los objetos
las variables internas de ese objeto se
llaman atributos y ustedes me dirán por
qué ese cambio de nombre
a la persona que se le ocurrió hacer la
programación orientada a objetos se le
ocurrió llamar éstos son atributos
matriz
[Música]
a variables y después a funciones son
los métodos el constructor lo que hace
es digamos por defecto ejecutar cosas a
la hora de iniciar el objeto básicamente
nosotros vamos a crear un objeto de tipo
fonda está imaginemos que este fondo
está y él y le pasamos como parámetro un
formulario este objeto lo que va a hacer
no este actor así pero se lo voy a decir
como ejemplo le pasamos el formulario en
la garra y dice ok cuál es que campos
tiene este formulario tiene uno que se
llama descripción uno que se llama monte
una posición categoría en el que se dice
type transacción type ok qué valores
tiene buena descripción tiene mi sueldo
monto tiene 700 categoría tiene salario
esta transacción tiene ingresos ok y lo
guarda en una variable que puede ser un
array una lista un diccionario no lo
sabemos simplemente lo importante es que
el toma estos valores y los guarda
asociado al name que nosotros le ponemos
acá entonces nosotros tenemos el name
podemos obtener el valor esto lo
explicamos todo cuando introdujimos los
formularios así que si les recuerdo si
no lo saben pueden haberlo bueno con
esto ya tenemos un objeto de tipo de
transacción forma data de tipo ford
plata que le pusimos transacción for
data ahora acá dentro viven el name de
cada una de estas cosas así y también
vive el valor que tiene en este momento
que tuvo cuando lo creamos entonces yo
quiero acceder a ellos simplemente me
fijo el name del valor que quiera
acceder tipo en este caso transacción
descripción si de este campo quiero
acceder al valor y voy a consola
voy a ir repitiendo tipos todo esto en
el código para que nos vaya quedando
entonces vamos acá y lo ponemos acá
abajo acá ya no cree
y ahora le digo transacción for data que
es tipo la variable donde guardamos el
objeto y le digo punto get el getty lo
que va a hacer es obtener que va a
obtener lo que le pasemos entre
paréntesis que parámetro le pasamos el
name el link del campo que queremos
obtener en este caso el de éste que es
transacción descripción vamos a consola
y le pasamos entre comillas porque es un
strange el nine pima no se obtiene mi
sueldo repetimos el mismo paso para el
otro campo que queramos obtener en este
caso el monto perfecto le pasó en line
de monto transacción a mont y por último
el de categoría que va a ser transacción
categoría como lo sé de memoria porque
somos tan inteligentes que cuando los
declaramos cuando creamos estos campos
le pusimos transacción y tipo el nombre
del campo transacción amon transacción
categoría y transacción descripción
ahora que ya tenemos los datos nos
faltaría este no más tipo ak este se va
a llamar
[Música]
entonces ese lector
entonces de tema
que es eso porque edición
no sé por qué dice ustedes supongo que
estarán contando lo mismo bueno esto se
debe a que por defecto le tenemos que
asignar un valor a estos campos porque
claro nosotros cuando los pusimos a casi
se fijan los declaramos asociamos tipo
este input con la etiqueta pero no
dijimos
esto está cambiado de lugar qué feo que
es que picardía como dicen algunos que
picardía bueno por defecto esto tiene
que tener un valor porque si no no sabe
qué a qué equivale esto a qué equivale
el input ingreso volátil das pero que
ese tiempo te ingreso entonces ustedes
que dan un valor por defecto que pueda
ser identificar este caso vamos a poner
mal un valium iguala y de ingreso
y después al de ingreso le vamos a poner
un valor por defecto que va a ser egreso
egresó donde está voy a copiar esto para
ordenarlo
entonces ahora actualizó la página y voy
a marcar acá ingreso hay un acuerdo
porque lo habíamos puesto al revés
perdón mala mía me llama la medalla me
acuerdo porque ahí está la lista lista
está perfecto entonces yo marcó que
marcó ingreso descripción mi sueldo
monto 700 categoría salario esto es acá
cuando tengo el transacción form lo que
hago es ahora sí decirle punto get y el
nombre de ese campo que era transaction
type pero por las dudas se los muestro a
cap transacción tal anote es ese lector
por donde se lo mire usted es ese lector
era el nombre del campo si acá si vamos
al name de este campo dice que es este
lector entonces con esto estamos
seleccionando el valor este campo
excelente
ing que era el valor que le asignamos a
eso ingrese y en ese era un chiste
porque tipo cuando con jugadas en inglés
agrega
ing ingresen a ese chiste que lo tengo
que explicar por sí como empático ver
esa gente y ya está tenemos un objeto
a la hora de poner el evento que te va a
tener todos los campos contras de esto
hay que saber cuándo usarlo en general
esto fue hecho para hacer envíos a una
app y mediante un post digamos si fue
hecho para eso que implica que haya sido
hecho para eso que no está pensado están
pensados para ser creados digamos cuando
voy a enviar entonces qué pasa si yo acá
cambio en vez de descripción mi sueldo
le pongo
empanada me compré una empanada monto 2
710 en comida bueno simplemente lo
obtengo tse selector ahora va a ser un
ingreso si no agarro sigue siendo
ingreso que raro tal vez sea un
errorcito vamos a ver descripción
transaction
descripción si mi sueldo sigue siendo el
valor real dijo que la noche
la transacción a mont
y obviamente transacción categoría
seleccionar viejo por qué sucede esto
porque recuerden cuando creamos el
objeto le pasamos como parámetro el
formulario actual y el tomaba los datos
de ese formulario y los guardaban tomaba
el valor de esos campos si el valor no
tomaba una referencia digamos que se
actualiza en tiempo real entonces esa es
como la contra que tiene transacción
foro está está si vos necesitas tener en
tiempo real estos campos digamos para
actualizar y no solamente para enviar
tenés que usar otra cosa por ejemplo
query selector que dice el lector es una
cosa que básicamente por ejemplo si yo
acá le digo for transacción novedad debe
mostrar como ejemplo no es necesario que
lo sepan cuál es el lector y le digo
dame el campo que se llama transacción
categoría
y un value de eso que dice comida a
cambio
y vieron que se va actualizando y
básicamente eso es cómo puede ser
elector obtiene una referencia al campo
en tiempo real digamos esa cámara de
diferencia igual después más adelante
vamos a ver cuál selector por el
necesario que lo sepamos nueva final es
que está grabando bien excelente bueno
ahora vamos a usar transa que vamos a
usar el fort a está porque nosotros
vamos a apretar añadir para obtener los
campos y los guardas y después de estos
campos cambian cuando toquemos añadir de
nuevo va a crear el objeto y los
aguardar y más adelante lo vamos a
enviar a un servidor así que vamos a
dejar por plata nos va a servir para lo
que nosotros queremos y hoy vamos a
dejar el vídeo por acá básicamente lo
que hicimos fue esto de transaction for
data nada eso fue todo por hoy
como siempre pueden ir a javascript
punto damian si de acá tienen la guía
que le estoy escribiendo a poco y tienen
un equivalente a todo en este caso la de
hoy es obteniendo
obteniendo una información desde un
fondo está bueno acá les cuento cuando
usan lo que es básicamente lo que les
conté y con eso estamos por hoy espero
les haya gustado darle a like suscriban
y les pido por favor que si esto te
sirvió o no conocía por lata compartas
este vídeo en grupos de facebook en
twitter con tus amigos y si alguien
quiere aprender a programar le pasa es
la lista de reproducción o el canal así
les llevarlos a más gente y nada bueno
espero les haya gustado chau gente nos
vemos mañana
関連動画をさらに表示
5.0 / 5 (0 votes)