通过 Ajax 提交模态表单

Question

我的问题实体有一个正常形式。

该表单中有一个模态表单，允许用户为他们的问题添加额外的标签。

这是我的模态表单的图像：

这是我的模态表单的树枝模板：

<div id="mymodal" class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h4 class="modal-title" id="myModalLabel">Add New Tag</h4>
        </div>
        <form class="tagForm" id="tag-form" action="{{ path('addTag') }}" method="post" enctype="multipart/form-data">
            <div class="modal-body">
                <label for="tagName">Tag Name: </label>
                <input id="tagName" class="form-control" type="text"/>

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <input id="tag-form-submit" type="submit" class="btn btn-primary" value="Add Tag">
            </div>
        </form>
    </div>
</div>

查看我的模态表单的脚本：

$('#addTag').click(function(e) {
        e.preventDefault();
        $('#mymodal').modal();
    });

我的模态表单提交脚本：

$(function() {

    $('#tag-form').submit(function() {
        $.ajax({
            type: "POST",
            url: "{{ path('addTag') }}",
            data: $('form.tagForm').serialize(),
            success: function(response) {
                alert(response['response']);
            },
            error: function() {
                alert('Error');
            }
        });
        return false;
    });
});

我的问题是每次点击添加标签按钮，包括问题表单在内的所有表单也都提交了。

我真正想要的只是提交模态表单。

Answer 1

看起来你在提交事件上触发了这个，这就是为什么它......提交？也许这会更好？

$(function() {

$('#tag-form-submit').on('click', function(e) {
    e.preventDefault();
    $.ajax({
        type: "POST",
        url: "{{ path('addTag') }}",
        data: $('form.tagForm').serialize(),
        success: function(response) {
            alert(response['response']);
        },
        error: function() {
            alert('Error');
        }
    });
    return false;
});
});