Agregar/eliminar el campo de entrada dinámicamente con jQuery

Me gustaría usar jquery para crear un formulario dinámico de agregar/eliminar. TI debería verse como:Agregar/eliminar el campo de entrada dinámicamente con jQuery

Nombre Tipo ¿Obligatorio?

La entrada de ejemplo:

Nombre Tipo Obligatorio?
, Tony administración controlada (casilla) Eliminar < == pulse el botón eliminará la fila

lo que tengo es un ejemplo de añadir/quitar cuadro de entrada cómo puede convertir a mi idea? ¿Tengo que usar la tabla multi coloumn? Gracias por amablemente ayuda

<html> 
<head> 
<title>jQuery add/remove textbox example</title> 

<script type="text/javascript" src="jquery-1.3.2.min.js"></script> 

<style type="text/css"> 
    div{ 
     padding:8px; 
    } 
</style> 

</head> 

<body> 

<h1>jQuery add/remove textbox example</h1> 

<script type="text/javascript"> 

$(document).ready(function(){ 

    var counter = 2; 

    $("#addButton").click(function() { 

    if(counter>10){ 
      alert("Only 10 textboxes allow"); 
      return false; 
    } 

    var newTextBoxDiv = $(document.createElement('div')) 
     .attr("id", 'TextBoxDiv' + counter); 

    newTextBoxDiv.after().html('<label>Textbox #'+ counter + ' : </label>' + 
      '<input type="text" name="textbox' + counter + 
      '" id="textbox' + counter + '" value="" >'); 

    newTextBoxDiv.appendTo("#TextBoxesGroup"); 


    counter++; 
    }); 

    $("#removeButton").click(function() { 
    if(counter==1){ 
      alert("No more textbox to remove"); 
      return false; 
     } 

    counter--; 

     $("#TextBoxDiv" + counter).remove(); 

    }); 

    $("#getButtonValue").click(function() { 

    var msg = ''; 
    for(i=1; i<counter; i++){ 
     msg += "\n Textbox #" + i + " : " + $('#textbox' + i).val(); 
    } 
      alert(msg); 
    }); 
    }); 
</script> 
</head><body> 

<div id='TextBoxesGroup'> 
    <div id="TextBoxDiv1"> 
     <label>Textbox #1 : </label><input type='textbox' id='textbox1' > 
    </div> 
</div> 
<input type='button' value='Add Button' id='addButton'> 
<input type='button' value='Remove Button' id='removeButton'> 
<input type='button' value='Get TextBox Value' id='getButtonValue'> 

</body> 
</html>

Fuente

2012-02-07 user782104

he tomado la libertad de armar un jsFiddle que ilustra la funcionalidad de la construcción de un formulario personalizado utilizando jQuery. Here it is...

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

EDITAR: Según la solicitud en el último comentario, el código del jsFiddle está a continuación.

EDITAR: De acuerdo con el comentario de Abhishek, he actualizado el jsFiddle (y el código a continuación) para buscar escenarios donde puedan 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; 
}

Fuente

2012-02-07 09:13:18 FarligOpptreden

La función de eliminar es exactamente lo que quiero, estoy tratando de modificar su código para agregar un campo más en cada fila – user782104

Parece que no tengo que modificar el script jquery, solo agrego un elemento de entrada. – user782104

Me pregunto cuál es el nombre de la segunda, dado que hay dos cuadros de texto en la misma fila – user782104

Es necesario crear el elemento.

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

y añádelo al formulario.

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

Para eliminar una entrada, utiliza la funcionalidad de eliminación.

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

Ésta es la idea básica, es posible que tenga feildsets que lo añaden demasiado en su lugar, o tal vez lo añaden después de un elemento específico, pero esto es cómo construir dinámicamente nada realmente.

Fuente

2012-02-07 08:41:33 thenetimp

Luego, $ ("# TextBoxDiv" + rowID) .remove(); es para eliminar? – user782104

Exactamente. aquí están los documentos de jQuery para eliminar() http://api.jquery.com/remove/ – thenetimp

puede hacerlo de la siguiente manera:

$("#addButton").click(function() { 

    if(counter>10){ 
      alert("Only 10 textboxes allow"); 
      return false; 
    } 

    var newTextBoxDiv = $(document.createElement('div')) 
     .attr("id", 'TextBoxDiv' + counter); 

    newTextBoxDiv.after().html('<label>Textbox #'+ counter + ' : </label>' + 
      '<input type="text" name="textbox' + counter + 
      '" id="textbox' + counter + '" value="" >'); 

    newTextBoxDiv.appendTo("#TextBoxesGroup"); 


    counter++; 
    }); 

    $("#removeButton").click(function() { 
    if(counter==1){ 
      alert("No more textbox to remove"); 
      return false; 
     } 

    counter--; 

     $("#TextBoxDiv" + counter).remove(); 

    });

refieren demostración en vivo http://www.mkyong.com/jquery/how-to-add-remove-textbox-dynamically-with-jquery/

Fuente

2012-02-07 08:48:29

por qué no quitar el .after() en la línea

newTextBoxDiv.after().html('<label>Textbox #'+ counter + ' : </label>' +

newTextBoxDiv.html('<label>Textbox #'+ counter + ' : </label>' +

Fuente

2013-02-07 08:12:29 user2042007

Aquí está mi JSFiddle con saltos de línea corregidos, o verlo a continuación.

$(document).ready(function() { 

var MaxInputs  = 2; //maximum extra input boxes allowed 
var InputsWrapper = $("#InputsWrapper"); //Input boxes wrapper ID 
var AddButton  = $("#AddMoreFileBox"); //Add button ID 

var x = InputsWrapper.length; //initlal text box count 
var FieldCount=1; //to keep track of text box added 

//on add input button click 
$(AddButton).click(function (e) { 
     //max input box allowed 
     if(x <= MaxInputs) { 
      FieldCount++; //text box added ncrement 
      //add input box 
      $(InputsWrapper).append('<div><input type="text" name="mytext[]" id="field_'+ FieldCount +'"/> <a href="#" class="removeclass">Remove</a></div>'); 
      x++; //text box increment 

      $("#AddMoreFileId").show(); 

      $('AddMoreFileBox').html("Add field"); 

      // Delete the "add"-link if there is 3 fields. 
      if(x == 3) { 
       $("#AddMoreFileId").hide(); 
       $("#lineBreak").html("<br>"); 
      } 
     } 
     return false; 
}); 

$("body").on("click",".removeclass", function(e){ //user click on remove text 
     if(x > 1) { 
       $(this).parent('div').remove(); //remove text box 
       x--; //decrement textbox 

       $("#AddMoreFileId").show(); 

       $("#lineBreak").html(""); 

       // Adds the "add" link again when a field is removed. 
       $('AddMoreFileBox').html("Add field"); 
     } 
    return false; 
}) 

});

Fuente

2014-04-07 07:07:56 Treps

Usted puede hacer algo como esto a continuación:

//when the Add Field button is clicked 
$("#add").click(function (e) { 
//Append a new row of code to the "#items" div 
    $("#items").append('<div><input type="text" name="input[]"><button class="delete">Delete</button></div>'); 
});

Por tutorial detallado http://voidtricks.com/jquery-add-remove-input-fields/

Fuente

2014-04-19 14:07:24

En su función de clic, se puede escribir:

function addMoreRows(frm) { 
    rowCount ++; 
    var recRow = '<p id="rowCount'+rowCount+'"><tr><td><input name="" type="text" size="17%" maxlength="120" /></td><td><input name="" type="text" maxlength="120" style="margin: 4px 5px 0 5px;"/></td><td><input name="" type="text" maxlength="120" style="margin: 4px 10px 0 0px;"/></td></tr> <a href="javascript:void(0);" onclick="removeRow('+rowCount+');">Delete</a></p>'; 
    jQuery('#addedRows').append(recRow); 
}

O siga este enlace : http://www.discussdesk.com/add-remove-more-rows-dynamically-using-jquery.htm

Fuente

2014-11-16 14:27:43

Agregar/eliminar el campo de entrada dinámicamente con jQuery

Respuesta

Cuestiones relacionadas