jQuery增加克隆元素而不是克隆div

Question

I had this HTML script which contains a drop list and a text box, and I just need to clone those two instead of the whole div, and then send the data to AJAX, and each drop list with text box will form an array that should be add as a single row in a table, that's what I have now:

        <div class="col-sm-4 rounded" style="background-color: #D3D3D3">
          <div class="row clonedInput" id="clonedInput1">
          <div class="col-sm-6 ">
              <label for="diagnosis_data">Medication</label>
                <fieldset class="form-group">
                  <select class="form-control select" name="diagnosis_data" id="diagnosis_data">
                    <option value="choose">Select</option>
                  </select>
                </fieldset>
            <!-- End class="col-sm-6" -->
            </div>
            <div class="col-sm-6">
              <label for="medication_quantity">Quantity</label>
                <fieldset class="form-group">
                  <input type="number" class="form-control" name="medication_quantity" id="medication_quantity">
                </fieldset>
            <!-- End class="col-sm-6" -->
            </div>
            <!-- End class="col-sm-6" -->
          </div>
          <div class="actions pull-right">
            <button class="btn btn-danger clone">Add More</button> 
            <button class="btn btn-danger remove">Remove</button>
          </div>

        <!-- End class="col-sm-4" -->
        </div>

And here is the jQuery Script:

$(document).ready(function()
  {
    $("button.clone").on("click", clone);

    $("button.remove").on("click", remove);
  })
    var regex = /^(.+?)(\d+)$/i;
    var cloneIndex = $(".clonedInput").length;
    function clone(){

        $(this).closest(".rounded").clone()
            .insertAfter(".rounded:last")
            .attr("id", "rounded" +  (cloneIndex+1))
            .find("*")
            .each(function() {
                var id = this.id || "";
                var match = id.match(regex) || [];
                if (match.length == 3) {
                    this.id = id.split('-')[0] +'-'+(cloneIndex);
                }
            })
            .on('click', 'button.clone', clone)
            .on('click', 'button.remove', remove);
        cloneIndex++;
    }
    function remove(){
        $(this).parent().parent(".rounded").remove();
    } 

The problem is that the whole div is being cloned and just the div id is being changed:

Here is the id of each div is being incremented:

I need to clone the 2 elements only not the whole div and buttons

At the end I need t add them to database using Ajax and PHP

Answer 1

Here you can go with the code.

In this code i made changes in clone()

• Here the changes

  1. You first find existing child element.
  2. Than clone that element and append it after last element
  3. var cloneIndex = $(".clonedInput").length; this should be in clone() So it will pass proper incremented value of child element as id in your cloned html

the below code just only make clone of clonedInput not a whole div

Edit

I also edit remove function also.

It will only removes last element which was cloned.

Hope this will helps you. :)

 $(document).ready(function() { $("button.clone").on("click", clone); $("button.remove").on("click", remove); }); var regex = /^(.+?)(\\d+)$/i; function clone() { var cloneIndex = $(".clonedInput").length; $(".rounded").find("#clonedInput1").clone().insertAfter(".clonedInput:last").attr("id", "clonedInput" + (cloneIndex+1)); } function remove() { $(".rounded").find(".clonedInput:last").remove(); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="col-sm-4 rounded" style="background-color: #D3D3D3"> <div class="row clonedInput" id="clonedInput1"> <div class="col-sm-6 "> <label for="diagnosis_data">Medication</label> <fieldset class="form-group"> <select class="form-control select" name="diagnosis_data" id="diagnosis_data"> <option value="choose">Select</option> </select> </fieldset> <!-- End class="col-sm-6" --> </div> <div class="col-sm-6"> <label for="medication_quantity">Quantity</label> <fieldset class="form-group"> <input type="number" class="form-control" name="medication_quantity" id="medication_quantity"> </fieldset> <!-- End class="col-sm-6" --> </div> <!-- End class="col-sm-6" --> </div> <div class="actions pull-right"> <button class="btn btn-danger clone">Add More</button> <button class="btn btn-danger remove">Remove</button> </div> <!-- End class="col-sm-4" --> </div> 

Answer 2

You can add style to your actions class to prevent it from showing on all cloned elements

css

.actions {
  display: none;
}

.clonedInput:first-child .actions {
  display: block;
}

Also for the removing function you could use .closest() instead of .parent().parent()

$(this).closest(".rounded").remove();

Answer 3

There are a lot of things that could be optimized and replaced but I've edited your code. I believe that this is the easiest way to learn. The edits are marked as "STACKOVERFLOW EDIT" in the comments.

$(document).ready(function() {
  $("button.clone").on("click", clone);
  $("button.remove").on("click", remove);
  $("button.submit").on("click", submit_form); // STACKOVERFLOW EDIT: execute the submit function
});

var regex = /^(.+?)(\d+)$/i;

function clone() {
  var cloneIndex = $(".clonedInput").length;
  $(".rounded").find("#clonedInput1").clone().insertAfter(".clonedInput:last").attr("id", "clonedInput" + (cloneIndex + 1));
}

function remove() {
    if($(".clonedInput").length > 1) { // STACKOVERFLOW EDIT: Make sure that you will not remove the first div (the one thet you clone)
    $(".rounded").find(".clonedInput:last").remove();
    } // STACKOVERFLOW EDIT
}

// STACKOVERFLOW EDIT: define the submit function to be able to sent the data
function submit_form() {
    var ajax_data = $('#submit_form').serialize(); // The data of your form
    $.ajax({
    type: "POST",
    url: 'path_to_your_script.php', // This URL should be accessable by web browser. It will proccess the form data and save it to the database.
    data: ajax_data,
    success: function(ajax_result){ // The result of your ajax request
        alert(ajax_result); // Process the result the way you whant to
    },
    });
}

The HTML:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-sm-4 rounded" style="background-color: #D3D3D3">
  <form action="" method="post" id="submit_form"> <!-- STACKOVERFLOW EDIT: generate a form to allow you to get the data in easy way -->
    <div class="row clonedInput" id="clonedInput1">
        <div class="col-sm-6 ">
        <label for="diagnosis_data">Medication</label>
        <fieldset class="form-group">
        <select class="form-control select" name="diagnosis_data[]" id="diagnosis_data"> <!-- STACKOVERFLOW EDIT: Add [] so that you may receive the values as arrays -->
            <option value="choose">Select</option>
            </select>
        </fieldset>
        <!-- End class="col-sm-6" -->
        </div>
        <div class="col-sm-6">
        <label for="medication_quantity">Quantity</label>
        <fieldset class="form-group">
        <input type="number" class="form-control" name="medication_quantity[]" id="medication_quantity"> <!-- STACKOVERFLOW EDIT: Add [] so that you may receive the values as arrays -->
        </fieldset>
        <!-- End class="col-sm-6" -->
        </div>
        <!-- End class="col-sm-6" -->
    </div>
  </form> <!-- STACKOVERFLOW EDIT -->  
  <div class="actions pull-right">
    <button class="btn btn-danger clone">Add More</button>
    <button class="btn btn-danger remove">Remove</button>
    <button class="btn btn-danger submit">Submit</button>
  </div>

  <!-- End class="col-sm-4" -->
</div>