아약스를 통해 모달 양식 제출

Question

나는 내 질문 엔티티에 대한 일반 양식을 가지고 있습니다.

해당 양식 내에는 사용자가 질문에 태그를 추가 할 수있는 모달 형식이 있습니다.

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

내 모달 양식 제출에 대한 10

스크립트가 :

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