gosulove gosulove - 3 months ago 19
HTML Question

Bootstrape Dynamic Form Fields not working when adding inside a form with Form Submit

enter image description here

From the screenshot left side, its Dynamic Form Fields working fine but when i combine with a Form, all the buttons are not working.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<script>
$(function()
{
$(document).on('click', '.btn-add', function(e)
{
e.preventDefault();

var controlForm = $('.controls form:first'),
currentEntry = $(this).parents('.entry:first'),
newEntry = $(currentEntry.clone()).appendTo(controlForm);

newEntry.find('input').val('');
controlForm.find('.entry:not(:last) .btn-add')
.removeClass('btn-add').addClass('btn-remove')
.removeClass('btn-success').addClass('btn-danger')
.html('<span class="glyphicon glyphicon-minus"></span>');
}).on('click', '.btn-remove', function(e)
{
$(this).parents('.entry:first').remove();

e.preventDefault();
return false;
});
});

</script>
<style>
.entry:not(:first-of-type)
{
margin-top: 10px;
}

.glyphicon
{
font-size: 12px;
}
</style>


HTML

<div class="container">
<form id="form_submit" action="../controller/add_options.php?add=add" method="POST">
<div class="form-group">
<label>Name</label>
<input type="text" name="option_name" class="form-control input-lg" required>
</div>

<div class="form-group">

<div class="control-group" id="fields">
<label class="control-label" for="field1">Options</label>
<div class="controls">
<form role="form" autocomplete="off">
<div class="entry input-group col-xs-6">
<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>
</form>
<br>
<small>Press <span class="glyphicon glyphicon-plus gs"></span> to add more option values</small>
</div>
</div>
</div>

<div class="form-group">
<button type="submit" class="btn btn-success btn-block btn-lg"><span class='glyphicon glyphicon-plus'></span> Add Category</button>
</div>
</form>
</div>


The error occurred when I adding in .

<form></form>


So that means the buttons must have conflict with each other. Anyone know whats wrong with my coding?

Answer

You are nesting a form within another form.

Do you really need the following in your second file?

<form role="form" autocomplete="off">
 ...
</form>

What if you replace that with

<div class="d1"> 
...
</div>

And then in your first file replace

var controlForm = $('.controls form:first'),

With

var controlForm = $('.controls .d1:first'),