chrome no me respeta javascript

lord_clown · #1 (**permalink**) 11/05/2011, 09:51

Hola, tengo un codigo que estoy manejando en un formulario con el cual dependiendo la opción que seleccionen de un select me aparecen mas campos, el codigo que manejo es este:

Para el header el javascript es:

Código:

<script language="javascript">
		function toggle_tipo1(elemento) {
		if(elemento.value==1) {
   		document.getElementById("span_tipo1").style.display = "inline";
		} else {
   		document.getElementById("span_tipo1").style.display = "none";
		}
		}
</script>

unicamente lo declaro en el select y funciona perfectamente tanto para firefox como para explorer, que puedo hacer para que tambien funcione en chrome?

Espero me puedan ayudar.

Saludos.

Tecna · #2 (**permalink**) 11/05/2011, 11:56

Buenas,

en lugar de usar el atributo language que es obsoleto usa el atributo type="text/javascript"

lord_clown · #3 (**permalink**) 11/05/2011, 16:09

Hola!

Gracias por el consejo pero sigue igual . . .

Saludos

caricatos · #4 (**permalink**) 11/05/2011, 16:26

Hola:

Habría que ver el código... y por lo pronto, los valúes son textos y los números no son texto... (aunque seguro que ese no es el problema).

Saludos

lord_clown · #5 (**permalink**) 12/05/2011, 16:44

Efectivamente ese no es el problema ya que el value que le estoy otorgando al select es 1 y 2 respectivamente pero a ver les pongo la parte del formulario:

Primero el Javascript completo:

Código:

<script type="text/javascript">
		function toggle_tipo1(elemento) {
		if(elemento.value==1) {
   		document.getElementById("span_tipo1").style.display = "inline";
		} else {
   		document.getElementById("span_tipo1").style.display = "none";
		}
		}
		
		function toggle_tipo0(elemento) {
		if(elemento.value==2) {
   		document.getElementById("span_tipo0").style.display = "inline";
		} else {
   		document.getElementById("span_tipo0").style.display = "none";
		}
		}
		</script>
	</script>

Y del Formulario:

Código:

<form action="algo.php" method="POST">
                <table>
                <tr>
                	<th>Tipo de Captura</th>
                    <td><select name="tipo" id="tipo" class="required" onchange="toggle_tipo1(this);toggle_tipo0(this);">
                    	<option value="">- - - - -Seleccione- - - - -</option>
                        <option value="1">CARGO</option>
                        <option value="2">ABONO</option>                        
                    </select></td>
                </tr>
                <span  id="span_tipo1" style="display:none">
                <tr>
            		<th id="vis_table">Concepto de Cargo:</th>
                	<td><select name="concepto_a" id="concepto_a">
                    <option value="">- - - - -Seleccione- - - - -</option>
                        <option value="opcion1">opcion1</option>
                        <option value="opcion2">opcion2</option> 
                </select></td>
                </tr>
                </span>
                <span  id="span_tipo0" style="display:none">
                <tr>
            		<th id="vis_table">Concepto de Abono:</th>
                	<td><select name="concepto_a" id="concepto_a">
                    <option value="">- - - - -Seleccione- - - - -</option>
                        <option value="opcion1">opcion1</option>
                        <option value="opcion2">opcion2</option> 
                </select></td>
                </tr>
                <tr>
            		<th id="vis_table">Cuenta Destino:</th>
                	<td><select name="banco" id="banco" class="required">
            			<option value="">- - - - -Seleccione- - - - -</option>
                        <option value="opcion1">opcion1</option>
                        <option value="opcion2">opcion2</option> 
                </select></td>
                </tr>
                </span>
                <tr>
            		<th id="vis_table">Descripcion:</th>
                	<td><input type="text" class="required" name="descripcion" id="descripcion" size="25" onkeyup="this.value=this.value.toUpperCase()" /></td>
                </tr>
                <tr>
            		<th id="vis_table">Monto:</th>
                	<td><input type="text" class="required" name="monto" id="monto" onkeyup="this.value=this.value.toUpperCase()" size="25" /></td>
                </tr>
                <tr>
            		<th id="vis_table">Moneda:</th>
                	<td><select name="moneda" id="moneda">
                    	<option value=" ">- - - - Seleccione - - - -</option>
                        <option value="MXN">MONEDA NACIONAL</option>
                        <option value="USD">DOLAR</option>
                    </select></td>
                </tr>
                <tr>
            		<th id="vis_table">Tipo de Cambio:</th>
                	<td><input type="text" class="required" name="tip_camb" id="tip_camb" size="25" /></td>
                </tr>
                <tr>
                	<td><input type="reset" value="Restablecer" name="borra"/></td>
                	<td align="center"><input type="submit" value="Guardar"></td>
                </tr>
         </table>
            </form>

