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，以便保留原始表单值。

Answer 2

It will add more form if u click "ADD NEW JOB +";

<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>
<div id="concat"></div>
<h1><a href="javascript:;" id="addfield">ADD NEW JOB +</a></h1>

<script>    
$("#addfield").click(function(){

var detailContent = '<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>';    

$('#concat').append(detailContent); 

    });
</script>

Answer 3

使用单击事件

单击Button时使用Jquery append方法

$('#id').click(function() {
var x=$("#formid").html();

$("body").append(x);
});

Answer 4

<a href="" id="test">test</a>
<div id="test1"></div>
<script>    
$("#test").click(function(){

    var detailContent = '<div>what portion need to add there</div>';    

    $('#test1').append(detailContent); 

});
</script>

Answer 5

试试这个：

编辑HTML：

<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 id="add_job"><a href="add-new-form" onclick="return false;">ADD NEW JOB +</a></h1>

JavaScript的：

var i = 1;
$("#add_job").click(function() {
    $("body").append("<h2>JOB EXPERIENCE "+ ++i + "</h2>");
    $("body").append($(".job-content:nth-child(2)").clone());
});

HTML说明：

没有太多编辑但是点击超链接我确保它应该返回false，否则它会链接到另一个页面。

JavaScript说明：

首先，我将变量设置为1，即每次单击按钮时将增加的作业体验数。然后点击链接的h1，我会在身体中附加两件事。第一个是h2，它是工作经历的标题，第二个是第一个表格的副本，它已经存在。

Answer 6

快速的JQuery解决方案：

$("#add-new-form").on("click",function{
   var form = '<form>
               <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>
               </form>';
   $('body').append(form);
});

我没有测试方法，但这就像你在寻找的东西？

Answer 7

工作小提琴：http://jsfiddle.net/2JgtT/

注意：您需要一些逻辑来添加2个以上的工作字段..这只是一个示例。

HTML：

<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>
<div class="jobfields">

<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>
</div>

<h1><a href="add-new-form" class="addjob">ADD NEW JOB +</a></h1>

Jquery：

$(document).on("click", ".addjob", function (e) {
    e.preventDefault();
    $('.job-content').next('.jobfields').show();
});

或者这可能是：http://jsfiddle.net/2JgtT/3/查看html，我已将div包装在容器中

$(document).on("click", ".addjob", function (e) {
    e.preventDefault();
    addJobField();
});

function addJobField() {
    $('.container').append("<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>");
}

单击时添加新表单

7 个答案: