Добавление новой формы при нажатии

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

Попробуйте это:

Отредактировано 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 Пояснение:

Ничего особенного не отредактирован, но на щелчку гиперссылкой I убедитесь, что он должен вернуть false или иначе он будет ссылаться на другую страницу.

---

JavaScript Объяснение:

Сначала я установить переменную в один, который является количество опыта работы, которые будут увеличиваться каждый раз, когда нажата кнопка. Затем по щелчку ссылки h1 я добавляю две вещи в теле. Первый - это h2, который является заголовком опыта работы, а второй - копией первой формы, которая уже присутствует.

Answer 3

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 4

Быстрое решение 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 5

Рабочая Fiddle: http://jsfiddle.net/2JgtT/

Примечание: вам нужно somekind логики для добавления более 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, я завернула дивы в контейнере

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

Answer 6

Использование Jquery добавить метод при нажатии кнопки нажатием кнопки события

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

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

Answer 7

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