Foros del Web » Programando para Internet » Javascript »

Problemas con unos inputs

 Estas en el tema de Problemas con unos inputs en el foro de Javascript en Foros del Web. Que tal compañeros, no estoy seguro de si este tema deba estar en este foro de php, pero mi problema radica en un formulario que ...
  #1 (permalink)  
Antiguo 02/07/2012, 16:28
Avatar de poncharelo_69  
Fecha de Ingreso: octubre-2011
Ubicación: Queretaro
Mensajes: 86
Antigüedad: 12 años, 6 meses
Puntos: 10
Pregunta Problemas con unos inputs
Que tal compañeros, no estoy seguro de si este tema deba estar en este foro de php, pero mi problema radica en un formulario que tengo de html en una pagina de php en el cual todo funciona muy bien en internet explorer, extrañamente en firefox, safari y chrome hace esta falla.

El primer input en el que se escribe el nombre de la persona funciona muy bien, pero cuando das click en el siguiente input se regresa al primero, y si das en cualquier otro input se siguen subiendo y no me deja escribir en los demás.

Dejo el código del formulario al igual que la url de la pagina para que puedan ver la falla.

Este es el código de mi formulario

Código PHP:
<body>
                 <div id="texto">       
<div style=" margin-left:100px; margin-top:20px; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:18px; width: 218px;">Información Requerida</div>
<br/>
<div id="resultados">
<form id="trabajo" name="trabajo" method="post" action="curriculum2.php">
  <label>
  <table width="557" border="0" align="center" cellpadding="0" cellspacing="5" class="tablita">
      <tr>
        <td width="204" align="left">Nombre</td>
        <td width="338" align="left"><input type="text" name="nombre" id="nombre" /></td>
      </tr>
      <tr>
        <td align="left">Fecha de Nacimientodia</td>
        <td align="left"><label>dia
            <select name="dia" id="dia">
              <option value="01">1</option>
              <option value="02">2</option>
              <option value="03">3</option>
              <option value="04">4</option>
              <option value="05">5</option>
              <option value="06">6</option>
              <option value="07">7</option>
              <option value="08"> 8</option>
              <option value="09">9</option>
              <option value="10">10</option>
              <option value="11">11</option>
              <option value="12">12</option>
              <option value="13">13</option>
              <option value="14">14</option>
              <option value="15">15</option>
              <option value="16">16</option>
              <option value="17">17</option>
              <option value="18">18</option>
              <option value="19">19</option>
              <option value="20">20</option>
              <option value="21">21</option>
              <option value="22">22</option>
              <option value="23">23</option>
              <option value="24">24</option>
              <option value="25">25</option>
              <option value="26">26</option>
              <option value="27">27</option>
              <option value="28">28</option>
              <option value="29">29</option>
              <option value="30">30</option>
              <option value="31">31</option>
            </select>
        </label>
          <label>mes
          <select name="mes" id="mes">
            <option value="1">Enero</option>
            <option value="2">Febrero</option>
            <option value="3">Marzo</option>
            <option value="4">Abril</option>
            <option value="5">Mayo</option>
            <option value="6">Junio</option>
            <option value="7">Julio</option>
            <option value="8">Agosto</option>
            <option value="9">Septiembre</option>
            <option value="10">Octubre</option>
            <option value="11">Noviembre</option>
            <option value="12">Diciembre</option>
          </select>
          </label>
          <label>año
          <select name="ano" id="ano">
            <option value="1990">1990</option>
            <option value="1991">1991</option>
            <option value="1992">1992</option>
            <option value="1993">1993</option>
            <option value="1994">1994</option>
            <option value="1995">1995</option>
            <option value="1996">1996</option>
            <option value="1997">1997</option>
            <option value="1998">1998</option>
            <option value="1999">1999</option>
            <option value="2000">2000</option>
          </select>
          </label></td>
      </tr>
    </table>
    
   <br />
    <p align="center">    Direccion:</p>
    <table width="549" border="0" align="center" cellpadding="0" cellspacing="7" class="tablita">
      <tr>
        <td width="237" align="left"><label></label>
            <table width="252" border="0" cellspacing="0" cellpadding="0" class="tablita">
              <tr>
                <td width="65">Calle</td>
                <td width="187"><input type="text" name="calle" id="calle" /></td>
              </tr>
            </table>
          *
        </td>
        <td width="272" align="left"><table width="275" border="0" cellspacing="0" cellpadding="0">
            <tr>
              <td width="100"><label>No. </label></td>
              <td width="175"><input type="text" name="no" id="no" /></td>
            </tr>
        </table></td>
      </tr>
      <tr>
        <td align="left"><table width="251" border="0" cellspacing="0" cellpadding="0">
            <tr>
              <td width="64">Colonia </td>
              <td width="187"><input type="text" name="colonia" id="colonia" /></td>
            </tr>
        </table></td>
        <td align="left"><table width="278" border="0" cellspacing="0" cellpadding="0">
            <tr>
              <td width="100"><label>Codigo Postal </label></td>
              <td width="178"><input type="text" name="cp" id="cp" /></td>
            </tr>
        </table></td>
      </tr>
      <tr>
        <td align="left"><table width="249" border="0" cellspacing="0" cellpadding="0">
            <tr>
              <td width="65">Ciudad
                <label></label></td>
              <td width="184"><input type="text" name="ciudad" id="ciudad" /></td>
            </tr>
        </table></td>
        <td align="left"><table width="279" border="0" cellspacing="0" cellpadding="0">
            <tr>
              <td width="100"><label>Municipio </label></td>
              <td width="179"><input type="text" name="municipio" id="municipio" /></td>
            </tr>
        </table></td>
      </tr>
      <tr>
        <td align="left"><label></label>
            <table width="249" border="0" cellspacing="0" cellpadding="0" class="tablita">
              <tr>
                <td width="65">Estado</td>
                <td width="184"><input type="text" name="estado" id="estado" /></td>
              </tr>
          </table></td>
        <td align="left"><table width="279" border="0" cellspacing="0" cellpadding="0">
            <tr>
              <td width="101">Pais
                <label></label></td>
              <td width="178"><input type="text" name="pais" id="pais" /></td>
            </tr>
        </table></td>
      </tr>
    </table>
    <br />
  <table width="557" border="0" align="center" cellpadding="0" cellspacing="7" class="tablita">
    <tr>
      <td width="253" align="left">Sexo</td>
      <td width="283" align="left"><select name="sexo" id="sexo">
        <option value="Masculino">Masculino</option>
        <option value="Femenino">Femenino</option>
      </select></td>
    </tr>
    <tr>
      <td align="left">Edad</td>
      <td align="left"><input type="text" name="edad" id="edad" /></td>
    </tr>
    <tr>
      <td align="left"><label>Correo Electronico </label></td>
      <td align="left"><input type="text" name="email" id="email" /></td>
    </tr>
    <tr>
      <td align="left">Tel&eacute;fono</td>
      <td align="left"><input type="text" name="telefono" id="telefono" /></td>
    </tr>
  </table>

  <p><input type="hidden" name="puesto" value="<?php echo $_GET['puesto'];?>"  />
  <div align="center">
    <label>
     <img src="../images/siguiente.png"  onclick="checkFields();"/>
    </label>
    
  </div>
  </p>
  <p>&nbsp;</p>
