单击时添加新表单

Question

当用户单击“添加新工作”链接时，将出现一个包含三个字段的新表单。这是主要形式：

<h2>JOB EXPERIENCE 1</h2>
<div class="job-content">
  <input type="text" value="Company" name="company" />
  <input type="text" value="Course" name="course" />
  <input type="date" value="Date" name="date" />
</div>

<h1><a href="add-new-form">ADD NEW JOB +</a></h1>
//When clicked, it will show another form, with the same fields from the form above. 

<h2>JOB EXPERIENCE 2</h2>
<div class="job-content">
  <input type="text" value="Company" name="company2" />
  <input type="text" value="Course" name="course2" />
  <input type="date" value="Date" name="date2" />
</div>

我很感激任何帮助。

Answer 1

您可以使用 jQuery.clone()复制原始内容.job-content，然后增加表单项名称以复制示例输出。

这也将允许您在将来需要时扩展输入的数量，而无需更新您的 JavaScript 代码。

$(function () {
    var duplicates = 0,
        $original = $('.job-content').clone(true);

    function DuplicateForm () {
        var newForm;

        duplicates++; 

        newForm = $original.clone(true).insertBefore($('h1'));

        $.each($('input', newForm), function(i, item) {            
            $(item).attr('name', $(item).attr('name') + duplicates);
        });

        $('<h2>JOB EXPERIENCE ' + (duplicates + 1) + '</h2>').insertBefore(newForm);
    }

    $('a[href="add-new-form"]').on('click', function (e) {
        e.preventDefault();
        DuplicateForm();
    });
});

工作示例 - JSFiddle

更新以job-content在页面加载时克隆原始表单，从而保留原始表单值。