Foros del Web » Programando para Internet » Javascript »

Arreglar Array en este JavaScript para mostrar/ocultar Input Text a partir de ChecBox

 Estas en el tema de Arreglar Array en este JavaScript para mostrar/ocultar Input Text a partir de ChecBox en el foro de Javascript en Foros del Web. Hola Mundo.... Necesito arreglar esta parte del Array en este pequeño JavaScript que todavía no me jala.... Ya merito..... Es un código que por medio ...
  #1 (permalink)  
Antiguo 18/02/2010, 20:04
 
Fecha de Ingreso: junio-2008
Mensajes: 101
Antigüedad: 16 años, 5 meses
Puntos: 0
Arreglar Array en este JavaScript para mostrar/ocultar Input Text a partir de ChecBox
Hola Mundo....

Necesito arreglar esta parte del Array en este pequeño JavaScript que todavía no me jala.... Ya merito.....

Es un código que por medio de PHP le digo que me muestre el numero de filas con su respectivo CheckBox y cuando el cliente palomea el checkbox se muestra otro campo Input Text Box...

El código es el siguiente:

En este paso del JavaScript es donde tengo el fallo... ya que no logro hacer el Array correctamente y estoy seguro que es en la parte de la variable del Array...


// document.getElementById(('box_'+box)').style.visib ility = (obj.checked) ? 'visible' : 'hidden';

Código Javascript: 
Ver original
  1. <script language="JavaScript">  
  2.  
  3. var box;  
  4.   box=new Array(12);
  5.   box[1]='1';
  6.   box[2]='2';
  7.   box[3]='3';
  8.   box[4]='4';
  9.   box[5]='5';
  10.   box[6]='6';
  11.   box[7]='7';
  12.   box[8]='8';
  13.   box[9]='9';
  14.   box[10]='10';
  15.   box[11]='11';
  16.   box[12]='12';
  17.  
  18. function mostrarOcultar_box(obj) {
  19. // éste es el paso donde tengo el fallo... ya que no logro hacer el Array correctamente
  20. //  document.getElementById(('box_'+box)').style.visibility = (obj.checked) ? 'visible' : 'hidden';
  21.  
  22. //  aquí dejo el ejemplo donde todo funciona pero solo en la primera fila que está identificado como Id="box_1"
  23.   document.getElementById('box_1').style.visibility = (obj.checked) ? 'visible' : 'hidden';
  24. }
  25. </script>

El código PHP lo que hace es desplegarme el numero de lineas a partir de una valiable que obtengo llamada $total_lines=13
Y también en base a esta variable = 13 me va nombrando el Id del Input Check Box que deberá aparecer una vez que habiliten el CheckBox que le antecede
Código PHP:
<?php
$total_lines=13;
echo "La cantidad de filas nos da un total de :".$total_lines."<br>";
//$inicio=1;$inicio<=$total_lines['cantidad'];$inicio++
//$inicio=1;
//$inicio<=$total_lines['cantidad'];
 //$inicio++;
//$consecutivo=1;$consecutivo<=$total_lines['cantidad'];$consecutivo++
$inicio=1;
    echo "<table border=1><tr>";
while($inicio<=$total_lines)
{
    echo "<tr><td><input type=\"checkbox\" onClick=\"mostrarOcultar_box(this)\">hola, cómo estás número: ".$inicio;
    echo "<input style=\"visibility:hidden;\"  id=\"box_".$inicio."\" type=\"text\"></td></tr>";
    $inicio++;
}
    echo"</tr></table>";
?>
Alguien me puede corregir la parte del JavaScript....
Estoy muy seguro que es a la hora de la definición de la variable del Array...

Saludos y mil gracias al Mundo.....
  #2 (permalink)  
Antiguo 18/02/2010, 20:20
Avatar de jackson666  
Fecha de Ingreso: noviembre-2009
Ubicación: Buenos Aires, Argentina
Mensajes: 1.971
Antigüedad: 15 años
Puntos: 65
Respuesta: Arreglar Array en este JavaScript para mostrar/ocultar Input Text a partir
En realidad lo que es la definicion en si esta bien, debes tener un problema de iteracion y de como estas escribiendo el codigo...

