Jquery 通过Ajax提交模式表单

我的问题实体有一个标准形式

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

以下是我的模态形式的图像：

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

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

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

我的问题是，每次单击add tag按钮时，包括问题表单在内的所有表单都会提交

---

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

它看起来像是您在提交事件中触发的，这就是为什么它…提交？也许这样会更好

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

---

谢谢你，兄弟，这很有效。我也认为这是问题所在，但我不知道如何在jQuery上实现正确的代码，因为我只是一个新手。很高兴提供帮助，如果您想了解更多关于jQuery的知识，我可以向您推荐一系列视频教程，谢谢。我已经看了MyBringback关于jQuery的教程，看起来不错。我也去看这部电影。