Используя jQuery, как я могу клонировать элементы форм и увеличить имя и идентификатор клонированных элементов? - PullRequest
0 голосов
/ 07 февраля 2019

Я знаю, что в Stack есть много вопросов на эту тему, но я не могу заставить мою конкретную проблему работать.Я посмотрел на этот вопрос: Идентификатор приращения jquery и имя дочерних элементов в добавленных строках

И использовал предоставленный там код, но я не могу заставить свой пример работать.У меня есть скрипка: https://jsfiddle.net/af3z0kx5/2/

с использованием следующего 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>

И 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();
});

Проблемы, с которыми я сталкиваюсь с этимкод:

  1. Клонирование помещает клонированный код внутри .work-experience div.Мне нужно, чтобы это было ниже и вне этого.(Я попытался использовать .insertAfter вместо .append, и по какой-то причине весь div исчез по какой-то причине.)
  2. Фактические имена и атрибуты id каждого ввода не получают число, добавленное к ним.Мне нужно добавить -1, -2, -3 и т. Д. К имени и идентификатору каждого входа в клонированном div.

Спасибо за любую помощь, которую вы можете оказать.Я не очень хорош в jQuery (очевидно), но мне нужно решить эту проблему.

1 Ответ

0 голосов
/ 07 февраля 2019

Большое спасибо @Taplar за указание в правильном направлении.

У меня было 2 проблемы с моим кодом:

  1. У меня не было "_Name1" в моематрибуты name или id.JQuery искал это и не мог найти его, поэтому он не увеличивался.
  2. Я использовал устаревший метод - size() - это вызывало ошибку.Я изменил его на length, и оно заработало!

Новая скрипка: https://jsfiddle.net/32r8z6xs/

...