Te convendria poner un parametro de referencia en el checkbox, el cual te permita encontrar cual es tu input, asi mira:

Código PHP:
echo "<tr><td><input type=\"checkbox\" onClick=\"mostrarOcultar_box(this)\" name=\"$inicio\" />hola, cómo estás número: ".$inicio; 
Entonces en tu javascript:
Código Javascript: 
Ver original
  1. function mostrarOcultar_box(obj) {
  2.   document.getElementById(obj.name).style.visibility = (obj.checked) ? 'visible' : 'hidden';
  3. }

Ni siquiera necesitas el array!
__________________
HV Studio
Diseño y desarrollo web
  #3 (permalink)  
Antiguo 19/02/2010, 09:58
 
Fecha de Ingreso: junio-2008
Mensajes: 101
Antigüedad: 16 años, 5 meses
Puntos: 0
Respuesta: Arreglar Array en este JavaScript para mostrar/ocultar Input Text a partir
Jackson666

Estoy muy deacuerdo con que se le tiene que llamar de alguna manera a mis CheckBox...

Pero con respecto a la funcion de JavaScript ..... NO jala man....

Yo la copie tal cual como tú la estás sugiriendo y no muestra/oculta ningun Input Text Box.....

Alguna cosa que te este faltando por ahí.....?????

Saludos y mil gracias por tu ayuda....
  #4 (permalink)  
Antiguo 19/02/2010, 10:09
Avatar de jackson666  
Fecha de Ingreso: noviembre-2009
Ubicación: Buenos Aires, Argentina
Mensajes: 1.971
Antigüedad: 15 años
Puntos: 65
Respuesta: Arreglar Array en este JavaScript para mostrar/ocultar Input Text a partir
Y bueno, deberia ver todo el contexto en el q esta declarada esa funcion, pero deberia ser algo asi (fijate bien los detalles)

Código PHP:
<html>
<head>
</head>
<body>

<?php

# Consulta, bucle y demas

# Fijate que es onclic, no onClick
echo "<tr><td><input type=\"checkbox\" onclick=\"mostrarOcultar_box(this);\" name=\"$inicio\" />hola, cómo estás número: ".$inicio;

# cerras </td>y</tr> y demas

?>

<script type="text/javascript">

function mostrarOcultar_box(obj) {

    // Con este alert te fijas si esta entrando o no en la funcion
    // Si esta entrando, tenes un problema en el condicional!

    alert(obj.name);

  //document.getElementById(obj.name).style.visibility = (obj.checked) ? 'visible' : 'hidden';
}

</script>
</body>
</html>
__________________
HV Studio
Diseño y desarrollo web
  #5 (permalink)  
Antiguo 19/02/2010, 11:16
 
Fecha de Ingreso: junio-2008
Mensajes: 101
Antigüedad: 16 años, 5 meses
Puntos: 0
De acuerdo Respuesta: Arreglar Array en este JavaScript para mostrar/ocultar Input Text a partir
Jackson..... una vez +... gracias por tus respuestas...

En cuanto al ejemplo sencillo que me Muestra/Oculta un Input Text Box por medio de un CheckBox.... tengo lo siguiente:

Código HTML:
<hr>
AFORO LIMITADO: <input name="aforo" onclick="mostrarOcultar(this)" type="checkbox">
Nº DE PLAZAS:  <input style="visibility: hidden;" name="nplazas" id="nplazas" type="text">
<script language="JavaScript">  
function mostrarOcultar(obj) {
  document.getElementById('nplazas').style.visibility = (obj.checked) ? 'visible' : 'hidden';
}
</script>
En cuanto a mi ejemplo con código embebido PHP... tengo lo siguiente:

Código PHP:
<html>
<head><script language="JavaScript">  
  var box;  
  box=new Array(12);
  box[1]='1';
  box[2]='2';
  box[3]='3';
  box[4]='4';
  box[5]='5';
  box[6]='6';
  box[7]='7';
  box[8]='8';
  box[9]='9';
  box[10]='10';
  box[11]='11';
  box[12]='12';

