Foros del Web » Programando para Internet » Javascript » Frameworks JS »

Agregar inputs dinámicamente

Estas en el tema de Agregar inputs dinámicamente en el foro de Frameworks JS en Foros del Web. Buenas tardes Estoy intentando hacer que al hacer click en un texto, aparezcan inputs, como se ve en esta página: http://jsfiddle.net/jaredwilli/tZPg4/4 El código para hacer ...
  #1 (permalink)  
Antiguo 20/08/2012, 11:52
 
Fecha de Ingreso: enero-2010
Mensajes: 14
Antigüedad: 12 años, 6 meses
Puntos: 0
Agregar inputs dinámicamente

Buenas tardes

Estoy intentando hacer que al hacer click en un texto, aparezcan inputs, como se ve en esta página:
http://jsfiddle.net/jaredwilli/tZPg4/4

El código para hacer esto es el siguiente:

Javascript
Código PHP:
    $(function() {
        var 
scntDiv = $('#p_scents');
        var 
= $('#p_scents p').size() + 1;

        $(
'#addScnt').live('click', function() {
                $(
'<p><label for="p_scnts"><input type="text" id="p_scnt" size="20" name="p_scnt_' +'" value="" /></label> <a href="#" id="remScnt">Eliminar</a></p>').appendTo(scntDiv);
                
i++;
                return 
false;
        });
        
        $(
'#remScnt').live('click', function() {
                if( 
) {
                        $(
this).parents('p').remove();
                        
i--;
                }
                return 
false;
        });
    });
</script> 
El HTML
Código PHP:
<h2><a href="#" id="addScnt">Add Another Input Box</a></h2>

<
div id="p_scents">
    <
p>
        <
label for="p_scnts"><input type="text" id="p_scnt" size="20" name="p_scnt" value="" placeholder="Input Value" /></label>
    </
p>
</
div

Ese código funciona perfecto pero me gustaría saber si hay alguna manera de que al hacer click en lugar de que aparezca un input, aparezcan 3 por ejemplo, uno junto al otro.


Saludos y gracias
  #2 (permalink)  
Antiguo 20/08/2012, 12:10
 
Fecha de Ingreso: enero-2012
Ubicación: Caracas
Mensajes: 75
Antigüedad: 10 años, 6 meses
Puntos: 21
Respuesta: Agregar inputs dinámicamente

Cita:
$(function() {
var scntDiv = $('#p_scents');
var i = $('#p_scents p').size() + 1;

$('#addScnt').live('click', function() {
$('<p><label for="p_scnts"><input type="text" id="p_scnt" size="20" name="p_scnt_' + i +'" value="" /></label> <a href="#" id="remScnt">Eliminar</a></p>').appendTo(scntDiv);
i++;
return false;
});

$('#remScnt').live('click', function() {
if( i > 2 ) {
$(this).parents('p').remove();
i--;
}
return false;
});
});
</script>
Claro que hay forma:

Código Javascript:
Ver original
  1. $('#addScnt').live('click', function() {
  2.                 $('<p><label for="p_scnts"><input type="text" id="p_scnt" size="20" name="p_scnt_' + i +'" value="" placeholder="Input Value" /><input type="text" id="p_scnt" size="20" name="p_scnt_' + i +'" value="" placeholder="Input Value" /><input type="text" id="p_scnt" size="20" name="p_scnt_' + i +'" value="" placeholder="Input Value" /></label> <a href="#" id="remScnt">Remove</a></p>').appendTo(scntDiv);
  3.                 i++;
  4.                 return false;
  5.         });

Última edición por beeman00; 20/08/2012 a las 12:19
  #3 (permalink)  
Antiguo 20/08/2012, 12:43
 
Fecha de Ingreso: enero-2010
Mensajes: 14
Antigüedad: 12 años, 6 meses
Puntos: 0
Respuesta: Agregar inputs dinámicamente

Muchas gracias, tu código funciona perfecto!
  #4 (permalink)  
Antiguo 20/08/2012, 13:00
Avatar de Dradi7  
Fecha de Ingreso: junio-2008
Ubicación: Peru - Lima
Mensajes: 1.518
Antigüedad: 14 años, 1 mes
Puntos: 220
Respuesta: Agregar inputs dinámicamente

Cita:
Iniciado por beeman00 Ver Mensaje
Claro que hay forma:

Código Javascript:
Ver original
  1. $('#addScnt').live('click', function() {
  2.                 $('<p><label for="p_scnts"><input type="text" id="p_scnt" size="20" name="p_scnt_' + i +'" value="" placeholder="Input Value" /><input type="text" id="p_scnt" size="20" name="p_scnt_' + i +'" value="" placeholder="Input Value" /><input type="text" id="p_scnt" size="20" name="p_scnt_' + i +'" value="" placeholder="Input Value" /></label> <a href="#" id="remScnt">Remove</a></p>').appendTo(scntDiv);
  3.                 i++;
  4.                 return false;
  5.         });
Pero no entiendo porque la gente aun sigue usando live si el mismo JQuery ya lo dio por deprecado traten de usar el on o el delegate
__________________
La clave de todo triunfador es eliminar todas sus excusas y sus limitaciones

Etiquetas: funcion, html, input, inputs, js
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




La zona horaria es GMT -6. Ahora son las 08:37.