Y eso seria todo y todo esto funciona perfectamente en explorer y firefox, la verdad no lo he probado en safari, pero me piden que se vea en explorer, firefox y chrome . . .

Saludos

lord_clown · #6 (**permalink**) 17/05/2011, 14:37

Agrego una nota:

Tampoco funciona para Safari . . .

Creo que tendré que buscar algo similar . . .

alexg88 · #7 (**permalink**) 17/05/2011, 15:04

Y el problema no será que mezclas churras con merinas. Me refiero a que pones span donde no debes y tr mal puestos.

Puede ser que Chrome y Safari no pueda con una sintaxis HTML tan horrible y por eso no funciona lo que quieres.

refreegrata · #8 (**permalink**) 17/05/2011, 15:13

No creo que funcione ya que estás intentando agrupar las filas de la tabla con un span para luego ocultar o mostrar el span y las filas interiores. El span no te servirá para agrupar las filas de una tabla. Lo que podrías hacer es colocar un id directamente sobre las filas quieres mostrar u ocultar y trabajar con estos en la función.

Saludos.

InKarC · #9 (**permalink**) 17/05/2011, 22:51

Cita:

Iniciado por alexg88

Y el problema no será que mezclas churras con merinas. Me refiero a que pones span donde no debes y tr mal puestos.

Puede ser que Chrome y Safari no pueda con una sintaxis HTML tan horrible y por eso no funciona lo que quieres.

Correcto, eso no valida en absoluto y el hecho de que otros exploradores lo acepten es solo un milagro u otra mas de las aberraciones de internet explorer.

Lo mejor es colocar el ID a las filas (<tr>)

dukeblass · #10 (**permalink**) 18/05/2011, 07:29

Cita:

Iniciado por refreegrata

No creo que funcione ya que estás intentando agrupar las filas de la tabla con un span para luego ocultar o mostrar el span y las filas interiores. El span no te servirá para agrupar las filas de una tabla. Lo que podrías hacer es colocar un id directamente sobre las filas quieres mostrar u ocultar y trabajar con estos en la función.

Saludos.

Exactamente tu problema no es el script es la falta de orden en las equitas

el span solo almacena texto y solo.. nada mas no le meta un tr o un div o un p

resolviendo eso te queda así

Código HTML:

Ver original<form action="algo.php" method="POST">
                <p>Tipo de Captura</p>
                <div>
                    <select name="tipo" id="tipo" class="required" onchange="toggle_tipo1(this);toggle_tipo0(this);">
                        <option value="">- - - - -Seleccione- - - - -</option>
                        <option value="1">CARGO</option>
                        <option value="2">ABONO</option>                        
                    </select>
                </div>
                <div  id="span_tipo1" style="display:none">
                    <div>
                        <p>Concepto de Cargo:</p>
                        <select name="concepto_a" id="concepto_a">
                            <option value="">- - - - -Seleccione- - - - -</option>
                            <option value="opcion1">opcion1</option>
                            <option value="opcion2">opcion2</option> 
                        </select>
                     </div>
                </div>
                <div  id="span_tipo0" style="display:none">
                    <div>
                        <p>Concepto de Abono:</p>
                        <select name="concepto_a" id="concepto_a">
                            <option value="">- - - - -Seleccione- - - - -</option>
                            <option value="opcion1">opcion1</option>
                            <option value="opcion2">opcion2</option> 
                        </select>
                    </div>
                    <div>
                        <p>Cuenta Destino:</p>
                        <select name="banco" id="banco" class="required">
                            <option value="">- - - - -Seleccione- - - - -</option>
                            <option value="opcion1">opcion1</option>
                            <option value="opcion2">opcion2</option> 
                        </select>   
                    </div>
                </div>
            </form>

Código Javascript:

Ver originalfunction toggle_tipo1(elemento) {
                if(elemento.value==1) {
                document.getElementById("span_tipo1").style.display = "inline";
                    } else {
                document.getElementById("span_tipo1").style.display = "none";
                }
        }
        
        function toggle_tipo0(elemento) {
            if(elemento.value==2) {
                document.getElementById("span_tipo0").style.display = "inline";
            } else {
                document.getElementById("span_tipo0").style.display = "none";
            }
        }

esto funciona para Gecko, trident y webKit -> (FF,IE,Sfari,Chrome)

Le agregas lo que desees o cambias a tablas, pero RESPETA EL ORDEN Y LAS ETIQUETAS EN HTML DENTRO DEL DOM

lord_clown · #11 (**permalink**) 19/05/2011, 14:32

Despues de que me agarraron a cachetadas, me regañaron y me dieron la explicación, ya lo probé y quedó perfecto.

La verdad es que no soy experto en esto del javascript pero con lo que me dicen me ayudaron bastante para entender algunas cosas.

Gracias por la ayuda.

Saludos