Jquery Incrementing A Cloned Elements Instead Of Cloned Div

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 wi

Solution 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;

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

functionremove() {
  $(".rounded").find(".clonedInput:last").remove();
}

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

Solution 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();

Solution 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;

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

functionremove() {
    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 datafunctionsubmit_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 requestalert(ajax_result); // Process the result the way you whant to
    },
    });
}

The HTML:

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