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

Question

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

-1

У меня есть сайт в 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 загружается должным образом.

Gaurav Wadhwani 25 июль 2015, в 12:57

Источник

Теги:

django

javascript

jquery

html

ajax

2 ответа

1

Вы предотвращаете подачу намеренно. Но вам также не хватает вызова для отправки данных формы с помощью 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
       }
    );    

});

SarathChandra 25 июль 2015, в 08:24

0

Да, в настоящее время я просто хочу посмотреть, работает ли вызов скрипта - вот почему я блокирую отправку и показываю предупреждение. Моя идея заключается в том, что если появится предупреждение, я могу начать реализовывать код Ajax.
Gaurav Wadhwani 25 июль 2015, в 11:00

Ещё вопросы

Да, в настоящее время я просто хочу посмотреть, работает ли вызов скрипта - вот почему я блокирую отправку и показываю предупреждение. Моя идея заключается в том, что если появится предупреждение, я могу начать реализовывать код Ajax.

Gaurav Wadhwani · Accepted Answer · 2015-07-25T12-12-00.000Z

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

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