</form>
</div>
</div>
</body>
y esta es la pagina, pueden probarla en IE9 y funciona bien pero en otros exploradores no.

http://ipsco.com.mx/bolsa/trabajo2.php?puesto=Ingeniero%20de%20Proyectos&id= 51
  #2 (permalink)  
Antiguo 02/07/2012, 16:48
Colaborador
  
Fecha de Ingreso: mayo-2008
Ubicación: $MX['VZ']['Xalapa']
Mensajes: 3.005
Antigüedad: 15 años, 11 meses
Puntos: 528
Respuesta: Problemas con unos inputs
Tu problema es de javascript, no de php, php no regresa el foco a un input dado.

Además tendrías que indicar el código que tienes para checkFields()
  #3 (permalink)  
Antiguo 02/07/2012, 17:09
Avatar de poncharelo_69  
Fecha de Ingreso: octubre-2011
Ubicación: Queretaro
Mensajes: 86
Antigüedad: 12 años, 6 meses
Puntos: 10
Respuesta: Problemas con unos inputs
Muy bien, muchas gracias por tu respuesta, ya que eso indica que es otro cosa movere este tema a javascript ya que en efecto el checkFields es javascript (aunque no hace focus) pero bueno vere en el otro foro si me pueden ayudar.

Gracias nuevamente
  #4 (permalink)  
