我试图在bootstrap中创建一个包含多个字段的动态表单,似乎我需要在表单元素中附加一个非常冗长的字符串。我很确定应该有更有效的方法来做到这一点。如果您能告诉我其他方法,我感谢您。
HTML:
<!-- start of the column with properties(form-control)-->
<div class="col-lg-8" id="property-col">
<div class="container">
<form class="form">
<div class="row">
<h3>Properties</h3>
<br>
</div>
<div class="row">
<div class="form-group">
<fieldset class="form-inline">
<label class="control-label">Image Size:</label>
<select class="form-control" id="image-size-selector">
<option value="128">128×128</option>
<option value="256">256×256</option>
<option value="512">512×512</option>
<option value="1024">1024×1024</option>
</select>
</fieldset>
</div>
</div>
<div class="row" id="dynamic_form">
<div class="form-group form-horizontal">
<label>Primitives</label>
<div class="container">
<div class="form-inline" id="primitive_fields">
<select class="input-small form-control" id="primitive-selector" name="PrimitiveChoose[]">
<option value=" " disabled selected>primitive</option>
<option value="sphere">sphere</option>
<option value="triangle">triangle</option>
</select>
<input type="number" class="input-small form-control" id="diameter" name="Diameter[]" step="any" placeholder="diameter(D)">
<input type="text" class="input-small form-control" id="sphere-position" name="SpherePosition[]" placeholder="(x, y, z)">
<select class="input-small form-control" id="circle-color-selector" name="CircColorSelect[]" >
<option value=" " disabled selected>color</option>
<option value="red">red</option>
<option value="blue">blue</option>
<option value="green">green</option>
<option value="yellow">yellow</option>
</select>
<button type="button" class="btn btn-success btn-add" id="add_more"> <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
</button>
</div>
</div>
</div>
</div>
<div class="row">
<div class="form-group">
<fieldset class="form-inline">
<label class="control-label">Point Light Position:</label>
<input type="text" class="input-small form-control" id="light-position" placeholder="(x, y, z)" >
</fieldset>
</div>
</div>
JavaScript的:
function getHTMLString() {
var complex_html = [
'<div class="row" id="primitive-form">',
'<div class="form-group form-horizontal">',
'<div class="container">',
'<div class="form-inline" id="primitive_fields">',
'<select class="input-small form-control" id="primitive-selector" name="PrimitiveChoose[]">',
'<option value=" " disabled selected>primitive</option>',
'<option value="sphere">sphere</option>',
'<option value="triangle">triangle</option>',
'</select>',
'<input type="number" class="input-small form-control" id="diameter" name="Diameter[]" step="any" placeholder="diameter(D)">',
'<input type="text" class="input-small form-control" id="sphere-position" name="SpherePosition[]" placeholder="(x, y, z)">',
'<select class="input-small form-control" id="circle-color-selector" name="CircColorSelect[]">',
'<option value=" " disabled selected>color</option>',
'<option value="red">red</option>',
'<option value="blue">blue</option>',
'<option value="green">green</option>',
'<option value="yellow">yellow</option>',
'</select>',
'<button type="button" class="btn btn-success btn-add" id="remove_more"> <span class="glyphicon glyphicon-minus" aria-hidden="false"></span></button>',
'</div>',
'</div>',
'</div>',
'</div>',
].join('');
return complex_html;
}
$(document).ready(function() {
var formCount = 0;
$('#add_more').on('click', function(e) {
if (formCount < 4) {
var html = getHTMLString();
var element = $(html);
$('#dynamic_form').append(html);
formCount++;
} else {
return;
}
});
$('#dynamic_form').on("click","#remove_more", function(e){ //user click on remove text
e.preventDefault(); $(this).parent('div').parent('div').parent('div').parent('div')[0].remove(); formCount--;
})
});
答案 0 :(得分:0)
为您的form-inline
另一个课程提供克隆
var formRow = $('.div_to_clone').first();
var clone = formRow.clone();
$('#dynaic_form').append(clone);