Dynamically add or remove input box using jQuery

Question

The problem in my case is I can dynamically add / remove input boxes, but the problem is when I manually add a set of input box and remove button instead of press add button to create one, it can not remove it.

Is it possible to have 3 sets of input boxes but 2 remove buttons?

Thank you for any kind of help.

JSFiddle

enter image description here

    <script>
$(document).ready(function() {
    $("#add").click(function() {
        var intId = $("#buildyourform div").length + 1;
        var label = $("<label>Field Name</label>");
        var labelType = $("<label>Field Type</label>");
        var labelReq = $("<label>Require</label>");
        var labelTag = $("<label>Tag</label>");
        var fieldWrapper = $("<div class=\"fieldwrapper\" id=\"field" + intId + "\"/>");
        var fName = $("<input type=\"text\" name=\"inputName[]\" class=\"required\" />");
        var fTag = $("<input type=\"text\" name=\"inputTag[]\" class=\"required\" />");
        var fReq = $("<select class=\"fieldtype\"><option value=\"checkbox\">Checked</option><option value=\"1\">Yes</option><option value=\"0\">No</option></select>");
        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=\"Remove\" />");
        removeButton.click(function() {
            $(this).parent().remove();
        });

        fieldWrapper.append(label);
        fieldWrapper.append(fName);
        fieldWrapper.append('<br>');
        fieldWrapper.append(labelType);
        fieldWrapper.append(fType);
        fieldWrapper.append('<br>');
        fieldWrapper.append(labelReq);
        fieldWrapper.append(fReq);
        fieldWrapper.append('<br>');
        fieldWrapper.append(labelTag);
        fieldWrapper.append(fTag);
        fieldWrapper.append('<br>');
        fieldWrapper.append(removeButton);
        $("#buildyourform").append(fieldWrapper);
    });
});

</script>



</head>
<body>

<form id="config" method="post" action="config.php" >
<fieldset id="buildyourform">
    <legend>Build your own form!</legend>


<!-- I manually create  a set of input box here -->

        <div class="fieldwrapper" id="field1"><label>Field Name</label><input type="text" name="inputName[]" class="required"><br><label>
Field Type</label><select class="fieldtype">
<option value="checkbox">Checked</option><option value="textbox">Text</option><option value="textarea">Paragraph</option></select><br><label>Require</label>
<select class="fieldtype"><option value="checkbox">Checked</option>
<option value="1">Yes</option><option value="0">No</option></select><br><label>
Tag</label><input type="text" name="inputTag[]" class="required"><br><input type="button" class="remove" value="Remove"></div>


<!-- I manually create a set of input box here -->




    <input type="text" name="input[]" value="test">
</fieldset>
<input type="button" value="Add a field" class="add" id="add" />
<input type="submit" value="Submit">


</form>

</html>

do you register a remove function with your manually created form elements? — ma cılay
– ma cılay, Commented Mar 21, 2012 at 17:46

enderskill · Accepted Answer · 2012-03-21 17:49:31Z

Try setting the remove button actions when the document is loaded.

Try it here or use the code below.

<script>
$(document).ready(function() {
    $('.remove').click(function(){
        $(this).parent().remove();
    });

    $("#add").click(function() {
        var intId = $("#buildyourform div").length + 1;
        var label = $("<label>Field Name</label>");
        var labelType = $("<label>Field Type</label>");
        var labelReq = $("<label>Require</label>");
        var labelTag = $("<label>Tag</label>");
        var fieldWrapper = $("<div class=\"fieldwrapper\" id=\"field" + intId + "\"/>");
        var fName = $("<input type=\"text\" name=\"inputName[]\" class=\"required\" />");
        var fTag = $("<input type=\"text\" name=\"inputTag[]\" class=\"required\" />");
        var fReq = $("<select class=\"fieldtype\"><option value=\"checkbox\">Checked</option><option value=\"1\">Yes</option><option value=\"0\">No</option></select>");
        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=\"Remove\" />");
        removeButton.click(function() {
            $(this).parent().remove();
        });

        fieldWrapper.append(label);
        fieldWrapper.append(fName);
        fieldWrapper.append('<br>');
        fieldWrapper.append(labelType);
        fieldWrapper.append(fType);
        fieldWrapper.append('<br>');
        fieldWrapper.append(labelReq);
        fieldWrapper.append(fReq);
        fieldWrapper.append('<br>');
        fieldWrapper.append(labelTag);
        fieldWrapper.append(fTag);
        fieldWrapper.append('<br>');
        fieldWrapper.append(removeButton);
        $("#buildyourform").append(fieldWrapper);
    });
});