Antiguo 02/07/2012, 17:15
 
Fecha de Ingreso: agosto-2008
Ubicación: Miami, FL
Mensajes: 210
Antigüedad: 15 años, 8 meses
Puntos: 2
Respuesta: Problemas con unos inputs
No se mucho del tema, pero creo que la etiqueta Label esta mal cerrada, deberia ser <label>dia</label>

fijate que el fallo se produce despues del option de los la fecha,
__________________
Se invierte mas dinero en cirugía de pechos y viagra que en la cura del Alzheimer. En unos años tendremos viejas con grandes tetas y viejos con erecciones pero que no recordarán para que sirven..
  #5 (permalink)  
Antiguo 02/07/2012, 17:45
Avatar de poncharelo_69  
Fecha de Ingreso: octubre-2011
Ubicación: Queretaro
Mensajes: 86
Antigüedad: 12 años, 6 meses
Puntos: 10
Respuesta: Problemas con unos inputs
Gracias por sus respuestas, he revisado el codigo y la etiqueta de <label> empieza en un inicio de los <select>, pero al finalizar el </select> termina la etiqueta de </label>.

El código javascript no hace ningún focus, ya que únicamente verifica si es que los inputs fueron rellenados y si no manda una alerta pero no hace un focus sobre los campos.

Lo que se me hace más raro de todo esto es que la página funciona tranquilamente en IE9, pero en safari, mozilla y chrome me esta dando mucha batalla.

Alguien tiene alguna opcion o forma de arreglarlo.
  #6 (permalink)  
Antiguo 02/07/2012, 18:19
Colaborador
  
Fecha de Ingreso: mayo-2008
Ubicación: $MX['VZ']['Xalapa']
Mensajes: 3.005
Antigüedad: 15 años, 11 meses
Puntos: 528
Respuesta: Problemas con unos inputs
Bueno, no quería leer tu código por que no lo formateas, pero volviendo a verlo, veo que metes muchos elementos dentro de una etiqueta. Las etiquetas son para colocar un texto referente aun campo, no para meter contenido.

ejemplo:

<label for="nombre">Nombre</label><input id="nombre">

<label for="apellido">Apellido</label><input id="apellido">
  #7 (permalink)  
Antiguo 02/07/2012, 21:34
Usuario no validado
  
Fecha de Ingreso: junio-2011
Ubicación: Colombia
Mensajes: 15
Antigüedad: 12 años, 10 meses
Puntos: 0
Respuesta: Problemas con unos inputs
Creo que el dato que te dio ocp001a es el problema....Ahhh y por favor tablas no es para hacer formularios tomate un tiempito para css3 y html5 no es dificil con la noción del tema que manejas---
  #8 (permalink)  
Antiguo 02/07/2012, 21:46
Avatar de poncharelo_69  
Fecha de Ingreso: octubre-2011
Ubicación: Queretaro
Mensajes: 86
Antigüedad: 12 años, 6 meses
Puntos: 10
Respuesta: Problemas con unos inputs
Debo pedir una disculpa, ese codigo fue realizado por otra persona que salio de la empresa, estoy completamente de acuerdo con ustedes, no acostumbro a usar tablas pero aun así en la empresa estan muy acostumbrados, pero bueno...