function mostrarOcultar_box(obj) {
//  document.getElementById(('box_'+box)').style.visibility = (obj.checked) ? 'visible' : 'hidden';
  document.getElementById('box_1').style.visibility = (obj.checked) ? 'visible' : 'hidden';
}

</script>  
</head>
<body>

<?php
$total_lines=13;
echo "La cantidad de filas nos da un total de :".$total_lines."<br>";
$inicio=1;
    echo "<table border=1><tr>";
while($inicio<=$total_lines)
{
    echo "<tr><td><input type=\"checkbox\" onClick=\"mostrarOcultar_box(this)\" name=\"$inicio\" />hola, cómo estás número: ".$inicio;  
    echo "<input style=\"visibility:hidden;\"  id=\"box_".$inicio."\" type=\"text\"></td></tr>";
    $inicio++;
}
    echo"</tr></table>";
?>
</body>
</html>
Como podrás ver mi buen Jackson..... el código PHP solo hace multiplicar el numero de filas de una variable llamada $total_lines=13;con el mismo código sencillo de HTML arriba desplegado.

El único gran detalle es que mi código solo funciona para la Primera línea ya que la funcion de JavaScript solo especifica un objeto Input Text Box llamado box_1.

Entonces, lo que yo requiero es que esa misma función me haga lo mismo pero para los 13 box, es decir, tener
Código Javascript: 
Ver original
  1. document.getElementById('box_1').style.visibility = (obj.checked) ? 'visible' : 'hidden';

pero para todos mis campos... que son box_1,box_2,box_3,box_4,box_5,box_6,box_7,box_8,bo x_9,box_10,box_11,box_12,box_13.......

Aunque en mi código real de PHP la variable $total_lines= puede ir variando..... ya que yo agarro el numero total de filas que hay en una tabla tomada de una Base de Datos..... Entonces es por eso que ando buscando la manera de hacer dinamicamente la función mostrarOcultar_box(obj) ...

Jackson666.... espero que con estas palabras haya sido posible darme a entender.... jejejejeje...

Saludos mi TRES veces..... 6
  #6 (permalink)  
Antiguo 19/02/2010, 11:42
Avatar de jackson666  
Fecha de Ingreso: noviembre-2009
Ubicación: Buenos Aires, Argentina
Mensajes: 1.971
Antigüedad: 15 años
Puntos: 65
Respuesta: Arreglar Array en este JavaScript para mostrar/ocultar Input Text a partir
AAAAA creo haber entendido! Queres que al hacer click en ese, se seleccionen todos??

Ahora siii!! jaja. Seria asi:
Código Javascript: 
Ver original
  1. <script type="text/javascript">  
  2.   var box;  
  3.   box=new Array(12);
  4.   box[1]='1';
  5.   box[2]='2';
  6.   box[3]='3';
  7.   box[4]='4';
  8.   box[5]='5';
  9.   box[6]='6';
  10.   box[7]='7';
  11.   box[8]='8';
  12.   box[9]='9';
  13.   box[10]='10';
  14.   box[11]='11';
  15.   box[12]='12';
  16.  
  17. function mostrarOcultar_box(obj) {
  18. for(i in box){
  19.   document.getElementById('box_'+i).style.visibility = (obj.checked) ? 'visible' : 'hidden';
  20. }
  21. }
  22. </script>

Ojo con el type en el tag <script> !

Igual no necesitas un array para eso, si en vez de usarlo, hicieras asi:

Código Javascript: 
Ver original
  1. function mostrarOcultar_box(obj) {
  2. for(i = 1; i <= 13; i++){
  3.   document.getElementById('box_'+i).style.visibility = (obj.checked) ?  'visible' : 'hidden';
  4. }
  5. }
  6. </script>

Es lo mismo =)

Para hacerla dinamica, solo deberias imprimir esto:

