我正在建立电子邮件提交表格。它具有一组需要克隆的字段。在该组中，还需要克隆其他两组字段。为了简化该问题，我将其简化为单个字段。我基于此代码： https://tristandenyer.com/demos/dynamic-form-bootstrap-3-0.html和以下代码： https://tristandenyer.com/demos/dynamic-form-bootstrap-3-3-4-multiple.html
我取得了进步。当我拉出表格时，这些小节是可克隆的。 但是-当我点击整个部分的“克隆”按钮时，它会克隆整个部分，包括克隆的片段，而不仅仅是给我一个。我的“子克隆”按钮不再起作用。
帮助！
$(function () {
$('#btnAdd').click(function () {
var num = $('.clonedInput').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('').
*/
// H2 - section
newElem.find('.heading-reference').attr('id', 'ID' + newNum + '_reference').attr('name', 'ID' + newNum + '_reference').html('Asset #' + newNum);
// 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').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.
if (newNum == 5)
$('#btnAdd').attr('disabled', true).prop('value', "You've reached the limit"); // value here updates the text in the 'add' button when the limit is reached
});
$('#btnDel').click(function () {
// Confirmation dialog box. Works on all desktop browsers and iPhone.
if (confirm("Are you sure you wish to remove this section? This cannot be undone."))
{
var num = $('.clonedInput').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').attr('disabled', true);
// enable the "add" button
$('#btnAdd').attr('disabled', false).prop('value', "add section");});
}
return false; // Removes the last section you added
});
// Enable the "add" button
$('#btnAdd').attr('disabled', false);
// Disable the "remove" button
$('#btnDel').attr('disabled', true);
});
/* Beginning First Sub Cloned Level - ASSET */
$(function () {
$('#btnAdd_1').click(function () {
var num = $('.clonedInput_1').length, // Checks to see how many "duplicatable" input fields we currently have
newAssetCloneNum = new Number(num + 1), // The numeric ID of the new input field being added, increasing by 1 each time
newAssetCloneElem = $('#assetclone' + num).clone().attr('id', 'assetclone' + newAssetCloneNum).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
newAssetCloneElem.find('.label_email').attr('id', 'ID' + newAssetCloneNum + '_reference').attr('name', 'ID' + newAssetCloneNum + '_reference').html('Email #' + newAssetCloneNum);
// Email input - text
newAssetCloneElem.find('.label_email').attr('for', 'ID' + newAssetCloneNum + '_email_address');
newAssetCloneElem.find('.input_email').attr('id', 'ID' + newAssetCloneNum + '_email_address').attr('name', 'ID' + newAssetCloneNum + '_email_address').val('');
// Insert the new element after the last "duplicatable" input field
$('#assetclone' + num).after(newAssetCloneElem);
$('#ID' + newAssetCloneNum + '_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 (newAssetCloneNum == 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 (newAssetCloneNum == 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 email? This cannot be undone."))
{
var num = $('.clonedInput_1').length;
// how many "duplicatable" input fields we currently have
$('#assetclone' + 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);
/* Beginning Second Sub Cloned Level - MARKETS */
$('#btnAdd_2').click(function () {
var num = $('.clonedInput_2').length, // Checks to see how many "duplicatable" input fields we currently have
newMarketCloneNum = new Number(num + 1), // The numeric ID of the new input field being added, increasing by 1 each time
newMarketCloneElem = $('#marketclone' + num).clone().attr('id', 'marketclone' + newMarketCloneNum).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('').
*/
// H2 - section
newMarketCloneElem.find('.label_phone').attr('id', 'ID' + newMarketCloneNum + '_reference').attr('name', 'ID' + newMarketCloneNum + '_reference').html('Phone #' + newMarketCloneNum);
// Phone - text
newMarketCloneElem.find('.label_phone').attr('for', 'ID' + newMarketCloneNum + '_phone_number');
newMarketCloneElem.find('.input_phone').attr('id', 'ID' + newMarketCloneNum + '_phone_number').attr('name', 'ID' + newMarketCloneNum + '_phone_number').val('');
// Insert the new element after the last "duplicatable" input field
$('#marketclone' + num).after(newMarketCloneElem);
$('#ID' + newMarketCloneNum + '_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 (newMarketCloneNum == 5)
$('#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 (newMarketCloneNum == 5)
$('#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 phone number? This cannot be undone."))
{
var num = $('.clonedInput_2').length;
// how many "duplicatable" input fields we currently have
$('#marketclone' + 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);
});<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<meta name="format-detection" content="telephone=no"/>
<title>Asset Upload</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
</head>
<body>
<div id="wrapper">
<div class="col-xs-12 col-med-12">
<form action="#" method="post" id="sign-up_area" role="form">
<!-- Text input-->
<div class="form-group">
<label class="col-md-1 control-label" for="contactemail">Advertiser</label>
<div class="col-md-2">
<input id="advertiser" name="advertiser" type="text" placeholder="" class="form-control input-md" required="">
</div>
</div>
<br><br>
<div class="form-group">
<label class="col-md-1 control-label" for="contactname">Contact Name</label>
<div class="col-md-2">
<input id="contactname" name="contactname" type="text" placeholder="" class="form-control input-md" required="">
</div>
<label class="col-md-1 control-label" for="contactemail">Contact Email</label>
<div class="col-md-2">
<input id="contactemail" name="contactemail" type="text" placeholder="" class="form-control input-md" required="">
</div>
</div>
<br><br>
<!-- Multiple Radios -->
<div class="form-group">
<label class="col-md-2 label_radio control-label" for="adsubmission">Ad files submitted via:</label>
<label class="radio-inline" for="radioitem-0">
<input class="input_radio" type="radio" name="radioitem" id="radioitem-0" value="FTP">
Upload to FTP
</label>
<label class="radio-inline" for="radioitem-1">
<input class="input_radio" type="radio" name="radioitem" id="radioitem-1" value="Download">
Download Link
</label>
<label class="radio-inline" for="radioitem-2">
<input class="input_radio" type="radio" name="radioitem" id="radioitem-2" value="Disk">
Fixed Disk
</label>
</div>
<div style="height: 3px; background: #27AAE1;"></div>
<!-- BEGINNING OF CLONED SECTION-->
<div id="entry1" class="clonedInput">
<h2 id="reference" name="reference" class="heading-reference">Asset #1</h2>
<fieldset>
<!-- Beginning First Sub Cloned Level - ASSET -->
<!-- Begin cloned asset section -->
<div id="assetclone1" class="clonedInput_1">
<!-- Text input-->
<div class="form-group">
<label class="label_email control-label" for="email_address">Email:</label>
<input id="email_address" name="email_address" type="text" placeholder="like this: billybob@example.com" class="input_email form-control">
</div>
</div><!-- end #entry1 -->
<!-- Button (Double) -->
<p>
<button type="button" id="btnAdd_1" name="btnAdd" class="btn btn-primary">Add email</button>
<button type="button" id="btnDel_1" name="btnDel" class="btn btn-danger"><span class="ui-button-text">Remove email</span></button>
</p>
<!-- End First Sub Cloned Level - ASSET -->
<!-- Beginning Second Sub Cloned Level - MARKETS -->
<div id="marketclone1" class="clonedInput_2">
<!-- Text input-->
<div class="form-group">
<label class="label_phone control-label" for="phone_number">Phone:</label>
<input id="phone_number" name="phone_number" type="tel" class="input_phone form-control" placeholder="Phone number">
</div>
</div><!-- end #entry2 -->
<!-- Button (Double) -->
<p>
<button type="button" id="btnAdd_2" name="btnAdd_2" class="btn btn-primary">Add phone</button>
<button type="button" id="btnDel_2" name="btnDel_2" class="btn btn-danger">Remove phone</button>
</p>
<!-- End Second Sub Cloned Level - MARKETS -->
</fieldset>
</div> <!-- end #entry1 -->
<!-- Button (Double) -->
<div class="col-md-4">
<button type="button" id="btnAdd" name="btnAdd" class="btn btn-info">Add Another Asset</button>
<button type="button" id="btnDel" name="btnDel" class="btn btn-danger">Remove Asset Above</button>
</div>
<br><br><br>
<!-- Textarea -->
<div class="form-group">
<label class="col-md-1 control-label" for="notes">Notes:</label>
<div class="col-md-5">
<textarea id="notes" name="notes" class="form-control" onfocus="this.value='';" placeholder="Thank you for your business!"></textarea>
</div>
</div>
<br><br><br><br>
<!-- Multiple Checkboxes (inline) -->
<div class="checkbox">
<label class="col-md-4">
<input type="checkbox" value="" required="">I have reviewed all of the above information and confirmed that it is accurate.</label>
</div>
<br>
<!-- Submit Button DOES NOT WORK-->
<div class="form-group">
<div class="col-md-4">
<button id="submit" name="submit" class="btn btn-success">Submit</button>
</div>
</div>
<br><br>
</form>
</div><!-- end column 12 -->
</div> <!-- end wrapper -->
</body>
</html>