Foros del Web » Programando para Internet » Javascript »

Texto y Input

 Estas en el tema de Texto y Input en el foro de Javascript en Foros del Web. Buenas a todos como, que Dios les bendiga. Bueno mi duda es la siguiente, quiero cambiar un texto por un input, al hacer clic sobre ...
  #1 (permalink)  
Antiguo 11/05/2010, 23:23
 
Fecha de Ingreso: febrero-2009
Mensajes: 188
Antigüedad: 15 años, 9 meses
Puntos: 1
Información Texto y Input
Buenas a todos como, que Dios les bendiga.
Bueno mi duda es la siguiente, quiero cambiar un texto por un input, al hacer clic sobre el texto. y que también se me activen dos botones uno para restablecer y el otro para enviar.

Me explico mejor:

Ej; hola que cuando haga clic sobre se trasforme en un input y se activen o aparezcan dos botones un submi y un resed

Muchas Gracias Por Su Ayuda
  #2 (permalink)  
Antiguo 12/05/2010, 01:27
Colaborador
  
Fecha de Ingreso: marzo-2008
Ubicación: Sabadell
Mensajes: 4.897
Antigüedad: 16 años, 8 meses
Puntos: 574
Respuesta: Texto y Input
Código HTML: 
Ver original
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  2. <html>
  3. <head>
  4. <title>Documento sin t&iacute;tulo</title>
  5. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  6. <script language="JavaScript" type="text/JavaScript">
  7. function amaga(id){
  8. if(id==1){
  9.     document.getElementById("tr"+id).style.display="none";
  10.     document.getElementById("tr2").style.display="";
  11. }else{
  12.     document.getElementById("tr"+id).style.display="none";
  13.     document.getElementById("tr1").style.display="";
  14. }
  15. }
  16. </script>
  17. </head>
  18. <body>
  19. <form>
  20. <table width="30%" border="0" cellspacing="0" cellpadding="0">
  21.   <tr id="tr1">
  22.     <td colspan="3"><span onClick="amaga(1)">Ej; hola que cuando haga clic sobre se trasforme en un input y se activen o aparezcan dos botones un submi y un resed<br>
  23.         <strong>Haz clic!!!!</strong></span></td>
  24.   </tr>
  25.   <tr id="tr2" style="display:none">
  26.     <td><input name="ELInput" type="text" id="ELInput"></td>
  27.     <td><input name="Enviar" type="submit" id="Enviar" value="Enviar" onClick="alert('Envio el formulario');amaga(2)"></td>
  28.     <td><input name="Limpiar" type="reset" id="Limpiar" value="Restablecer" onClick="alert('Limpio el formulario');amaga(2)"></td>
  29.   </tr>
  30. </table>
  31. </form>
  32. </body>
  33. </html>

Si?

Quim
  #3 (permalink)  
Antiguo 12/05/2010, 11:55
 
Fecha de Ingreso: febrero-2009
Mensajes: 188
Antigüedad: 15 años, 9 meses
Puntos: 1
Respuesta: Texto y Input
El código a simple vista realiza lo que deseo pero me pregunto seria posible verlo sin usar tablas.}
y gracias por todo
  #4 (permalink)  
Antiguo 12/05/2010, 18:16
Avatar de lukas4  
Fecha de Ingreso: octubre-2008
Ubicación: frente al pc
Mensajes: 496
Antigüedad: 16 años, 1 mes
Puntos: 12
Respuesta: Texto y Input
pues... cambia los <tr> por <div> y los <td> por <p> :P
__________________
http://situcomo.blogspot.com
Karma is a Bitch... they said
  #5 (permalink)  
Antiguo 12/05/2010, 22:08
 
Fecha de Ingreso: febrero-2009
Mensajes: 188
Antigüedad: 15 años, 9 meses
Puntos: 1
Respuesta: Texto y Input
Escusenme por esta pregunta estupida que are pero com puedo incluir ese codigo a este formulario. y perdon es que con java me pierdo.
<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">
<bgsound src="../Sonidos/Speech Off.wav" loop="l" balance="b" volume="v"></bgsound>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<script language="JavaScript" type="text/JavaScript">
function amaga(id){
if(id==1){
    document.getElementById("tr"+id).style.display="no ne";
    document.getElementById("tr2").style.display="";
}else{
    document.getElementById("tr"+id).style.display="no ne";
    document.getElementById("tr1").style.display="";
}
}
</script>

</head>

<body style="background-color: transparent;">
<form method="GET" name="checkForm" action=""><div align="center">
<table width="669" border="0">
</table>
<table width="668" height="115" border="0" cellpadding="0" cellspacing="1">
<tr>
<td width="170"><div align="left"><font face="Monotype Corsiva" size="+2">Nombre</font></div></td>
<td colspan="4" align="left"><font face='Monotype Corsiva' size='+1'>Hallking</font></td>
</tr>
<tr>
<td><div align="left"><font face="Monotype Corsiva" size="+2">Apellido</font></div></td>
<td colspan="4" align="left"><font face='Monotype Corsiva' size='+1'>Quesada Median</font></td>
</tr>
<tr align="left">
<td><font face="Monotype Corsiva" size="+2">Telefono</font></td>
<td width="157"><font size="+1" face="Monotype Corsiva">809-888-8888</font></td>
<td width="167"><font size="+1" face="Monotype Corsiva">809-888-8888</font></td>
<td colspan="2"><font size="+1">809-888-8888</font> </td>
</tr>
<tr align="left">
<td><font face="Monotype Corsiva" size="+2">Tipo</font></td>
<td>casa</td>
<td>Cel</td>
<td colspan="2">Trabajo</td>
</tr>
<tr align="left">
<td><font face="Monotype Corsiva" size="+2">Coreo Electronico</font></td>
<td colspan="4"><font size="+1" face="Monotype Corsiva">[email protected]</font></td>
</tr>
<tr align="left">
<td><font face="Monotype Corsiva" size="+2">Dirección</font></td>
<td colspan="2"><font size="+1" face="Monotype Corsiva">calla no me acuerdo</font></td>
<td width="80"><input type="submit" name="button4" value="Guardar C" /></td>
<td width="66"><input type="reset" name="button3" value="Borar" /></td>
</tr>
</table>
</form>
</body>
</html>
</html>
  #6 (permalink)  
Antiguo 13/05/2010, 01:19
Colaborador
  
Fecha de Ingreso: marzo-2008
Ubicación: Sabadell
Mensajes: 4.897
Antigüedad: 16 años, 8 meses
Puntos: 574
Respuesta: Texto y Input
Java no es JavaScript, solo se parecen en el nombre.

Ahí te dejo un ejemplo con el nombre... si lo terminas tendrás una suerte de formulario oculto.... que actualiza el texto visible y se puede mandar....

Si no te gustan las tablas lo siento....


Código HTML: 
Ver original
  1. <html>
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <bgsound src="../Sonidos/Speech Off.wav" loop="l" balance="b" volume="v"></bgsound>
  5. <head>
  6. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  7.  
  8. <script language="JavaScript" type="text/JavaScript">
  9. function amaga(id,num){
  10.  
  11. if(num=="1"){
  12.     document.getElementById(id+"1").style.display="none";
  13.     document.getElementById(id+"2").style.display="";
  14.     document.getElementById(id).value=document.getElementById(id+"0").innerHTML;
  15. }else{
  16.     document.getElementById(id+"2").style.display="none";
  17.     document.getElementById(id+"1").style.display="";
  18.     document.getElementById(id+"0").innerHTML=document.getElementById(id).value;
  19. }
  20. }
  21. </script>
  22.  
  23. </head>
  24.  
  25. <body style="background-color: transparent;">
  26. <div align="center"><form method="GET" name="checkForm" action="">
  27. <table width="669" border="0">
  28. </table>
  29. <table width="668" height="115" border="0" cellpadding="0" cellspacing="1">
  30. <tr>
  31. <td width="170"><div align="left"><font face="Monotype Corsiva" size="+2">Nombre</font></div></td>
  32. <td colspan="4" align="left"><font face='Monotype Corsiva' size='+1'><table width="100%" border="0" cellspacing="0" cellpadding="0">
  33.   <tr id='nombre1'>
  34.     <td><span onclick="amaga('nombre',1)" id="nombre0">Hallking</span></td>
  35. </tr><tr id='nombre2' style='display:none'>
  36.     <td><input name="nombre" type="text" id="nombre" value="Hallking" onblur="amaga('nombre',2)" /></td>
  37.   </tr>
  38. </table>
  39. </font></td>
  40. </tr>
  41. <tr>
  42. <td><div align="left"><font face="Monotype Corsiva" size="+2">Apellido</font></div></td>
  43. <td colspan="4" align="left"><font face='Monotype Corsiva' size='+1'>Quesada Median</font></td>
  44. </tr>
  45. <tr align="left">
  46. <td><font face="Monotype Corsiva" size="+2">Telefono</font></td>
  47. <td width="157"><font size="+1" face="Monotype Corsiva">809-888-8888</font></td>
  48. <td width="167"><font size="+1" face="Monotype Corsiva">809-888-8888</font></td>
  49. <td colspan="2"><font size="+1">809-888-8888</font> </td>
  50. </tr>
  51. <tr align="left">
  52. <td><font face="Monotype Corsiva" size="+2">Tipo</font></td>
  53. <td>casa</td>
  54. <td>Cel</td>
  55. <td colspan="2">Trabajo</td>
  56. </tr>
  57. <tr align="left">
  58. <td><font face="Monotype Corsiva" size="+2">Coreo Electronico</font></td>
  59. <td colspan="4"><font size="+1" face="Monotype Corsiva">[email protected]</font></td>
  60. </tr>
  61. <tr align="left">
  62. <td><font face="Monotype Corsiva" size="+2">Dirección</font></td>
  63. <td colspan="2"><font size="+1" face="Monotype Corsiva">calla no me acuerdo</font></td>
  64. <td width="80"><input type="submit" name="button4" value="Guardar C" /></td>
  65. <td width="66"><input type="reset" name="button3" value="Borar" /></td>
  66. </tr>
  67. </table>
  68. </form></div>
  69. </body>
  70. </html>

Por cierto solo tienes que reproducir, con un poco de logica, lo que he hecho en el html el script no tienes por que tocarlo...

Quim
Última edición por quimfv; 13/05/2010 a las 01:25
  #7 (permalink)  
Antiguo 13/05/2010, 11:47
 
Fecha de Ingreso: febrero-2009
Mensajes: 188
Antigüedad: 15 años, 9 meses
Puntos: 1
Respuesta: Texto y Input
no te preocupes si esta vien el ejemplo no importa.
el resto lo tengo q completar yo no puedo pensar q el los miembros del foro hagan mi trabajo no cres
Gracias por todo.
  #8 (permalink)  
Antiguo 13/05/2010, 20:05
 
Fecha de Ingreso: febrero-2009
Mensajes: 188
Antigüedad: 15 años, 9 meses
Puntos: 1
Respuesta: Texto y Input
saves me tendras que perdonar pues me pase todo el dia con el codigo y esto fue todo lo q pude lograr dime en q me equivoque y gracias.

Código HTML:
<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">
<bgsound src="../Sonidos/Speech Off.wav" loop="l" balance="b" volume="v"></bgsound>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 
<script language="JavaScript" type="text/JavaScript">
function amaga(id,num){
 
if(num=="1"){
//Primer nombres
    document.getElementById(id+"1").style.display="none";
    document.getElementById(id+"2").style.display="";
    document.getElementById(id).value=document.getElementById(id+"0").innerHTML;
}else{
//primer Nombre
    document.getElementById(id+"2").style.display="none";
    document.getElementById(id+"1").style.display="";
    document.getElementById(id+"0").innerHTML=document.getElementById(id).value;
}
}

function amaga2(id,num){
 
if(num=="1"){
//Primer nombres
    document.getElementById(id+"1").style.display="none";
    document.getElementById(id+"2").style.display="";
    document.getElementById(id).value=document.getElementById(id+"0").innerHTML;

}else{
//primer Nombre
    document.getElementById(id+"2").style.display="none";
    document.getElementById(id+"1").style.display="";
    document.getElementById(id+"0").innerHTML=document.getElementById(id).value;
}
}
</script>
 
</head>
 
<body style="background-color: transparent;">
<div align="center"><form method="GET" name="checkForm" action="">
<table width="669" border="0">
</table>
<table width="668" height="115" border="0" cellpadding="0" cellspacing="1">
<tr>
<td width="170"><div align="left"><font face="Monotype Corsiva" size="+2">Nombre</font></div></td>
<td colspan="4" align="left"><font face='Monotype Corsiva' size='+1'><table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr id='nombre1'>
    <td colspan="2"><span onclick="amaga('nombre',1)" id="nombre0">Hallking</span> <span onclick="amaga('nombre',1)" id="nombre0"> Darkking </span></td>
    </tr>
  <tr id='nombre2' style='display:none'>
    <td width="36%"><input type="text" value="Hallking" onblur="amaga('nombre',2)" ></td>
    <td width="64%"><input type="text" value="Hallking" onblur="amaga('nombre',2)" ></td>
  </tr>

</table>
</font></td>
</tr>
<tr>
<td><div align="left"><font face="Monotype Corsiva" size="+2">Apellido</font></div></td>
<td colspan="4" align="left"><font face='Monotype Corsiva' size='+1'>
<table width="491" border="0">
  <tr id='nombre1'>
    <td colspan="2" scope="col"> <span onclick="amaga2('nombre',1)" id="nombre0">Quesada</span> <span onclick="amaga2('nombre',1)" id="nombre0">Medina</span> </td>
  </tr>
  <tr id='nombre2' style='display:none'>
    <td width="239" scope="col"><input type="text" value="Ha" onblur="amaga ('nombre',2)" /></td>
    <td width="229" scope="col"><input type="text" value="Ha" onblur="amaga ('nombre',2)" /></td>
  </tr>
</table>
</font>
</td>
</tr>
<tr align="left">
<td rowspan="2"><font face="Monotype Corsiva" size="+2">Telefono</font></td>
<td width="157"><font size="+1" face="Monotype Corsiva">809-888-8888</font></td>
<td width="167"><font size="+1" face="Monotype Corsiva">809-888-8888</font></td>
<td colspan="2">809-888-8888</td>
</tr>
<tr align="left">
  <td><input name="nombre5" type="text" id="nombre6" value="Hallking" onblur="amaga('nombre',2)" /></td>
  <td width="167"><input name="nombre6" type="text" id="nombre7" value="Hallking" onblur="amaga('nombre',2)" /></td>
  <td colspan="2"><input name="nombre7" type="text" id="nombre8" value="Hallking" onblur="amaga('nombre',2)" /></td>
</tr>
<tr align="left">
<td><font face="Monotype Corsiva" size="+2">Tipo</font></td>
<td>casa</td>
<td>Cel</td>
<td colspan="2">Trabajo</td>
</tr>
<tr align="left">
<td rowspan="2"><font face="Monotype Corsiva" size="+2">Coreo Electronico</font></td>
<td colspan="4"><font size="+1" face="Monotype Corsiva">[email protected]</font></td>
</tr>
<tr align="left">
  <td colspan="4"><input name="nombre3" type="text" id="nombre4" value="Hallking" onblur="amaga('nombre',2)" /></td>
</tr>
<tr align="left">
<td rowspan="2"><font face="Monotype Corsiva" size="+2">Dirección</font></td>
<td colspan="2"><font size="+1" face="Monotype Corsiva">calla no me acuerdo</font></td>
<td width="80" rowspan="2"><input type="submit" name="button4" value="Guardar C" /></td>
<td width="66" rowspan="2"><input type="reset" name="button3" value="Borar" /></td>
</tr>
<tr align="left">
  <td colspan="2"><input name="nombre4" type="text" id="nombre5" value="Hallking" onblur="amaga('nombre',2)" /></td>
</tr>
</table>
</form></div>
</body>
</html>
  #9 (permalink)  
Antiguo 14/05/2010, 01:12
Colaborador
  
