3
<form action="page.php" method="post">
    <div>
        <label for="name">Name:</label>
        <input type="text" id="name" />
    </div>

    <div>
        <label for="email">email:</label>
        <input type="email" id="email" />
    </div>
   <div class="button">
        <button type="button">add</button>
    </div>

    <div>
        <label for="msg">Message:</label>
        <textarea id="msg"></textarea>
    </div>

    <div class="button">
        <button type="submit">Send your message</button>
    </div>
</form>

introducir la descripción de la imagen aquí

Hola, me gustaria saber como puedo hacer que cuando presione el boton add me añada otro campo "email".

Tambien me gustaria que los campos extras se pudieran eliminar con el boton del.

introducir la descripción de la imagen aquí

Gracias.

2 respuestas 2

8

Si usas la librería jQuery de javaScript lo podrías hacer de esta sencilla forma:

$(document).ready(function() {
    $("#add_email").click(function(){
        var contador = $("input[type='email']").length;

        $(this).before('<div><label for="email_'+ contador +'">email:</label><input type="email" id="email_'+ contador +'" name="email[]"/><button type="button" class="delete_email">Del</button></div>');
    });

    $(document).on('click', '.delete_email', function(){
        $(this).parent().remove();
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form action="page.php" method="post">
    <div>
        <label for="name">Name:</label>
        <input type="text" id="name" />
    </div>

    <div>
        <label for="email">email:</label>
        <input type="email" id="email" name="email[]"/>
    </div>
    <div class="button">
        <button type="button" id="add_email">add</button>
    </div>

    <div>
        <label for="msg">Message:</label>
        <textarea id="msg"></textarea>
    </div>

    <div class="button">
        <button type="submit">Send your message</button>
    </div>
</form>

EXPLICACIÓN:

Tu PHP recibe los datos que envíes utilizando los atributos name de los campos del formulario, como vas a tener varios email (no se sabe exactamente cuantos van a ser) puedes volver ese atributo un array de la siguiente manera name="email[]", así con cada email que ingreses se irá ingresando al array y podrás recibirlos en PHP sin ningún problema.

7
  • 1
    hola, gracias por la respuesta, pero el id de cada campo no deberia ser unico?
    – nakhqoy
    Commented el 16 nov. 2017 a las 16:44
  • Oh claro, podemos usar un contador para controlar eso, déjame te edito para que veas ! Commented el 16 nov. 2017 a las 16:45
  • 1
    @nakhqoy he editado la respuesta ! Commented el 16 nov. 2017 a las 16:48
  • 1
    @nakhqoy te he editado la respuesta con la edición a tu pregunta (el botón eliminar), ahora te pregunto: vas a enviar los datos a php por medio de ajax o vas a usar el método convencional ? Commented el 16 nov. 2017 a las 16:53
  • 1
    @nakhqoy te volví a editar la respuesta con una breve explicación de como enviar los datos a php, debes terminar de colocar los atributos name al resto de elementos (input, select, etc) Commented el 16 nov. 2017 a las 17:03
1

    var nextinput = 0;
    function AgregarCampos(){
    nextinput++;
    campo = '<li id="rut'+nextinput+'">Campo:<input type="email" size="20" id="campo' + nextinput + '"&nbsp; name="campo' + nextinput + '"&nbsp; /></li>';
    $("#campos").append(campo);
    }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="button">
                <a href="#" onclick="AgregarCampos();">Agregar Campos</a>
            </div>
    <div id="campos">

con javascript al presionar el boton se activa la funcion agregarCampos y te lo va agregando

2
  • hola, gracias por la respuesta, pero como obtengo el dato en php si el id es aleatorio y no se cuantos campos hay?
    – nakhqoy
    Commented el 16 nov. 2017 a las 16:46
  • simple, email es un arreglo debes hacer un for en PHP Commented el 16 nov. 2017 a las 17:18

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.