防止其他表单提交

Question

I have a form which has another form inside it.

Everytime I submit the inner form, the outer form also submits. I would just like to submit my inner form via ajax.

Here's my twig template:

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

My Script:

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

Seems like my forms aren't nested after all. Sorry about that. My current problem is that everytime I hit the submit button of one of the forms, the other one submits also.

Answer 1

Nested forms is invalid HTML markup since it's not supported and not part of the w3c standard according to HTML5 draft:

Content model: Flow content, but with no form element descendants.

So you'll need separate your forms and apply the same logic but different jQuery code.