Открыто modal on submit

Question

У меня есть форма и кнопка загрузки, и когда я нажимаю кнопку, она переходит на другую страницу, но мне нужно, когда я нажимаю кнопку, чтобы открыть модальную, я думаю, что функция preventdefault или что-то в этом роде, но я буду нуждаться в помощи для этого, и это мой код

var request = false; 
 

 
jQuery(document).ready(function() { 
 
    jQuery('#sonata_add_basket_submit').on('submit', function (e) { 
 
     e.preventDefault(); 
 

 
     if (false === request) { 
 
      request = true; 
 
      var self = $(this); 
 

 
      jQuery.ajax({type: self.attr('method'), url: self.attr('action'), data: self.serialize(), 
 
       success: function (data) { 
 
        if (data) { 
 
         request = false; 
 
         jQuery(self.attr('data-target')).html(data).modal('show'); 
 
        } 
 
       } 
 
      }); 
 
     } else { 
 
      return false; 
 
     } 
 
    }); 
 
});

<form id="form_add_basket_button_{{ product.id }}" class="form-horizontal" action="{{ url('sonata_basket_add_product') }}" method="POST"{% if provider.getOption('product_add_modal') %} data-target="#add_basket_modal_{{ product.id }}"{% endif %}> 
 
       
 
    <button type="submit" class="homecart" id="sonata_add_basket_submit" data-target="#add_basket_modal_{{ product.id }}" data-toggle="modal"{% if sonata_product_stock(product) == 0 %} disabled{% endif %}> 
 
        <i class="categoryicon2"></i> {% trans from 'SonataProductBundle' %}sonata.product.btn_add{% endtrans %} 
 
       </button> 
 

 
       {{ form_rest(form) }} 
 
      </form>

Мой код не хорошо, где ошибка?

Answer 1

Вам нужно привязать представить обработчик к форме, а не к кнопке:

jQuery('#form_add_basket_button_{{ product.id }}').on('submit', function (e) { 

ВИДЕТЬ API для примеров и объяснений: https://api.jquery.com/submit/