Skip to main content
se añadieron 28 caracteres en el cuerpo
Origen Enlace
Bender Paisa
  • 12.5k
  • 4
  • 28
  • 42

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.

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 +'" /><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" />
    </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>

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.

se añadieron 172 caracteres en el cuerpo
Origen Enlace
Bender Paisa
  • 12.5k
  • 4
  • 28
  • 42

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 +'" /><><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" />
    </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>

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 +'" /></div>');
    });
});
<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" />
    </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>

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 +'" /><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" />
    </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>

se añadieron 91 caracteres en el cuerpo
Origen Enlace
Bender Paisa
  • 12.5k
  • 4
  • 28
  • 42

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">emailfor="email_'+ contador +'">email:</label><input type="email" id="email"id="email_'+ contador +'" /></div>');
    });
});
<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" />
    </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>

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

$(document).ready(function() {
    $("#add_email").click(function(){
        $(this).before('<div><label for="email">email:</label><input type="email" id="email" /></div>');
    });
});
<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" />
    </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>

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 +'" /></div>');
    });
});
<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" />
    </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>

Origen Enlace
Bender Paisa
  • 12.5k
  • 4
  • 28
  • 42
Loading