Dynamic form field using HTML, and Bootstrap

Question

I was trying to create a dynamic form field using the code from this site
http://bootsnipp.com/snippets/featured/dynamic-form-fields-add-amp-remove-bs3

Here is a piece of the code after I modify it

<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>

The problem is, whenever I press the add field button, the new field goes below the Search button. I guess this is because of div class="controls" before the form. How can I solve this so that the dynamic field is still added above the search?

Eric Bishard · Accepted Answer · 2015-04-26 02:28:41Z

1

You have got the hierarchy of the divs or something off. What I would do is comment out your current code. Then copy in the HTML from bootsnip make sure it works and then work backwards to get where you were before, ie.. customizing it. Hope that helps, but I don't have enough information from your code and it works fine from the bootsnip page. Pretty simple code, probably something silly is being overlooked. Your div hierarchy is everything when it comes to these components.

You know what, just move the form around everything...? Also you don't have the

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

At the highest level.

edited Apr 26, 2015 at 2:28

answered Apr 26, 2015 at 2:22

Eric Bishard

5,3817 gold badges54 silver badges76 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Eric Bishard Over a year ago

Your code does seem like it should work though..... Im looking into this further.

jamesalone Over a year ago

Moving the form around everything? Okay, I've put it at the highest level but it's still having the same result.

Collectives™ on Stack Overflow

Dynamic form field using HTML, and Bootstrap

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related