CODEWITHSUNDEEP
javascriptjqueryhtmltwitter-bootstraptwitter-bootstrap-3
gosulove
gosulove

Reputation: 1645

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?

Upvotes: 2

Views: 2962

Answers (2)

Gynteniuxas
Gynteniuxas

Reputation: 7103

I have solved that in a little bit different way. For some reasons @Suraiya Khan's solution did not work to me, not sure why but if it works for you, it's probably better to stick to that other solution, not mine. I'm still leaving here in case if someone same results as me. I'm leaving <form> tags (but changed other part, which might not be good).

In JavaScript part I changed:

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

To:

var controlForm = $('.controls'),

That would actually be enough to make it work again, but the first field goes above a note (Press + to add more option values) so to solve this I moved it above all fields (this is where I changed that other part).

This piece of code was moved below <div class="controls"> (and removed <br> because it leaves unnecessary space between first and second fields):

<div class="controls">
    <small>Press <span class="glyphicon glyphicon-plus gs"></span> to add more option values</small>

And a side note:

<input class="form-control" name="fields[]" type="text" placeholder="Type something" />

You do not need to add / at the end of tag because it gives no meaning at all. And code looks better without it. It is fine to write:

<input class="form-control" name="fields[]" type="text" placeholder="Type something">

Upvotes: 3

Suraiya Khan
Suraiya Khan

Reputation: 102

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'),

Upvotes: 3

Related Questions