Inicio > Ajax, Español, JavaScript, Oracle, Oracle APEX > Modificación automática items formulario tabular (Ajax)

Modificación automática items formulario tabular (Ajax)

En este POST voy a tratar de explicar algo que aparentemente es muy sencillo, pero que se puede complicar a medida que vamos realizando el desarrollo. La idea es que se modifiquen determinados campos de un formulario tabular, cuando modifico el valor de otro de los campos del mismo formulario.

Supongamos que tenemos una pantalla en la que tenemos el siguiente formulario tabular.

Ahora planteemos que es lo que deseemos hacer: “Nos gustaría que cuando modificamos el nombre, automáticamente se complete el grupo, el num 01, el num 02 y el num 03 con una serie de valores preestablecidos”

Para ellos, seguro que existen multitud de posibilidades, pero no nosotros vamos a usar una que a nuestro parecer es muy sencilla y cómoda de implementar. Vamos a hacer uso de nuestro gran aliado el JavaScript.

Lo primero que vamos a hacer es crear un asociar al campo nombre una acción sobre su evento onChange. Para ello debemos editar el campo del informe y en el apartado Element Attributes situado en la región Column Attributes debemos poner un código similar a este:

onChange=’myFunction(this);’

Con esto vamos a conseguir que cada vez que se cambie el valor del campo nombre, se ejecute nuestra función de JavaScript a la que hemos llamado myFunction. El resto del proceso es más trabajo de JavaScript que del propio APEX. Debemos realizar el desarrollo de la función que queremos que modifique los valores de los campos e insertarla en la parte destinada a la definición de código JavaScript de la página (Page -> Edit Page -> HTML Header and Body Attributes). Aquí será donde deberemos introducir un código similar al que os muestro a continuación.

function myFunction (obj) {

// Valor para GRUPO
document.getElementById(‘f05_’ + obj.id.substr(4,4)).value = ‘GRUPO’;

// Valor para NOM 01
document.getElementById(‘f06_’ + obj.id.substr(4,4)).value = 01;

// Valor para NOM 02
document.getElementById(‘f07_’ + obj.id.substr(4,4)).value = 02;

// Valor para NOM 03
document.getElementById(‘f07_’ + obj.id.substr(4,4)).value = 03;

}

Con esta sencilla función de JavaScript conseguiremos que se modifiquen los valores de cada uno de los campos que deseamos atacando directamente al DOM de cada uno de los objetos que componen el formulario tabular.

Espero que os resulte de utilidad y si tenéis cualquier tipo de duda, no dudéis en poneros en contacto con nosotros para que os ayudemos en todo lo que necesitéis.

  1. Aún no hay comentarios.
  1. No trackbacks yet.

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: