Mostrar un campo de texto con un botón

trigger88 · #1 (**permalink**) 29/02/2012, 05:51

Hola a todos y gracias de antemano, estoy intentando que al apretar un boton aparezca un campo de texto, alguna ayuda?
Muchas gracias

daPhyre · #2 (**permalink**) 29/02/2012, 16:59

Eso se haría con JavaScript.

La pregunta sería: ¿Deseas que UN campo de texto oculto aparezca al ser apretado el botón? ¿O deseas que se agregue un campo de texto cada vez que se apriete el botón, agregando así 'n' cantidad de campos de textos como desee el usuario?

trigger88 · #3 (**permalink**) 29/02/2012, 18:36

lo que tendria que hacer es que al apretar el boton apareciese el campo pero con algun tipo de efecto que al pulsar el boton se abriese el campo, no se si se tendria que hacer con html5, javascript o jQuery, gracias por la ayuda

daPhyre · #4 (**permalink**) 29/02/2012, 23:22

¿Algo así?

HTML:

Código HTML:

<button onclick="showHiddenInput()">Mostrar</button>
<input type="text" id="hiddenInput" />

Javascript:

Código PHP:

  document.getElementById('hiddenInput').style.display='none';

function showHiddenInput(){
    document.getElementById('hiddenInput').style.display='block';
}

trigger88 · #5 (**permalink**) 01/03/2012, 02:17

no se si pongo el código mal, pero cuando lo pongo en PHP me da error, en cambio si lo pongo en javascript me sale el campo de texto al lado y cuando aprieto el botón se me me mueve abajo durante un segundo y vuelve a cambiar, he estado mirando y creo que el efecto que estoy buscando es el slidedown pero no se si se puede hacer en HTML5 o únicamente en jQuery

daPhyre · #6 (**permalink**) 01/03/2012, 02:55

Perdón por la confusión. Dice PHP por el estilo de remarcado que uso

No estoy muy seguro de a qué te refieras con lo que dices. Por "Slidedown" comprendo que quieres un efecto en que aparezca con una animación en que se deslice poco a poco hasta verse por completo ¿Estoy en lo correcto? Eso bien se puede hacer con CSS3 animation, o en su defecto, con jQuery o similar.

trigger88 · #7 (**permalink**) 01/03/2012, 03:15

No pasa nada hombre, y estás en lo cierto, quiero que salga el campo de texto al pulsar el botón con esa animación, he probado con este código:

Código:

<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $(".btn1").click(function(){
    $("p").slideDown();
  });
  $(".btn2").click(function(){
    $("p").slideUp();
  });
});
</script>
</head>
<body>
<p><input type="text"></p>
<button class="btn1">Añadir</button>
<button class="btn2">Guardar</button>
</body>
</html>

És en jQuery y mas o menos hace lo que yo quiero ahora mi duda es como hacer que el campo de texto no este visible y aparezca cuando le doy a añadir, alguna ayuda?

daPhyre · #8 (**permalink**) 01/03/2012, 21:03

Solo debes agregar un slideUp al comienzo del document ready:

Código PHP:

  $(document).ready(function(){
  $("p").slideUp();
  $(".btn1").click(function(){
    $("p").slideDown();
  });
  $(".btn2").click(function(){
    $("p").slideUp();
  });
});

Suerte

trigger88 · #9 (**permalink**) 02/03/2012, 01:33

muchas gracias por la ayuda, ya me funciona :D