Código PHP: 
Ver original
  1. for(i = 1; i <= <?php echo $total_lines; ?>; i++){
__________________
HV Studio
Diseño y desarrollo web
  #7 (permalink)  
Antiguo 19/02/2010, 12:31
 
Fecha de Ingreso: junio-2008
Mensajes: 101
Antigüedad: 16 años, 5 meses
Puntos: 0
Respuesta: Arreglar Array en este JavaScript para mostrar/ocultar Input Text a partir
Mi buen Jackson Tres veces 6.....

Te agradezco bastante tu ayuda...

Ya aplique el código..... solo cambiando la funcion JavaScript...

Todo mucho mejor pero con el pequeño detalle de que yo necesito que solo se muestre el Input Text Box de su respectivo Check Box que se habilite....

Todo esto lo hago porque tengo un formulario donde quiero aplicar una opción donde el usuario pueda modificar un registro dentro de una tabla HTML que se la despliego por medio de un codigo PHP-MyQSL....

Si quieres ver más a fondo lo que estoy haciendo ya que quiero darle seguimiento a esta liga....
Es la siguiente[URL="http://www.forosdelweb.com/f18/reemplazar-valor-default-mysql-php-777676/#post3283201"]http://www.forosdelweb.com/f18/como-modificar-registros-tabla-php-779374/#post3286185[/URL]

En resumen.... Solo necesito desplegar un solo Input Text Box por cada CheckBox que se habilite....

Saludos y espero que podamos alimentar la liga de como modificar registros en una tabla php....

Una vez +, gracias por tu ayuda...
  #8 (permalink)  
Antiguo 19/02/2010, 12:43
Avatar de jackson666  
Fecha de Ingreso: noviembre-2009
Ubicación: Buenos Aires, Argentina
Mensajes: 1.971
Antigüedad: 15 años
Puntos: 65
Respuesta: Arreglar Array en este JavaScript para mostrar/ocultar Input Text a partir
Eh me parece que no nos entendemos, te pido en un principio que trates de implementar algo por tu cuenta antes de postear algo de la forma "no me funciona necesito otra cosa" o cosas por el estilo... Yo estoy para ayudarte, no para hacerte las cosas, yo te tiro la idea y vos trata de acomodarla a tus necesidades, nuevamente, te dejo LA IDEA, que ademas esta funcionando:

Código HTML:
<!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" xml:lang="en" lang="en">
<head>
	<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
	<meta name="author" content="Jackson666" />
	<title>Untitled 1</title>
</head>
<body>
<script type="text/javascript">
function $(id){
    return document.getElementById(id);
}

function muestra(obj){
    $(obj.name).style.visibility = (obj.checked) ? 'visible' : 'hidden';
}
</script>

<table>
<tr>
    <td><input type="text" id="box1" style="visibility: hidden;" /></td>
    <td><input type="checkbox" name="box1" onclick="muestra(this)" /></td>
</tr>
<tr>
    <td><input type="text" id="box2" style="visibility: hidden;" /></td>
    <td><input type="checkbox" name="box2" onclick="muestra(this)" /></td>
</tr>
<tr>
    <td><input type="text" id="box3" style="visibility: hidden;" /></td>
    <td><input type="checkbox" name="box3" onclick="muestra(this)" /></td>
</tr>
<tr>
    <td><input type="text" id="box4" style="visibility: hidden;" /></td>
    <td><input type="checkbox" name="box4" onclick="muestra(this)" /></td>
</tr>
</table>


</body>
</html>
__________________
HV Studio
Diseño y desarrollo web
  #9 (permalink)  
Antiguo 19/02/2010, 13:18
 
Fecha de Ingreso: junio-2008
Mensajes: 101
Antigüedad: 16 años, 5 meses
Puntos: 0
Respuesta: Arreglar Array en este JavaScript para mostrar/ocultar Input Text a partir
Jackson666...

Mil gracias por haberme aclarado la duda.....

En cuanto a los comentarios que has desplegado, YO espero no haberte ofendido en ningún aspecto.... ya que esa no es mi intención....

Yo lo que estoy exponiendo aquí con las ligas anteriores es que en base a lo que me has ayudado a resolver... yo seguiré con el proyecto que tengo trabajando y a la vez estoy exponiendo en la liga de como modificar registros en una tabla php.... y que esta liga también sirva de referencia a otras personas.... Pero sí trataré de ser lo más explícito posible para que sea entendible para todos....

De antemano agradezco Mil Veces tu Gran Ayuda....

Saludos....
  #10 (permalink)  
Antiguo 25/02/2010, 13:30
 
Fecha de Ingreso: junio-2008
Mensajes: 101
Antigüedad: 16 años, 5 meses
Puntos: 0
Respuesta: Arreglar Array en este JavaScript para mostrar/ocultar Input Text a partir
Este Script no funciona con IE pero sí con Moxilla...... qué raro....
Alguna sugerencia.....?????

Código que me despliega el valor (registro) una vez seleccionado un CHECK BOX despliega un campo Input Text Box con todo y un registro que posteriormente será para Modificar....

Código PHP:
$result = mysql_query("select nomb_gpo,nomb_ind,ano,mes,valor from clau where nomb_pla='Planta Boleno' and nomb_cen='Cangrejos'  and mes='Ene' and ano='2005';");
$valor = mysql_query("select valor from clau where nomb_pla='nomb_pla='Planta Boleno' and nomb_cen='Cangrejos'   and mes='Ene' and ano='2005';");
$space_5 = "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;";

if (!$result) {
    die("Query to show fields from table failed");
}

echo "<table id=\"demo4_table\" cellpadding=\"3\" cellspacing=\"1\" border=\"2\"  align=left ><tr>";  //width=\"653\"
echo "</tr>\n";
echo "<tr>";
echo "<td  align=\"center\"><b>".$space_5.$space_5."Familia".$space_5."Indicadores".$space_5."</b></td>";
echo "     <td  align=\"center\" ><b>".$space_5.$space_5.$space_5.$space_5."Indicadores".$space_5.$space_5.$space_5.$space_5."</b></td>";
echo "     <td  align=\"center\"><b>A&ntilde;o</b></td>";
echo "     <td  align=\"center\"><b>Mes</b></td>";
echo "     <td  align=\"center\"><b>".$space_5."Valor".$space_5."</b></td>";
echo "     <td  align=\"center\"><b>Modificar_1</b></td><td  align=\"center\"><b>Modificar_2</b></td>";
echo "</tr>";
while ($row = mysql_fetch_array($result))
{
echo "<TR>";
        echo "<TD>".$row['nomb_gpo']."</TD><TD>".$row['nomb_ind']."</TD>";
        echo "<TD>".$row['ano']."</TD><TD>".$row['mes']."</TD>";
        echo "<TD>".str_replace(-0.001,"Sin valor",$row['valor'])."</TD>";
        echo "<TD><a href=\"table_DET_Mod.php?nomb_ind=".$row['nomb_ind']."\">Modificar</a></TD>";  // Modificar_1
        echo "<td><input type=\"text\" id=\"box-".$inicio."\" style=\"visibility: hidden;\" value=\"";     //Modificar_2  ?>
        <?php  str_replace(-0.001,"Sin Valor",$row['valor']);  ?>    
        <?php //  echo $row['valor']  ?>    
<?php
        echo "\"/><input type=\"checkbox\" name=\"box-".$inicio."\" onclick=\"muestra(this)\" /></td>";
echo "</TR>";
    $inicio++;
    echo "</tr>\n";
}
echo "</TABLE>";
Última edición por benjaminvera; 25/02/2010 a las 13:51
  #11 (permalink)  
Antiguo 02/03/2010, 13:01
 
Fecha de Ingreso: junio-2008
Mensajes: 101
Antigüedad: 16 años, 5 meses
Puntos: 0
Respuesta: Arreglar Array en este JavaScript para mostrar/ocultar Input Text a partir
Ya tengo esta parte corregida....

Favor de seguir con la siguiente liga:

http://www.forosdelweb.com/f18/como-...1/#post3303702

Saludos y espero que les pueda ser de ayuda así como me ha sido de gran ayuda esta herramienta de "Foros del Web"....

Etiquetas: arreglar, input, partir, txt
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 19:42.