Ir al contenido principal

Cambiar valores de otros elementos desde inputs

Vale esto es similar a lo que vimos hace un rato en este blog solo que en esa ocasion era de 1 a 1. Ahora haremos eso mismo pero de N a N, este ejemplo puede ser fácilmente aplicado a diferentes elementos, no solo a selects y desde ya vas avisado de que no es un código pulido, solo es un ejemplo.

La idea es la siguiente, tenemos N cantidad de input que podemos cambiar a la hora que se nos antoje y cuando uno de ellos cambie, hará lo mismo en un elemento adjunto y en este caso será un select tal como se aprecia en la siguiente imagen.


Yo pondre el codigo HTML que se genero mediante PHP y un for, pero es basicamente lo mismo indiferente del lenguaje que este utilizando.
Me he apoyado de las etiquetas data para poder hacer dichas acciones. Prácticamente las etiquetas datas guardaran el número de iteraciones para luego poder buscar cualquier cosa dentro de la página, ya que cada elemento contendrá un ID para identificarlos, sería algo como "nombre+numero_iteracion". Dentro de cada elemento de tipo input le diremos que haremos uso del atributo onkeyup el cual al utilizarlo este espera que le indiquemos que funcion llevara a cabo y dentro de esta funcion le enviamos el elemento actual (this).Dicho lo siguiente vamos a ver el código HTML












Se que esta largo el codigo, pero como repito, se hizo con un FOR y para que se viera adecuadamente se coloco todo el HTML resultante. Ahora el codigo javascript

 

La explicación es simple, cada que una tecla se levanta esta acción se dirige a la función que maneja el evento, obtiene el contenido que el input contiene y a partir de ahi crea el nombre del ID del select para luego asignar el valor según lo que contiene el input.

Bueno eso es todo, espero les sea util a mas de alguno.

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 que hay un

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

Abrir modal cuando se cargue la pagina web

Se advierte que blogger puede cambiar el resultado, pero tranquilo, te dejo un enlace donde lo puedes ver sin mas ni mas haciendo click aquí Una de las cosas interesantes de  usar Bootstrap en tus proyectos es que ya trae muchas funcionalidades como los modales. Algo en particular que me han preguntado mas de una vez es lo siguiente: ¿Puedo abrir un modal al momento de cargar una pagina web? La respuesta es un simple SI y te muestro como hacerlo de manera rápida Ahora simplemente tenemos que mandar a llamar un fragmento de código en nuestro JQuery: $(function(){ $("#myModal").modal(); }); Es algo simple cuando ya conoces la solución claro y espero te sirva mucho