CODEWITHSUNDEEP
jquerycloneincrement
Colin
Colin

Reputation: 434

Using jQuery, how can I clone forms elements and increment the name and id of the cloned elements?

I know there are a lot of questions on Stack about this topic, but I cannot get my specific problem to work. I've looked at this question: jquery increment id and name of children within appended rows

And used the code provided there, but I can't get my example to work. I have a fiddle up here: https://jsfiddle.net/af3z0kx5/2/

using the following HTML:

<main>
<form class="application">
<h3>Work Experience</h3>
<p class="note">Note: We check all references. Click the (+) or (-) buttons below to add or remove previous employment records.</p>
      <div class="work-experience">
        <div class="section group full">
          <div class="col span_6_of_12">
            <label for="fromdate">From (start date)</label>
            <input type="date" id="fromdate" name="From-Date" />
          </div>
          <div class="col span_6_of_12">
            <label for="todate">To (start date)</label>
            <input type="date" id="todate" name="To-Date" />
          </div>
        </div>

        <label for="workexp-employer">Employer's Name</label>
        <input type="text" name="Work-Exp-Employer" id="workexp-employer" />

        <label for="workexp-employer-address">Employer's Address</label>
        <input type="text" name="Work-Exp-Employer-Address" id="workexp-employer-address" placeholder="Street Address, State, and ZIP"/>

        <label for="workexp-employers-phone">Employer's Phone</label>
        <input type="tel" name="Work-Exp-Employer-Phone" id="workexp-employers-phone" pattern="\d{3}[\-]\d{3}[\-]\d{4}" placeholder="ex. 123-456-7890" />

        <label for="workexp-duties">Your Duties</label>
        <textarea placeholder="Summarize" class="duties"></textarea>

        <label for="workexp-supervisor">Supervisor's Name</label>
        <input type="text" name="Work-Exp-Supervisor" id="workexp-supervisor" />

        <div class="section group full">
          <div class="col span_6_of_12">
            <label for="starting-salary">Starting Rate/Salary</label>
            <input type="text" id="starting-salary" name="Starting-Salary" />
          </div>
          <div class="col span_6_of_12">
            <label for="ending-salary">Ending Rate/Salary</label>
            <input type="text" id="ending-salary" name="Ending-Salary" />
          </div>
        </div>

        <label for="workexp-leaving">Specific Reason for Leaving</label>
        <input type="text" name="Work-Exp-Leaving" id="workexp-leaving" />
        <hr />
      </div>
      <div class="control">
        <a href="#" class="add-work-exp">&nbsp;</a>
        <a href="#" class="remove-work-exp">&nbsp;</a>
      </div>
</form>
</main>

And the jQuery:

var i = $(".application .work-experience").length;
$(".add-work-exp").click(function(e) {
    e.preventDefault();
    var clonedRow = $(".work-experience").clone().find("input:text, textarea").val("").end();
    i++;
    $("*[name*='1']", clonedRow).attr('id', function() {
        var attrval = $(this).attr("id");
        attrval = attrval.replace(/\d/g, "");
        while($('#' + attrval + i).size() > 0) {
            i++;
        }
        return attrval + i;
    }).attr('name', function() {
        var attrval = $(this).attr("name");
        attrval = attrval.replace(/\d/g, "");
        return attrval + i;
    });
    $(".work-experience").append(clonedRow);
});

$(".remove-work-exp").click(function (e) {
  e.preventDefault();
 $("form .work-experience").last().remove();
});

The issues I am having with this code:

  1. The cloning puts the cloned code inside of the .work-experience div. I need it to go below it and outside of it. (I tried using .insertAfter instead of .append and that made the whole div disappear for some reason.)
  2. The actual names and id attributes of each input do not get a number added to them. I need a -1, -2, -3 etc. added to the name and id of each input in the cloned div.

Thank you for any help you can give. I am not that good at jQuery (obviously) but I need to get this solved.

Upvotes: 0

Views: 78

Answers (1)

Colin
Colin

Reputation: 434

Big thank you to @Taplar for pointing me in the right direction.

I had 2 issues with my code:

  1. I didn't have "_Name1" in my name or id attributes. The jQuery was looking for that and couldn't find it which is why it was not incrementing.
  2. I was using a deprecated method - size() - this was causing an error. I changed it to length and it worked!

New fiddle: https://jsfiddle.net/32r8z6xs/

Upvotes: 1

Related Questions