Question

我的表格里面有另一种形式。

每次我提交内部表格时，外部表格也会提交。我想通过ajax提交我的内部表格。

这是我的树枝模板：

<div id="askDiv">
        {{ form_start(form, { 'attr' : { 'novalidate' : 'novalidate', 'class' : 'col-md-offset-3 form-control-static col-md-7' } }) }}
<div class="col-lg-12" style="margin-bottom: 30px;">
    <span id="titleLabel"  data-toggle="popover" data-container="body" data-placement="left" data-trigger="manual" data-html="true" data-content='{{form_errors(form.title)}}' class="col-lg-1 text-left askLabels">{{ form_label(form.title) }}</span>
            {{form_widget(form.title, { 'attr' : { 'class' : 'right form-control col-lg-8' } })}}
</div>
        {{ form_widget(form.content, { 'attr' : { 'data-toggle' : 'popover', 'data-container' : 'body', 'data-placement' : 'left', 'data-trigger' : 'manual', 'data-html' : 'true', 'data-content' : form_errors(form.content), 'class' : 'col-lg-12' } }) }}
<div class="col-lg-12" style="margin-top: 20px;">
    <input id="fieldTags" type="hidden" value="{{ tags|join(',') }}">
    <label id="tagLabel" data-toggle="popover" data-container="body" data-placement="left" data-trigger="manual" data-html="true" data-content='{{form_errors(form.tags)}}' class="col-lg-1 text-left askLabels" for="tagField">Tags</label>
    <div class="col-lg-8">
        {{ form_widget(form.tags) }}
    </div>
    {% if app.user.reputati on >= 100 %}
    <a id="addTag" title="Add New Tag" data-toggle="tooltip modal"  data-placement="left" class="col-lg-3" href="#"><i class="fa fa-plus-circle"></i></a>
    {% endif %}

</div>
<div style="margin-top: 20px; ">
        {{ form_widget(form.submit, { 'attr' : { 'class' : 'col-md-offset-5 col-md-3  btn btn-primary' } }) }}
</div>
<div hidden id="errors">
    {{ form_errors(form.title) }}
    {{ form_errors(form.content) }}
    {{ form_errors(form.tags) }}
    {{ form_errors(form) }}
    {{form_rest(form)}}
</div>

<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('tag_create') }}" method="post">
            <div class="modal-body">
                <label for="tagName">Tag Name: </label>
                <input id="tagName" class="form-control" type="text"/>
            </div>
            <div id="responseDiv" ></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>

我的剧本：

 $(document).ready(function() {

    $('#tag-form').submit(function(e) {
        e.preventDefault();
        var options = {
            url: $('#tag-form').attr('action'),
            type: 'post'
        };
        $('#tag-form').ajaxSubmit(options);
        $('form[name="verysoft_askmebundle_question"]').submit(function(ev) {
            ev.preventDefault();
        });
    });
});

似乎我的表格毕竟没有嵌套。对于那个很抱歉。我目前的问题是，每当我点击其中一个表单的提交按钮时，另一个也提交。

Answer 1

嵌套表单是无效的HTML标记，因为它不受支持，而且根据 HTML5 draft 不属于w3c标准的一部分：

内容模型：流内容，但没有表单元素后代。

因此，您需要将表单分开并应用相同的逻辑但不同的jQuery代码。

防止其他表单提交

1 个答案: