Ir al contenido principal

Campos automaticos con javascript y JQuery -Parte 1

El dinamismo que te ofrece una web hoy en día es increíble, me recuerdo que haya por 2003 haciendo mis primero pinines en HTML todo era hecho con tablas al igual que casi todo lo demás, headers, menus, contents, footers, etc.

Ahora tenemos la dicha de hacer cosas inimaginables a esa época, animaciones increíbles, contenido totalmente dinámico, canvas y no se cuantas cosas mas ya que básicamente el front-end es inmenso. Pero en esta ocasión vengo a mostrarles como se crean los campos dinámicos.

Hace no mucho tiempo atrás me toco que investigar sobre el caso de campos dinámicos, tanto para un trabajo que me solicitaron, como para un proyecto de la Universidad y me di cuenta que existen muchas maneras de hacerlos, unas mas complejas que otras (si tuviera los link a mano, los dejara acá para que ustedes los estudiaran detenidamente). Pero no solo simples campos dinámicos que básicamente se pueden hacer sin mas ni mas con un simple click en algún botón, sino que campos que te permitan hacer algunas operaciones básicas en ellos (sumar cantidades, multiplicar esas cantidades, etc).

En esta primera entrada veremos como crearlos, sin mas ni mas y en las próximas les daremos dinamismo. Pero antes déjame comentarte lo que haremos.

  • Supongamos que en algún lugar tenemos alguna base de datos con información de productos y que lo único que manejaremos serán las cantidades de dichos productos
  • Nuestros campos se agregaran uno tras otro
  • Manejaremos advertencias
  • Usaremos Bootstrap y jQuery


Lo primero que haremos es crear una estructura base para luego darle dinamismo
<html>
<head>
Campos automaticos


</head>
<body>
</body> </html>
Luego agregamos un DIV con id = "Adds"  dentro del DIV con class = "container" en el cual agregaremos un FORM con class = "form-inline" que contendra un DIV con class = "form-group" extra para darle estilo por parte de bootstrap, dentro de el contendrá el SELECT que se logra apreciar en la imagen de arriba, un LABEL y su respectivo INPUT, para terminar agregamos una etiqueta A la cual contendra una pequeña imagen que le hara las veces de un boton (solo para aclarar, se pudo haber usado un boton, solo que a mi se me vino en ganas, creo que con un boton se pudo estilizar un poco mas).
Al cierre del FORM anterior agregamos un DIV con id = "for_new_adds" mas que sera donde agreguemos los campos al momento de presionar el botón con el signo +.  Dentro de la etiqueta A y su respectivo HREF se encuentra un script que no hace nada, simplemente es para no refrescar la pagina actual con un #.

Y eso sera todo en lo que respecta a el HTML que usaremos, en la siguiente entrada agregaremos en dinamismo por parte de Jquery, espero les agrade esto.
PD: ustedes tienen que ordenar el contenido, porque cuando el blog agrega el reordenamiento lo pierde

Entradas populares de este blog

Northwind para Mysql y otras

Supongamos que necesitamos una base de datos para comenzar a hacer pruebas y a la vez necesitamos que esa base de datos contenga mucha información con la cual trabajar. En mis tiempos de universidad existía una base de datos que utilizábamos en los laboratorios con SQL Server y c# para mostrar los datos en algún formulario. El nombre era Northwind. El problema es que era solo para SQL Server, pero alguien en se dio a la tarea de exportar esa base de datos a MySql y es justo lo que te vengo a mostrar acá. Hace un tiempo atrás clone de los repositorios de Google Code   esa información (que como algunos de ustedes sabrá dejara de estar al servicio de todos en un tiempo). Modifique un poco la DB de Mysql para que se pudiera ejecutar el script sin ningún problema. Lo interesante de todo esto es que puedes utilizar los demás script para diferentes gestores de base de datos Se advierte que para poder usarlas adecuadamente hay que modificar los campos de tipo longblob y qu...

How to upload File from form data POST in Android with Retrofit 2

 The last day I explain how to upload a simple CSV file using node . And now I teach how to upload from android device. Get source code here:  GitHub This article is write in java... later I'll add the method for kotlin. The logic is not changed, only the format code. 1) Is necessary add the dependencies in gradle: module implementation 'com.google.code.gson:gson:2.8.6' // RETROFIT // implementation 'com.squareup.retrofit2:retrofit:2.6.2' implementation 'com.squareup.retrofit2:converter-gson:2.6.2' implementation 'com.squareup.retrofit2:converter-scalars:2.5.0' 2) Add permissions in AndroidManifest.xml and modified the application for work with network security policy <uses-permission android:name="android.permission.INTERNET" /> <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" /> <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" /> in applitacion add ...

Como encriptar AES con Node JS

  Puedes descargar el proyecto desde este enlace El otro día surgió una necesidad para encriptar contenido bajo el algoritmo AES y es la que te vengo a mostrar a continuación en la cual use Node para solventar mi necesidad. Pude haber usando cualquier lenguaje que me viniera en gana pero no quería instalar nada mas. Dependencias: NodeJS >= 12 Crypto-JS Aplicaciones recomendadas: Git bash Visual Studio Code Lo primero que necesitamos es tener una clave única (KEY) y un vector de inicialización (IV). Este ultimo no es necesario pero agrega un extra de seguridad a nuestro contenido. Para lo cual usaremos el bash de git para utilizar openssl KEY openssl rand -base64 24 IV openssl rand -base64 12 Ahora que ya tenemos estas 2 cadenas únicas. Podemos proceder a escribir nuestro código. npm init -y Luego hacemos una modificación en el package.json para que admita módulos "type": "module", Instalamos la dependencia de Crypto-JS npm i crypto-js --save Ahora importamos l...