Voy a seguir sus consejos y a modificar esa parte del codigo y ya les contare como me fue
  #9 (permalink)  
Antiguo 03/07/2012, 08:44
Avatar de poncharelo_69  
Fecha de Ingreso: octubre-2011
Ubicación: Queretaro
Mensajes: 86
Antigüedad: 12 años, 6 meses
Puntos: 10
Respuesta: Problemas con unos inputs
Gracias compañeros, ya quedo listo mi formulario y les comento cual fue el error.

El label que abarcaba desde el texto hasta donde terminaba el </select> no afectaba en lo más minimo, por lo que me disponia a realizar los cambios para dejarlo todo completamente con html5 y css cuando me di cuenta de que en el inicio de la tabla existia un <label> que es el que me esta dando problemas, dejo el codigo para ser más claro.

Código PHP:
<body> 
                 <div id="texto">        
<div style=" margin-left:100px; margin-top:20px; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:18px; width: 218px;">Información Requerida</div> 
<br/> 
<div id="resultados"> 
<form id="trabajo" name="trabajo" method="post" action="curriculum2.php"> 

/******************
Este label es el que me estaba dando problemas.
  <label> 
******************/

  <table width="557" border="0" align="center" cellpadding="0" cellspacing="5" class="tablita"> 
      <tr> 
        <td width="204" align="left">Nombre</td> 
        <td width="338" align="left"><input type="text" name="nombre" id="nombre" /></td> 
      </tr> 
      <tr> 
        <td align="left">Fecha de Nacimientodia</td> 
        <td align="left"><label>dia 
            <select name="dia" id="dia"> 
              <option value="01">1</option> 
              <option value="02">2</option> 
              <option value="03">3</option> 
              <option value="04">4</option> 
              <option value="05">5</option> 
              <option value="06">6</option> 
              <option value="07">7</option> 
              <option value="08"> 8</option> 
              <option value="09">9</option> 
              <option value="10">10</option> 
              <option value="11">11</option> 
              <option value="12">12</option> 
              <option value="13">13</option> 
              <option value="14">14</option> 
              <option value="15">15</option> 
              <option value="16">16</option> 
              <option value="17">17</option> 
              <option value="18">18</option> 
              <option value="19">19</option> 
              <option value="20">20</option> 
              <option value="21">21</option> 
              <option value="22">22</option> 
              <option value="23">23</option> 
              <option value="24">24</option> 
              <option value="25">25</option> 
              <option value="26">26</option> 
              <option value="27">27</option> 
              <option value="28">28</option> 
              <option value="29">29</option> 
              <option value="30">30</option> 
              <option value="31">31</option> 
            </select> 
        </label> 
          <label>mes 
          <select name="mes" id="mes"> 
            <option value="1">Enero</option> 
            <option value="2">Febrero</option> 
            <option value="3">Marzo</option> 
            <option value="4">Abril</option> 
            <option value="5">Mayo</option> 
            <option value="6">Junio</option> 
            <option value="7">Julio</option> 
            <option value="8">Agosto</option> 
            <option value="9">Septiembre</option> 
            <option value="10">Octubre</option> 
            <option value="11">Noviembre</option> 
            <option value="12">Diciembre</option> 
          </select> 
          </label> 
          <label>año 
          <select name="ano" id="ano"> 
            <option value="1990">1990</option> 
            <option value="1991">1991</option> 
            <option value="1992">1992</option> 
            <option value="1993">1993</option> 
            <option value="1994">1994</option> 
            <option value="1995">1995</option> 
            <option value="1996">1996</option> 
            <option value="1997">1997</option> 
            <option value="1998">1998</option> 
            <option value="1999">1999</option> 
            <option value="2000">2000</option> 
          </select> 
          </label></td> 
      </tr> 
    </table> 
     
   <br /> 
    <p align="center">    Direccion:</p> 
    <table width="549" border="0" align="center" cellpadding="0" cellspacing="7" class="tablita"> 
      <tr> 
        <td width="237" align="left"><label></label> 
            <table width="252" border="0" cellspacing="0" cellpadding="0" class="tablita"> 
              <tr> 
                <td width="65">Calle</td> 
                <td width="187"><input type="text" name="calle" id="calle" /></td> 
              </tr> 
            </table> 
          * 
        </td> 
        <td width="272" align="left"><table width="275" border="0" cellspacing="0" cellpadding="0"> 
            <tr> 
              <td width="100"><label>No. </label></td> 
              <td width="175"><input type="text" name="no" id="no" /></td> 
            </tr> 
        </table></td> 
      </tr> 
      <tr> 
        <td align="left"><table width="251" border="0" cellspacing="0" cellpadding="0"> 
            <tr> 
              <td width="64">Colonia </td> 
              <td width="187"><input type="text" name="colonia" id="colonia" /></td> 
            </tr> 
        </table></td> 
        <td align="left"><table width="278" border="0" cellspacing="0" cellpadding="0"> 
            <tr> 
              <td width="100"><label>Codigo Postal </label></td> 
              <td width="178"><input type="text" name="cp" id="cp" /></td> 
            </tr> 
        </table></td> 
      </tr> 
      <tr> 
        <td align="left"><table width="249" border="0" cellspacing="0" cellpadding="0"> 
            <tr> 
              <td width="65">Ciudad 
                <label></label></td> 
              <td width="184"><input type="text" name="ciudad" id="ciudad" /></td> 
            </tr> 
        </table></td> 
        <td align="left"><table width="279" border="0" cellspacing="0" cellpadding="0"> 
            <tr> 
              <td width="100"><label>Municipio </label></td> 
              <td width="179"><input type="text" name="municipio" id="municipio" /></td> 
            </tr> 
        </table></td> 
      </tr> 
      <tr> 
        <td align="left"><label></label> 
            <table width="249" border="0" cellspacing="0" cellpadding="0" class="tablita"> 
              <tr> 
                <td width="65">Estado</td> 
                <td width="184"><input type="text" name="estado" id="estado" /></td> 
              </tr> 
          </table></td> 
        <td align="left"><table width="279" border="0" cellspacing="0" cellpadding="0"> 
            <tr> 
              <td width="101">Pais 
                <label></label></td> 
              <td width="178"><input type="text" name="pais" id="pais" /></td> 
            </tr> 
        </table></td> 
      </tr> 
    </table> 
    <br /> 
  <table width="557" border="0" align="center" cellpadding="0" cellspacing="7" class="tablita"> 
    <tr> 
      <td width="253" align="left">Sexo</td> 
      <td width="283" align="left"><select name="sexo" id="sexo"> 
        <option value="Masculino">Masculino</option> 
        <option value="Femenino">Femenino</option> 
      </select></td> 
    </tr> 
    <tr> 
      <td align="left">Edad</td> 
      <td align="left"><input type="text" name="edad" id="edad" /></td> 
    </tr> 
    <tr> 
      <td align="left"><label>Correo Electronico </label></td> 
      <td align="left"><input type="text" name="email" id="email" /></td> 
    </tr> 
    <tr> 
      <td align="left">Tel&eacute;fono</td> 
      <td align="left"><input type="text" name="telefono" id="telefono" /></td> 
    </tr> 
  </table> 

  <p><input type="hidden" name="puesto" value="<?php echo $_GET['puesto'];?>"  /> 
  <div align="center"> 
    <label> 
     <img src="../images/siguiente.png"  onclick="checkFields();"/> 
    </label> 
     
  </div> 
  </p> 
  <p>&nbsp;</p> 
</form> 
</div> 
</div> 
</body>

Etiquetas: formulario, html, inputs
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 22:44.