如何动态添加带有引导表单元素的 div？
Posted
技术标签:
【中文标题】如何动态添加带有引导表单元素的 div？【英文标题】：How to add a div with bootstrap form elements dynamically? 【发布时间】：2017-10-25 07:25:48 【问题描述】：这是我的 JS 小提琴：Demo
我已经尝试使用下面的 JS 代码来动态复制表单 框内的元素（表达式 LHS、RHS、运算符、数据类型） 但是，它不起作用。
有人可以帮我解决这个问题吗？此外，一旦我找到有关 javascript/jQuery 的帮助，我将不得不使用 Vue.js 编写它。
任何帮助将不胜感激！谢谢！
$('#addRow').click(function ()
$('<div/>',
'class' : 'child-border', html: GetHtml()
).hide().appendTo('#container').slideDown('slow');
);
function GetHtml()
var len = $('.child-border').length;
var $html = $('.parent-border').clone();
$html.find('[name=lhs]')[0].name="lhs" + len;
$html.find('[name=rhs]')[0].name="rhs" + len;
$html.find('[name=data]')[0].name="data" + len;
$html.find('[name=op]')[0].name="op" + len;
return $html.html();
【问题讨论】：
【参考方案1】：你可以简化一切：
克隆父边框 为每个输入元素更改 name 和 id 将类从父边框切换到子边框并追加。记住：ID 必须是唯一的，并且每个要 ajax 的字段都需要一个名称。
$('#deleteRow').closest('.form-group').hide();
$('#addRow').on('click', function (e)
var len = $('.child-border').length;
$('.parent-border').clone().find(':input').each(function (idx, ele)
ele.name = ele.name + len;
ele.id = ele.id + len;
ele.value = '';
).end().find('.form-group').toggle(true).end()
.toggleClass('parent-border child-border').hide()
.appendTo('#container').slideDown('slow');
);
$('button.btn:contains("Save")').on('click', function (e)
var jsonData = $('form.form-horizontal')
.find(':input:not(button)').get()
.reduce(function (acc, ele)
acc[ele.name || ele.id] = ele.value;
return acc;
, );
console.log(jsonData);
);
$('#container').on('click', '[id^=deleteRow]', function(e)
var jsonData = $(this).closest('.child-border, .parent-border')
.find(':input:not(button)').get()
.reduce(function (acc, ele)
acc[ele.name || ele.id] = ele.value;
return acc;
, );
$(this).closest('.child-border, .parent-border').remove();
console.log(jsonData);
);.navbar-nav li
margin-top: 8px;
margin-bottom: 8px;
.tabs-container
margin-top: 100px;
.parent-border, .child-border
border: 1px solid #CCC;
border-radius: 4px;
padding: 15px;
margin-bottom: 15px;
.btn-circle.btn-lg
width: 50px;
height: 50px;
padding: 10px 16px;
font-size: 18px;
line-height: 1.33;
border-radius: 25px;
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header pull-right">
<ul class="nav navbar-nav">
<li>
<button class="btn btn-md btn-success">Login</button>
</li>
</ul>
</div>
</div>
</nav>
<div class="container">
<div class="row tabs-container">
<div class="col-sm-offset-2 col-sm-8">
<div class="panel with-nav-tabs panel-default">
<div class="panel-heading">
<ul class="nav nav-tabs">
<li class="active"><a href="#tab1default" data-toggle="tab">Rules</a></li>
<li><a href="#tab2default" data-toggle="tab">Events</a></li>
</ul>
</div>
<div class="panel-body">
<div class="tab-content">
<div class="tab-pane fade in active" id="tab1default">
<form class="form-horizontal">
<div class="form-group">
<label class="control-label col-sm-2" for="name">Name:</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="name" name="name"
placeholder="Enter name">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="type">Type:</label>
<div class="col-sm-10">
<select class="form-control" id="type1" name="type1">
<option>Type1</option>
<option>Type2</option>
<option>Type3</option>
<option>Type4</option>
</select>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="type">Description:</label>
<div class="col-sm-10">
<textarea class="form-control" rows="4" cols="50" name="descriptionRules">XYZ
</textarea>
</div>
</div>
<div class="parent-border col-sm-offset-2 col-sm-10">
<div class="form-group">
<div class="col-sm-offset-10">
<button type="button" id="deleteRow" class="btn btn-success btn-circle btn-lg"><i
class="glyphicon glyphicon glyphicon-trash"></i></button>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="type">Expression LHS:</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="elhs" name="elhs"
placeholder="Enter LHS"
name="lhs">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="type">Operator</label>
<div class="col-sm-10">
<select class="form-control" id="op" name="op">
<option><=</option>
<option>>=</option>
<option>!==</option>
<option><</option>
<option>></option>
<option>==</option>
</select>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="erhs">Expression RHS:</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="erhs" name="erhs"
placeholder="Enter RHS"
name="rhs">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="type">Datatype:</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="datatype" name="datatype"
placeholder="Enter datatype" name="datatype">
</div>
</div>
</div>
<div id="container">
</div>
<div class="form-group">
<div class="col-sm-offset-6">
<button type="button" id="addRow" class="btn btn-success btn-circle btn-lg"><i
class="glyphicon glyphicon-plus"></i></button>
</div>
</div>
</form>
</div>
<div class="tab-pane fade" id="tab2default">
<form class="form-horizontal">
<div class="form-group">
<label class="control-label col-sm-2" for="name1">Name:</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="name1" name="name1"
placeholder="Enter name">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="type">Type:</label>
<div class="col-sm-10">
<select class="form-control" id="type" name="type">
<option>Type1</option>
<option>Type2</option>
<option>Type3</option>
<option>Type4</option>
</select>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="type">Description:</label>
<div class="col-sm-10">
<textarea class="form-control" rows="4" cols="50" name="descriptionEvents">XYZ
</textarea>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- /.container -->
<div class="navbar navbar-inverse navbar-fixed-bottom">
<div class="container">
<div class="navbar-footer pull-right">
<ul class="nav navbar-nav">
<li>
<button class="btn btn-md btn-success">Save</button>
</li>
</ul>
</div>
</div>
</div>
</div>【讨论】：
谢谢！有效。如果我必须为所有表单字段及其值生成 JSON 对象，我该怎么做？请帮我解决这个问题？ 当然，慢慢来。你可以使用这个：（codepen.io/jlengstorf/pen/YWJLwz）我需要以 JSON 格式提取所有表单字段的值 有没有办法在子边框元素上创建一个删除按钮？ 请验证。添加的子边框的删除不会发生。此外，每当您填写父边框 div 表单字段并点击“+”时，创建的子边框与“父边框”具有相同的值。它应该生成带有空表单字段的子边框。不是吗？ 哦，太好了！非常感谢，感谢您的时间和努力。非常感谢:) :)以上是关于如何动态添加带有引导表单元素的 div？的主要内容，如果未能解决你的问题，请参考以下文章
如何制作 div，由 jquery 在 woocommerce 结帐表单、动态或完全在表单内添加？