Prevent other forms from submitting - php

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">×</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.