Question

从截图左侧，其动态表单字段工作正常，但当我与表单结合时，所有按钮都不起作用。

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

添加时发生错误。

<form></form>

这意味着按钮必须相互冲突。有人知道我的编码有什么问题吗？

Answer 1

我已经用一点点不同的方式解决了这个问题。出于某些原因@Suraiya Khan的解决方案对我不起作用，不确定为什么，但如果它适合你，那么坚持其他解决方案可能更好，而不是我的。如果有人和我一样的话，我还是会离开这里。我要离开<form>标签（但改变了其他部分，这可能不太好）。

在JavaScript部分我改变了：

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

要：

var controlForm = $('.controls'),

这实际上足以使它再次起作用，但是第一个字段超过了一个音符（按+以添加更多选项值）所以为了解决这个问题，我把它移到了所有字段之上（< em>这是我改变其他部分的地方）。

这段代码移到<div class="controls">下方（并移除了<br>，因为它在第一个和第二个字段之间留下了不必要的空格）：

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

旁注：

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

您无需在代码末尾添加/，因为它根本没有任何意义。没有它，代码看起来会更好。写得很好：

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

Answer 2

您正在将表单嵌套在另一个表单中。

您真的需要在第二个文件中使用以下内容吗？

mainFrameInput = document.createElement("input"); mainFrameInput.className = "item"; mainFrameInput.style.display='none'; mainFrameInput.setAttribute('type', 'checkbox'); mainFrameInput.setAttribute('id', GnId);

如果用

替换它会怎么样？

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

然后在你的第一个文件中替换

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

用

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

使用表单提交在表单内添加时，Bootstrape动态表单字段不起作用

2 个答案: