通过Ajax提交模态表单

Question

我的问题实体有一个正常的表格.

在该表单中有一个模态表单,允许用户为他们的问题添加其他标签.

这是我的模态形式的图像:

这是我的模态形式的twig模板:

<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;
});
});