Невозможно отправить форму с помощью AJAX

Question

У меня есть сайт в Django, и мне нужна форма, представленная через AJAX, чтобы избежать перезагрузки страницы и выполнить что-то в фоновом режиме. Однако я не могу этого сделать.

Вот мой код формы:

<a href="#" class="trigger">Request a call back</a> 
<div class="head hide">No Phone Number on Record</div> 
<div class="content hide"> 

<form method="post" id="phone-form" action="{% url 'customer:profile-update' %}"> 
    {% csrf_token %} 
    <input type="text" id="id_first_name" maxlength="255" name="first_name" 
      value="{% if user.is_authenticated %}{{ user.first_name }}{% endif %}" hidden> 
    <input type="text" id="id_last_name" maxlength="255" name="last_name" 
      value="{% if user.is_authenticated %}{{ user.last_name }}{% endif %}" hidden> 
    <input type="email" id="id_email" maxlength="255" name="email" 
      value="{% if user.is_authenticated %}{{ user.email }}{% endif %}" hidden> 
    <input type="text" id="id_date_of_birth" maxlength="128" name="date_of_birth" 
      value="{% if user.is_authenticated %}{% if user.date_of_birth %} 
      {{ user.date_of_birth }}{% endif %}{% endif %}" hidden> 
    <div class="form-group has-feedback"> 
     <label for="id_phone_number">Where do we reach you?</label> 
     <input 
      id="id_phone_number" 
      name="phone_number" 
      type="text" 
      class="form-control" 
      placeholder="772734878"> 
     <div align="center" style="padding-top: 10px;"> 
     {% if user.is_authenticated %} 
      <small>We will add this number to your profile for future communications.</small> 
     {% endif %} 
     </div> 
    </div> 
    <button type="submit" id="id_update_phone_number" class="btn btn-default btn-block"> 
     Request a Call 
    </button> 
</form> 

</div> 

И код JavaScript:

<script> 
$(document).ready(function(){ 
    $('.ph-in>.trigger').popover({ 
     html: true, 
     placement: 'bottom', 
     title: function() { 
      return $(this).parent().find('.head').html(); 
     }, 
     content: function() { 
      return $(this).parent().find('.content').html(); 
     } 
    }); 

    $('#phone-form').on('submit', function(event){ 
     event.preventDefault(); 
     alert("form submitted!") // sanity check 
    }); 
}); 
</script> 

Что может быть не так? Скрипт для popover работает отлично, а также другие элементы, связанные с jQuery, - это значит, что jQuery загружается должным образом.

Answer 1

Причина заключается в том, что .content фактически клонировали и впрыскивается в DOM внутри, самого .popover. Таким образом, submit() никогда не привязывается к форме, показанной внутри popover, так как она добавляется позже. Так что, если мы привязываем событие к документу в качестве делегированных обработчик событий, то он будет работать с формой, показанной внутри .popover тоже:

$(document).on('submit','#id_update_phone_number',function(){ 
    alert('Form Submitted'); 
    return false; 
}); 

Answer 2

Вы не намерены подавать намеренно. Но вам также не хватает вызова для отправки данных формы с помощью AJAX.

Изменить вы на JQuery отправить вызов

$('#phone-form').on('submit', function(event){ 
    event.preventDefault(); 
    $.ajax(
     url: {% url 'customer:profile-update' %}, 
     data: $("#phone-form").serialize() 
     success: function { 
      alert("form submitted!") // sanity check 
     } 
    );  

});