</script>



</head>
<body>

<form id="config" method="post" action="config.php" >
<fieldset id="buildyourform">
    <legend>Build your own form!</legend>


<!-- I manually create  a set of input box here -->

        <div class="fieldwrapper" id="field1"><label>Field Name</label><input type="text" name="inputName[]" class="required"><br><label>
Field Type</label><select class="fieldtype">
<option value="checkbox">Checked</option><option value="textbox">Text</option><option value="textarea">Paragraph</option></select><br><label>Require</label>
<select class="fieldtype"><option value="checkbox">Checked</option>
<option value="1">Yes</option><option value="0">No</option></select><br><label>
Tag</label><input type="text" name="inputTag[]" class="required"><br><input type="button" class="remove" value="Remove"></div>


<!-- I manually create a set of input box here -->




    <input type="text" name="input[]" value="test">
</fieldset>
<input type="button" value="Add a field" class="add" id="add" />
<input type="submit" value="Submit">


</form>

</html>

informatik01 · Accepted Answer · 2019-10-31 14:55:15Z

This is an excellent case to use templates as it makes the hole thing much more maintainable rather than create the entire form div in JavaScript.

Live code: http://jsbin.com/uzelix/edit#javascript,html

HTML

<fieldset id="buildyourform">
  <legend>Build your own form!</legend>
  <div id="fields"></div>
</fieldset>
<button class="btn-add">Add field</button>

<!-- I manually create  a set of input box here -->
<script id="fieldTemplate" type="text/x-jquery-tmpl">
  <div class="fieldwrapper" id="field_${Id}">
    <label>Field Name</label>
    <input type="text" name="fieldname_${Id}" class="required">
    <label>Field Type</label>
    <select class="fieldtype_${Id}">
      <option value="checkbox">Checked</option>
      <option value="textbox">Text</option>
      <option value="textarea">Paragraph</option>
    </select>
    <label>Require</label>
    <select class="fieldtype_${Id}">
      <option value="checkbox">Checked</option>
      <option value="1">Yes</option>
      <option value="0">No</option>
    </select>
    <label>Tag</label>
    <input type="text" name="fieldtag_${Id}" class="required">
    <div class="control-button">
      <button class="btn-remove">Remove</button>
    </div>
  </div>
</script>
<!-- I manually create a set of input box here -->

jQuery

$(function(){

  $(".btn-add").click(function() {
      addField();
  });

  $(".btn-remove").live("click", function() {
    $(this).closest(".fieldwrapper").slideUp("slow", function() { 
      $(this).remove(); 
      clearRemove();
    });
  });

  // add first field
  addField();

});

function addField() {
  var i = $(".fieldwrapper").length;
  $("#fieldTemplate").tmpl({ Id: i }).appendTo("#fields");
  clearRemove();
}

function clearRemove() {
  // hide all remove buttons except last one so we don't get 
  //  multiple ids... or use a counter to keep ids unique.
  if($(".fieldwrapper").length > 1) {
    $(".btn-remove:last").show();
    $(".btn-remove:not(:last)").hide();
  } 
  else
    $(".btn-remove").hide();
}

As a side note: you should've noted that your solution requires jQuery Templates Plugin (currently already outdated). Otherwise it won't work (LIVE example).

Collectives™ on Stack Overflow

Dynamically add or remove input box using jQuery

2 Answers 2

Comments

HTML

jQuery

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

HTML

jQuery

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related