jQuery y php, ayuda! Revisando en google, encontré un tutorial en http://desarrolloweb.com sobre como agregar más campos a un formulario.
Para simplificar el trabajo en mi web, decidí que en vez de estar poniendo un input para cada correo del Usuario, se podría poner ese código implementado con un select que te diera a escoger cada correo -ya sea MSN, Yahoo, GoogleTalk, Skype, etc- incluido en el select con un input delante de ese select el cual recogería ese valor.
El código con el select quedó de la siguiente forma:
Código PHP:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Agregar campos al formulario dinámicamente</title>
<script src="includes/js/jQuery.js" type="text/javascript"></script>
<script>
jQuery.fn.generaNuevosCampos = function(etiqueta, nombreCampo, indice){
$(this).each(function(){
elem = $(this);
elem.data("etiqueta",etiqueta);
elem.data("nombreCampo",nombreCampo);
elem.click(function(e){
e.preventDefault();
elem = $(this);
etiqueta = elem.data("etiqueta");
nombreCampo = elem.data("nombreCampo");
indice = elem.data("indice");
texto_insertar = '<p><input type="text" name="' + nombreCampo + indice +'" /> <select name="correos"><option value="correomsn">MSN</option> <option value="correoyahoo">Yahoo!</option><option value="skype">Skype</option><option value="gtalk">Google Talk!</option></select></p>';
indice ++;
nuevo_campo = $(texto_insertar);
elem.before(nuevo_campo);
});
});
return this;
}
$(document).ready(function(){
$("#mascampos").generaNuevosCampos("Redes", "infoma", 2);
});
</script>
</head>
<body>
<form method="post" action="test.php">
<p>
Nombre:<br>
<input type="Text" name="nombre">
</p><p>
Edad:<br>
<input type="Text" name="Edad">
</p><p>
Compra:<br>
<input type="Text" name="infoma"> <select name="correos">
<option value="correomsn">MSN</option>
<option value="correoyahoo">Yahoo!</option>
<option value="skype">Skype</option>
<option value="gtalk">Google Talk!</option>
</select>
<p>
<a href="#" id="mascampos">Más campos</a>
</p><p>
<input type=submit name="redsco" value="enviar">
</p>
</form>
</body>
</html>
¡Gracias de antemano!
