I have a big problem with this nested form and if anybody knows how to do it please help me. So i have this form that needs to be cloned, and thats not the problem. The problem is that the form has two input fields that also needs to have the ability to be cloned in every next cloned form, something like a quiz. I am really stuck, someone pls help. Hope this was easy to understand, if not ask away.
This form is the problem
https://jsfiddle.net/t5o8z0rq/
$(function () {
$('#btnAdd_1').click(function () {
var num = $('.clonedInput_1').length, // Checks to see how many "duplicatable" input fields we currently have
newNum = new Number(num + 1), // The numeric ID of the new input field being added, increasing by 1 each time
newElem = $('#entry' + num).clone().attr('id', 'entry' + newNum).fadeIn('slow'); // create the new element via clone(), and manipulate it's ID using newNum value
/* This is where we manipulate the name/id values of the input inside the new, cloned element
Below are examples of what forms elements you can clone, but not the only ones.
There are 2 basic structures below: one for an H2, and one for form elements.
To make more, you can copy the one for form elements and simply update the classes for its label and input.
Keep in mind that the .val() method is what clears the element when it gets cloned. Radio and checkboxes need .val([]) instead of .val('').
*/
// Label for email field
newElem.find('.label_email').attr('id', 'ID' + newNum + '_reference').attr('name', 'ID' + newNum + '_reference').html('Question #' + newNum);
// Email input - text
newElem.find('.label_email').attr('for', 'ID' + newNum + '_email_address');
newElem.find('.input_email').attr('id', 'ID' + newNum + '_email_address').attr('name', 'ID' + newNum + '_email_address').val('');
// Insert the new element after the last "duplicatable" input field
$('#entry' + num).after(newElem);
$('#ID' + newNum + '_title').focus();
// Enable the "remove" button. This only shows once you have a duplicated section.
$('#btnDel_1').attr('disabled', false);
// Right now you can only add 4 sections, for a total of 5. Change '5' below to the max number of sections you want to allow.
// This first if statement is for forms using input type="button" (see older demo). Delete if using button element.
if (newNum == 5)
$('#btnAdd_1').attr('disabled', true).prop('value', "You've reached the limit"); // value here updates the text in the 'add' button when the limit is reached
// This second if statement is for forms using the new button tag (see Bootstrap demo). Delete if using input type="button" element.
if (newNum == 5)
$('#btnAdd_1').attr('disabled', true).text("You've reached the limit"); // value here updates the text in the 'add' button when the limit is reached
});
$('#btnDel_1').click(function () {
// Confirmation dialog box. Works on all desktop browsers and iPhone.
if (confirm("Are you sure you wish to remove this question? This cannot be undone."))
{
var num = $('.clonedInput_1').length;
// how many "duplicatable" input fields we currently have
$('#entry' + num).slideUp('slow', function () {$(this).remove();
// if only one element remains, disable the "remove" button
if (num -1 === 1)
$('#btnDel_1').attr('disabled', true);
// enable the "add" button. IMPORTANT: only for forms using input type="button" (see older demo). DELETE if using button element.
$('#btnAdd_1').attr('disabled', false).prop('value', "Add email");
// enable the "add" button. IMPORTANT: only for forms using the new button tag (see Bootstrap demo). DELETE if using input type="button" element.
$('#btnAdd_1').attr('disabled', false).text("Add email");});
}
return false; // Removes the last section you added
});
// Enable the "add" button
$('#btnAdd_1').attr('disabled', false);
// Disable the "remove" button
$('#btnDel_1').attr('disabled', true);
$('#btnAdd_2').click(function () {
var num = $('.clonedInput_2').length, // Checks to see how many "duplicatable" input fields we currently have
newNum = new Number(num + 1), // The numeric ID of the new input field being added, increasing by 1 each time
newElem = $('#phone' + num).clone().attr('id', 'phone' + newNum).fadeIn('slow'); // create the new element via clone(), and manipulate it's ID using newNum value
// H2 - section
newElem.find('.label_phone').attr('id', 'ID' + newNum + '_reference').attr('name', 'ID' + newNum + '_reference').html('Answer #' + newNum);
// Phone - text
newElem.find('.label_phone').attr('for', 'ID' + newNum + '_phone_number');
newElem.find('.input_phone').attr('id', 'ID' + newNum + '_phone_number').attr('name', 'ID' + newNum + '_phone_number').val('');
// Insert the new element after the last "duplicatable" input field
$('#phone' + num).after(newElem);
$('#ID' + newNum + '_title').focus();
// Enable the "remove" button. This only shows once you have a duplicated section.
$('#btnDel_2').attr('disabled', false);
// Right now you can only add 4 sections, for a total of 5. Change '5' below to the max number of sections you want to allow.
// This first if statement is for forms using input type="button" (see older demo). DELETE if using button element.
if (newNum == 4)
$('#btnAdd_2').attr('disabled', true).prop('value', "You've reached the limit"); // value here updates the text in the 'add' button when the limit is reached
// This second if statement is for forms using the new button tag (see Bootstrap demo). DELETE if using input type="button" element.
if (newNum == 4)
$('#btnAdd_2').attr('disabled', true).text("You've reached the limit"); // value here updates the text in the 'add' button when the limit is reached
});
$('#btnDel_2').click(function () {
// Confirmation dialog box. Works on all desktop browsers and iPhone.
if (confirm("Are you sure you wish to remove this answer? This cannot be undone."))
{
var num = $('.clonedInput_2').length;
// how many "duplicatable" input fields we currently have
$('#phone' + num).slideUp('slow', function () {$(this).remove();
// if only one element remains, disable the "remove" button
if (num -1 === 1)
$('#btnDel_2').attr('disabled', true);
// enable the "add" button. IMPORTANT: only for forms using input type="button" (see older demo). DELETE if using button element.
$('#btnAdd_2').attr('disabled', false).prop('value', "Add phone");
// enable the "add" button. IMPORTANT: only for forms using the new button tag (see Bootstrap demo). DELETE if using input type="button" element.
$('#btnAdd_2').attr('disabled', false).text("Add phone");});
}
return false; // Removes the last section you added
});
// Enable the "add" button
$('#btnAdd_2').attr('disabled', false);
// Disable the "remove" button
$('#btnDel_2').attr('disabled', true);
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="container theme-container">
<div id="wrapper">
<form action="#" method="post" id="sign-up_area" role="form">
<h2 id="reference" name="reference" class="heading-reference">Theme</h2>
<fieldset>
<div class="row">
<!-- Text input-->
<div class="form-group col-sm-6">
<input id="first_name" name="first_name" type="text" placeholder="Value 1" class="input_fn form-control" required="">
</div>
</div>
<!-- Text input-->
<div class="row">
<div class="form-group col-sm-6">
<input id="last_name" name="last_name" type="text" placeholder="Value 2" class="input_ln form-control">
</div>
</div>
<div class="row">
<!-- Begin cloned email section -->
<div id="entry1" class="clonedInput_1 col-sm-8">
<!-- Text input-->
<div class="form-group">
<label class="label_email control-label" for="email_address">Question #1:</label>
<input id="email_address" name="email_address" type="text" class="input_email form-control">
</div>
</div><!-- end #entry1 <-->
<!-- Button (Double) -->
<p class="question-buttons">
<button type="button" id="btnAdd_1" name="btnAdd" class="btn btn-primary">Add question</button>
<button type="button" id="btnDel_1" name="btnDel" class="btn btn-danger"><span class="ui-button-text">Remove question</span></button>
</p>
</div>
<div class="row">
<!-- Begin cloned phone section -->
<div id="phone1" class=" col-sm-6 clonedInput_2">
<!-- Text input-->
<div class="form-group ">
<label class="label_phone control-label" for="phone_number">Answer #1:</label>
<input id="phone_number" name="phone_number" type="tel" class="input_phone form-control" >
</div>
</div><!-- end #entry2 -->
<!-- Button (Double) -->
<p class="answer-buttons">
<button type="button" id="btnAdd_2" name="btnAdd_2" class="btn btn-primary">Add answer</button>
<button type="button" id="btnDel_2" name="btnDel_2" class="btn btn-danger">Remove answer</button>
</p>
</div>
</form>
<p>
<button type="button" id="btnAdd3" name="btnAdd" class="btn btn-info">add section</button>
<button type="button" id="btnDel3" name="btnDel" class="btn btn-danger">remove section above</button>
</p>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
