JavaScript - Acceso a elementos del form creados dinámicamente

 
Vista:
sin imagen de perfil
Val: 3
Ha aumentado su posición en 29 puestos en JavaScript (en relación al último mes)
Gráfica de JavaScript

Acceso a elementos del form creados dinámicamente

Publicado por Archi (2 intervenciones) el 06/03/2017 11:16:20
Buenos días,

Necesito acceder a través de JS a elementos de un Form creados dinámicamente. Se trata de acceder a unas listas desplegables que habrá creado un bucle según la información que haya en la BBDD. Añado el código "estático", y el cual quiero dinamizar, para cinco listas desplegables. El código de la parte del Form ya lo tengo resuelto. El tema es, ¿cómo construyo la sentencia que acceda a lista2 para cambiar alguna de sus propiedades?. Por ejemplo la propiedad "length":

"document.inscripcio_jornada.llista2.options.length = 0;" Esta sería la sentencia de acceso a la propiedad, y que debería repetir por cada lista.
"document.inscripcio_jornada.llista + i +.options.length = 0;" Esto, que es sólo para que se entienda y ya sé que no funciona, es lo que querría hacer para que mediante un bucle poder modificar la propiedad de una o todas las listas.

Probé con algo similar a esto: "window["document.inscripcio_jornada.llista" + i + ".options.length"] = 0;" pero no me funciona.
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
sin imagen de perfil

Acceso a elementos del form creados dinámicamente

Publicado por Bertoldo (6 intervenciones) el 10/03/2017 21:34:00
Hola Archi,

Entiendo, más o menos, que deseas cambiar nombres de variable dinámicamente. Intenté aplicarlo en alguna ocasión con nulo éxito. Recurrí, en cambio, con éxito absoluto, a cambiar dinámicamente el valor de una propiedad del elemento, por ejemplo la 'ID' y luego individualizarlo con 'document.getElementById' de igual manera.

Saludos,
Bertoldo.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
sin imagen de perfil
Val: 3
Ha aumentado su posición en 29 puestos en JavaScript (en relación al último mes)
Gráfica de JavaScript

Acceso a elementos del form creados dinámicamente

Publicado por Archi (2 intervenciones) el 13/03/2017 16:26:43
Hola Bertoldo,

Muchas gracias por tu respuesta. La idea no es cambiar el nombre de una variable (elemento de un formulario) dinámicamente sino acceder a las propiedades de esta y modificarla. Pero con el inconveniente de no saber si existe o no esa variable o elemento en el formulario. Por eso necesitaba previamente analizar los elementos del formulario para saber si existe o no un elemento para poder tratarlo. Es decir, acceder a elementos de un formulario desde JS que ni si quiera sé si existen. Porque su existencia dependerá de la información que haya en una BBDD.
Pues bien, durante estos días he dado con una posible solución repasando las pruebas fallidas. Y es como tu mencionas, utilizando el método "getElementById". Sólo que en mi caso también utilizo conjuntamente el método "getElementsByTagName":

"var lista_selects = document.getElementById('masterclass').getElementsByTagName('select')"

Con esta sentencia logro capturar todos los selects que existan dentro del elemento con ID=masterclass. Cualquier otro select que haya en "document", lo descartará. Con eso consigo un array con menos elementos y más concretos.

Adjunto el código fuente esperando que se vea más claro y útil a quien lo necesite:



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
<script type="text/javascript">
 
    function comprovar_lista(lista, num_lista) {
        //Devuelve un array con todos los elementos "select" que contiene el elemento con ID=masterclass
        var items_llistes = document.getElementById('masterclass').getElementsByTagName('select'); //.getElementsByName('llistat');
 
        //Numero de elementos que contiene el array "items_llistes"
        var num_items_llistes = items_llistes.length;
 
        var next_lista = num_lista++;
 
       //Vacio todos los selects desde el siguiente al seleccionado hasta el último
       for (var i = next_lista; i < num_items_llistes; ++i) items_llistes[i].options.length = 0;
 
       //inicializo el select siguiente al seleccionado con las opciones disponibles libres
        op = lista.value;
        if (op != 0) {
            for (i = 1, pos = 1; i < lista.length; i++) {
                if (lista.options[i].value != op) {
                    items_llistes[next_lista].options[pos] = new Option(lista.options[i].value, lista.options[i].value);
                    pos++;
                }
            }
        }
    }
</script>
 
 
<%
//Aquí consultamos la BBDD para inicializar la variable noms_massterclass
noms_massterclass=Split("Pepe, Luisa, Inma",","); '(Por ejemplo, esto genera array de tres posiciones, y realmente depende del contenido de una BBDD)
num_listas = UBound(noms_massterclass) + 1 'Obtenemos el numero de elementos del arrary. En este caso 3, y será el numero de  listas desplegables que crearemos
%>
 
<form......>
 
  <fieldset id="masterclass">
    <legend>..</legend>
 
    <table>
        <tr><%
         i = 1
         //Creamos tantas listas desplegables (Select) como elementos hayan en masterclass. Donde la propiedad name de cada lista será: llistat1, llistat2, llistatN 
         For each item in noms_massterclass%>
            <td><strong><%=item %> </strong><select name="llistat<%=i%>" id="llistat<%=i%>" onchange="comprovar_lista(this, <%=i%>)"><option value="0" selected="selected"></option>
                <%If i=1 Then 'Inicializamos la primera lista con el numero de opciones disponibles.
                    For x=1 To num_listas%>                                        
                        <option value="<%=x%>" ><%=x%></option><%
                    Next
                  End If %>                                        
            </select></td><%
            i = i + 1
         Next%>
       </tr>                    
    </table>        
  </fieldset>      

</form>              


Bueno, espero no haberos liado mucho y que le pueda ser útil a alguien.

Saludos,
Archi
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
sin imagen de perfil

Acceso a elementos del form creados dinámicamente

Publicado por Bertoldo (6 intervenciones) el 13/03/2017 20:55:29
Bueno, me alegro hayas encarrilado el tema.

Saludos,
Bertoldo.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar