Enable a todos los elementos dentro de un div

memoadian · #1 (**permalink**) 15/05/2011, 09:08

Hola amigos estoy intentando hacer esto pero no se como hacerlo, tengo unas funciones que muestran y ocultan divs.

Código Javascript:

Ver originalfunction mostrardiv(name) {
    div = document.getElementById(name);
    div.style.display = '';
}
function cerrar(name) {
    div = document.getElementById(name);
    div.style.display='none';
}

muy sencillas, pero como todos los divs estan hay con inputs dentro, al mandar submit pues me manda resultados vacios, por eso les he puesto la propiedad disabled en todos los input que estan dentro de los divs ocultos.

AHORA mi labor dificil, pues soy una birria en javascript, quiero que al llamar a la función mostrar div acceder a las propiedades disabled y volverlas false, o sea habilitarlas, pero no se como

, agradeceré cualquier ayuda o pista.

zerokilled · #2 (**permalink**) 15/05/2011, 10:41

buenas,
a partir de la referencia del div que ya tienes en una variable, invoca la funcion getElementsByTagName pasandole como parametro el nombre del elemento. la funcion te devolvera una coleccion (dato similar a un aray) el cual puedes recorrer para habilitar o inhabilitar el campo. notese que la funcion no te va tomar todos los tipos de controles. es decir, con <input> te toma todos sin importar el tipo, pero queda descartado otros controles como <textarea> o <select>.

memoadian · #3 (**permalink**) 15/05/2011, 13:03

Hola a ver he intentado hacer lo que me dices haciendo esto:

Código Javascript:

Ver originalfunction mostrardiv(name) {
    div = document.getElementById(name);
    div.style.display = '';
    var tag = document.getElementsByTagName(div);
    for(var i in tag){
        document.write(tag[i]);
    }
}

y me da este resultado

0function item() { [native code] }function namedItem() { [native code] }

como diferencio de eso los elementos de mi div?

esto es lo que contienen mis divs dinámicos. a lo mejor les dice algo

Código HTML:

<div id="enlace1">
    <fieldset>
        <legend>Link 1</legend>
        <table>
            <tr><td>Servidor</td><td><select name="servidor1">
                        <option value="">Seleccionar</option>

                        <option value="megaupload">Megaupload</option>
                        <option value="rapidshare">Rapidshare</option>
                        <option value="mediafire">Mediafire</option>
                    </select></td></tr> <tr><td>Enlace</td><td><input type="text" name="link1" value=""  /></td></tr> <tr><td>Peso</td><td><input type="text" name="peso1" value=""  /></td></tr> <tr><td>formato</td><td><select name="formato1">
                        <option value="">Seleccionar</option>
                        <option value="avi">AVI</option>

                        <option value="mkv">MKV</option>
                        <option value="mp4">MP4</option>
                    </select></td></tr> </table>
        <div id="mostrarDiv" class="right-boton"><a href="javascript:mostrardiv('enlace2');">agregar otro enlace</a></div>
    </fieldset>
</div>

zerokilled · #4 (**permalink**) 15/05/2011, 15:50

notese el ejemplo de getElementsByTagName, dicho metodo es invocado desde la referencia de un elemento y a dicho metodo se le pasa como parametro un string que es el nombre de un tag a capturar que esta dentro de esa referencia. en el ejemplo

Código:

var table = document.getElementById("forecast-table"); 
// table es la referencia de un elemento con ID #forecast-table;
var cells = table.getElementsByTagName("td"); 
// desde table se invoca el metodo y se le pasa un nombre de un elemento ;

InKarC · #5 (**permalink**) 15/05/2011, 17:23

Cita:

div.style.display = '';

Dejarlo vacio no es lo mas recomendable, lo mejor es darle el atributo que necesita (para divs usualmente es "block")

Si lo que quieres es HABILITAR los input dentro del div (quitarles 'disabled="disabled"') es asi:

Código Javascript:

Ver originalfunction mostrardiv(name) {
        div = document.getElementById(name);
        div.style.display = 'block';
        inputs = div.getElementsByTagName('input');
        for (i in inputs){
              inputs[i].removeAttribute("disabled",0);
        }
    }

En html

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test</title>
<script type="text/javascript">
window.onload = function(){
mostrardiv("myDIV");
function mostrardiv(name) {
        div = document.getElementById(name);
        div.style.display = 'block';
        inputs = div.getElementsByTagName('input');
        for (i in inputs){
              inputs[i].removeAttribute("disabled",0);
        }
    }
}
 
</script>
</head>
<body>
<div style="display:none; background-color:#0C0;" id="myDIV"><form><input id="txt" name="algo" type="text" disabled="disabled"  /></form></div>
</body>
</html>

-------------
Si lo que necesita es PONERLE disabled (o sea desabilitarlo) simplemente remplaze removeAttribute("disabled",0); por setAttribute('disabled', 'disabled');

-------------
Para hacerlo con elementos SELECT en vez de elementos INPUT simplemente en vez de hacer esto:

Cita:

inputs = div.getElementsByTagName('input');

Hace esto:

Cita:

inputs = div.getElementsByTagName('select');

memoadian · #6 (**permalink**) 15/05/2011, 18:28

vaya muchisimas gracias, yo habia hecho un sistema supercomplejo que funcionaba pero era un enredo, con id's super dinamicos y un embrollo, solo una pregunta por que si hago esto:

Código Javascript:

Ver originalfunction mostrardiv(name) {
    div = document.getElementById(name);
    div.style.display = 'block';
    inputs = div.getElementsByTagName('select');
    for (b in inputs){
        inputs[b].removeAttribute("disabled",0);
    }
    select = div.getElementsByTagName('input');
    for (a in select){
        select[a].removeAttribute("disabled",0);
    }
}

solo habilita uno de los dos, el que este primero.

+ karma por el empujonsisimo me habia llevado todo el día.

zerokilled · #7 (**permalink**) 15/05/2011, 18:42

buenas,
personalmente, desaconsejo el uso del bucle for/in en estructuras indexadas (arrays, colecciones o similares). ¿por que? porque for/in en realidad itera por todas las propiedades visibles de la estructura. de modo que si estas trabajando con cada uno de los elementos donde todos tienen una interfaz, al encontrarse con la propiedad que no implementa la interfaz genera fallo. es lo que te esta sucediendo en el codigo. getElementsByTagName devuelve una coleccion de elementos (parecido a un array) donde todos los elementos son referencias a elementos HTMLElement y adicional tiene la propiedad length que es visible en un bucle for/in. como sabras, length no tiene la misma interfaz que HTMLElement. personalmente usaria un bucle for normal.

InKarC · #8 (**permalink**) 15/05/2011, 18:58

Eso probablemente es por que "for (a in select)" no es valido en este caso... en javascript cuando se trabajan con arrays/grupos de objetos lo mejor es hacer el for 'clasico'.. yo lo utilize en este ejemplo para reutilizar tu código pero fue un error :/

Código Javascript:

Ver originalfunction mostrardiv(name) {
    
   div = document.getElementById(name);
   div.style.display = 'block';
   inputs = div.getElementsByTagName('select');
   for (var i=0; i<inputs.length;i++){
      inputs[i].removeAttribute("disabled",0);
   }
      selectx = div.getElementsByTagName('input');
      for (var a=0; a<inputs.length;a++){
      selectx[a].removeAttribute("disabled",0);
   }
}

memoadian · #9 (**permalink**) 15/05/2011, 19:05

U.U pues estee s mi código y sigue pasando lo mismo. siento ser tan pesado.

Código Javascript:

Ver originalfunction mostrardiv(name) {
    div = document.getElementById(name);
    div.style.display = 'block';
    inputs = div.getElementsByTagName('input');
    for (var i=0;i<=inputs.length;i++){
        inputs[i].removeAttribute("disabled",0);
    }
    select = div.getElementsByTagName('select');
    for (var a=0;a<=select.length;a++){
        select[a].removeAttribute("disabled",0);
    }
}

Edito: segun lo que veo así tambien lo puso el buen InkarC.

zerokilled · #10 (**permalink**) 15/05/2011, 19:35

fijate en la condicion de los FORs, dice menor o igual. de modo que si tienes 4 elementos en la coleccion, partiendo desde 0 hasta el 4 tienes 5 posiciones lo cual no coincide con la lontigud de la coleccion. la condicion deberia ser menor que.

memoadian · #11 (**permalink**) 15/05/2011, 19:54

:S solo por eso ¬¬ muchas gracias zerokilled ha quedado perfect.

pero me sorprende que solo por eso no funcionara.

memoadian · #12 (**permalink**) 15/05/2011, 19:55

:S solo por eso ¬¬ muchas gracias zerokilled ha quedado perfect.

pero me sorprende que solo por eso no funcionara.

zerokilled · #13 (**permalink**) 15/05/2011, 20:24

Cita:

Iniciado por memoadian

pero me sorprende que solo por eso no funcionara.

claro, porque estas seleccionando un elemento en la coleccion que no existe. de modo que devuelve undefined. realmente ahi no es el error, sino cuando intentas invocar un metodo o propiedad de undefined el cual no existe.