Agregar / eliminar campo de entrada dinámicamente con jQuery

Solución:

Me tomé la libertad de armar un jsFiddle que ilustra la funcionalidad de construir un formulario personalizado usando jQuery. Aquí está…

EDITAR: Se actualizó jsFiddle para incluir botones de eliminación para cada campo.

EDITAR: Según la solicitud en el último comentario, el código de jsFiddle está debajo.

EDITAR: Según el comentario de Abhishek, he actualizado jsFiddle (y el código a continuación) para atender escenarios en los que pueden surgir ID de campo duplicados.

HTML:

<fieldset id="buildyourform">
    <legend>Build your own form!</legend>
</fieldset>
<input type="button" value="Preview form" class="add" id="preview" />
<input type="button" value="Add a field" class="add" id="add" />

JavaScript:

$(document).ready(function() {
    $("#add").click(function() {
        var lastField = $("#buildyourform div:last");
        var intId = (lastField && lastField.length && lastField.data("idx") + 1) || 1;
        var fieldWrapper = $("<div class="fieldwrapper" id="field" + intId + ""/>");
        fieldWrapper.data("idx", intId);
        var fName = $("<input type="text" class="fieldname" />");
        var fType = $("<select class="fieldtype"><option value="checkbox">Checked</option><option value="textbox">Text</option><option value="textarea">Paragraph</option></select>");
        var removeButton = $("<input type="button" class="remove" value="-" />");
        removeButton.click(function() {
            $(this).parent().remove();
        });
        fieldWrapper.append(fName);
        fieldWrapper.append(fType);
        fieldWrapper.append(removeButton);
        $("#buildyourform").append(fieldWrapper);
    });
    $("#preview").click(function() {
        $("#yourform").remove();
        var fieldSet = $("<fieldset id="yourform"><legend>Your Form</legend></fieldset>");
        $("#buildyourform div").each(function() {
            var id = "input" + $(this).attr("id").replace("field","");
            var label = $("<label for="" + id + "">" + $(this).find("input.fieldname").first().val() + "</label>");
            var input;
            switch ($(this).find("select.fieldtype").first().val()) {
                case "checkbox":
                    input = $("<input type="checkbox" id="" + id + "" name="" + id + "" />");
                    break;
                case "textbox":
                    input = $("<input type="text" id="" + id + "" name="" + id + "" />");
                    break;
                case "textarea":
                    input = $("<textarea id="" + id + "" name="" + id + "" ></textarea>");
                    break;    
            }
            fieldSet.append(label);
            fieldSet.append(input);
        });
        $("body").append(fieldSet);
    });
});

CSS:

body
{
    font-family:Gill Sans MT;
    padding:10px;
}
fieldset
{
    border: solid 1px #000;
    padding:10px;
    display:block;
    clear:both;
    margin:5px 0px;
}
legend
{
    padding:0px 10px;
    background:black;
    color:#FFF;
}
input.add
{
    float:right;
}
input.fieldname
{
    float:left;
    clear:left;
    display:block;
    margin:5px;
}
select.fieldtype
{
    float:left;
    display:block;
    margin:5px;
}
input.remove
{
    float:left;
    display:block;
    margin:5px;
}
#yourform label
{
    float:left;
    clear:left;
    display:block;
    margin:5px;
}
#yourform input, #yourform textarea
{
    float:left;
    display:block;
    margin:5px;
}

Necesitas crear el elemento.

input = jQuery('<input name="myname">');

y luego añádalo al formulario.

jQuery('#formID').append(input);

para eliminar una entrada, utilice la función de eliminación.

jQuery('#inputid').remove();

Esta es la idea básica, es posible que tenga conjuntos de feildsets a los que también lo anexe, o tal vez lo agregue después de un elemento específico, pero así es como se construye cualquier cosa dinámicamente en realidad.

Código Jquery

$(document).ready(function() {
    var max_fields      = 10; //maximum input boxes allowed
    var wrapper         = $(".input_fields_wrap"); //Fields wrapper
    var add_button      = $(".add_field_button"); //Add button ID

    var x = 1; //initlal text box count
    $(add_button).click(function(e){ //on add input button click
        e.preventDefault();
        if(x < max_fields){ //max input box allowed
            x++; //text box increment
            $(wrapper).append('<div><input type="text" name="mytext[]"/><a href="https://foroayuda.es/#">Remove</a></div>'); //add input box
        }
    });

    $(wrapper).on("click",".remove_field", function(e){ //user click on remove text
        e.preventDefault(); $(this).parent('div').remove(); x--;
    })
});

CÓDIGO HTML

<div>
    <button>Add More Fields</button>
    <div><input type="text" name="mytext[]"></div>
</div>

---

---

Utiliza Nuestro Buscador