使用HTML和Bootstrap的动态表单字段

时间:2015-04-26 02:02:12

标签: javascript html twitter-bootstrap

我正在尝试使用此网站的代码创建动态表单字段 http://bootsnipp.com/snippets/featured/dynamic-form-fields-add-amp-remove-bs3

这是我修改后的一段代码



<div class="control-group" id="fields">
        <div class="controls"> 
        	<form role="form" autocomplete="off">
        		<div class="entry input-group col-xs-3">
        			<input class="form-control" name="fields[]" type="text" placeholder="Type something" />
        			<span class="input-group-btn">
        				<button class="btn btn-success btn-add" type="button">
        					<span class="glyphicon glyphicon-plus"></span>
        				</button>
        			</span>
        		</div>
        		<!--Submit Button-->
        		<div class="form-group">
        			<button type="submit" class="btn btn-default" >Search</button>
        		</div>
        	</form>
        	<br>
        </div>
</div>
&#13;
&#13;
&#13;

问题是,每当我按下添加字段按钮时,新字段就会出现在搜索按钮下方。我想这是因为表格之前的div class="controls"。如何解决这个问题,以便仍然在搜索上方添加动态字段?

1 个答案:

答案 0 :(得分:1)

你有div的层次结构或其他东西。我要做的是评论你当前的代码。然后从bootsnip复制HTML,确保它有效,然后向后工作以获得之前的位置,即...自定义它。希望有所帮助,但是我的代码中没有足够的信息,并且从bootsnip页面可以正常工作。非常简单的代码,可能是一些愚蠢的东西被忽视了。当涉及到这些组件时,你的div层次结构就是一切。

你知道吗,只需将表格移到一切......?

也没有
<div class="control-group" id="fields"> 
</div>

在最高级别。