Fecha de Ingreso: marzo-2008
Ubicación: Sabadell
Mensajes: 4.897
Antigüedad: 16 años, 8 meses
Puntos: 574
Respuesta: Texto y Input
Código HTML: 
Ver original
  1. <html>
  2. <!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"> 
  3. <bgsound src="../Sonidos/Speech Off.wav" loop="l" balance="b" volume="v"></bgsound>
  4. <head>
  5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  6. <script language="JavaScript" type="text/JavaScript">
  7. function amaga(id,num){
  8. if(num=="1"){
  9. //Primer nombres
  10.     document.getElementById(id+"1").style.display="none";
  11.     document.getElementById(id+"2").style.display="";
  12.     document.getElementById(id).value=document.getElementById(id+"0").innerHTML;
  13. }else{
  14. //primer Nombre
  15.     document.getElementById(id+"2").style.display="none";
  16.     document.getElementById(id+"1").style.display="";
  17.     document.getElementById(id+"0").innerHTML=document.getElementById(id).value;
  18. }
  19. }
  20.  
  21. </script>
  22. </head>
  23. <body style="background-color: transparent;">
  24. <div align="center">
  25.   <form method="GET" name="checkForm" action="">
  26.     <table width="668" height="115" border="0" cellpadding="0" cellspacing="1">
  27.       <tr> 
  28.         <td width="170"><div align="left"><font face="Monotype Corsiva" size="+2">Nombre</font></div></td>
  29.         <td align="left"><font face='Monotype Corsiva' size='+1'>
  30.           <table width="100%" border="0" cellspacing="0" cellpadding="0">
  31.             <tr id='nombre1'> 
  32.               <td><span onClick="amaga('nombre',1)" id="nombre0">Hallking Darkking</span></td>
  33.             <tr id='nombre2' style='display:none'> 
  34.               <td><input type="text" value="Hallking Darkking" onBlur="amaga('nombre',2)" id="nombre" name="nombre" ></td>
  35.             </tr>
  36.           </table>
  37.           </font></td>
  38.       </tr>
  39.       <tr> 
  40.         <td><div align="left"><font face="Monotype Corsiva" size="+2">Apellido</font></div></td>
  41.         <td align="left"><font face='Monotype Corsiva' size='+1'> 
  42.           <table width="491" border="0">
  43.             <tr id='apellido1'> 
  44.               <td colspan="2"> <span onClick="amaga('apellido',1)" id="apellido0">Quesada Medina</span> </td>
  45.             </tr>
  46.             <tr id='apellido2' style='display:none'> 
  47.               <td><input type="text" value="Quesada Medina" onBlur="amaga('apellido',2)"  id="apellido" name="apellido"/></td>
  48.             </tr>
  49.           </table>
  50.           </font> </td>
  51.       </tr>
  52.     </table>
  53.   </form>
  54. </div>
  55. </body>
  56. </html>

Hasta ahí puedo leer...

En el mail anterior te dige que no tenias porque tocar el script y lo primero que haces es duplicarlo!!!

Te aconsejo que antes de intentar hacer lo que estas intentando leas algo sobre html, que es un id, para que sirve...

Luego intenta entender lo que he hecho, ahora te he dado un ejemplo con dos campos.... solo tienes que hacer lo mismo con el retos de campos..... pero claro no solo copy/paste!!!

Quim
  #10 (permalink)  
Antiguo 14/05/2010, 06:46
 
Fecha de Ingreso: febrero-2009
Mensajes: 188
Antigüedad: 15 años, 9 meses
Puntos: 1
Respuesta: Texto y Input
ok pero tengo una ultima pregunta si te es posible como puedo dividir los nombres ej hallkin en un input y darking en otro input.

y perdoname la estupides de parte mi.

muchas gracias por todo
  #11 (permalink)  
Antiguo 14/05/2010, 12:57
Colaborador
  
Fecha de Ingreso: marzo-2008
Ubicación: Sabadell
Mensajes: 4.897
Antigüedad: 16 años, 8 meses
Puntos: 574
Respuesta: Texto y Input
Si realmente lo quieres hacer asi lo pudes hacer calcando la manera de hacerlo entre nombre y apellido... imagina que quieres tener dos apellidos (en algunos paises se usan) pondrias apellido1 y apellido2 luego si quieres dos nombres.... todo es question de tener el mismo juego de id para cada campo tenemos nombre0, nombre1, nombre2 si queremos
tener dos nombres

nombre10, nombre11, nombre12

nombre20, nombre21, nombre22

...

Creo realmente que estas queriendo ir demasido rapido!! Hay que empezar por el

Hola mundo!!

...

Quim
  #12 (permalink)  
Antiguo 14/05/2010, 21:10
 
Fecha de Ingreso: febrero-2009
Mensajes: 188
Antigüedad: 15 años, 9 meses
Puntos: 1
Respuesta: Texto y Input
con javascrip si no te lo niego soy un novato de los mas grandes q hay en el mundo lol

Etiquetas: input
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 18:27.