Как отправить данные из модальной формы бутстрапа?

У меня есть страница с помощью modal, чтобы получить электронную почту пользователей, и я хочу добавить ее в список подписчиков (которая является моделью django). Вот модальный код для этого:

<div id="notifications" class="modal hide fade" role="dialog" ara-labelledby="Notification" aria-hidden="true">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">X</button>
        <h4>Subscribe to Status Notifications</h4>
    </div>
    <form>
        <div class="modal-body">
            <input type="email" placeholder="email"/>
            <p>This service will notify you by email should any issue arise that affects your plivo service.</p>
        </div>
        <div class="modal-footer">
            <input type="submit" value="SUBMIT" class="btn"/>
        </div>
    </form>
</div>

Я попытался посмотреть в документе Twitter Bootstrap, но он действительно минимален. Я хочу, чтобы POST данные передавались в django view, которые прослушивали POST requests.

Это очень важно. Я использую regex для сравнения формата электронной почты перед сохранением идентификатора электронной почты. Поэтому, если адрес электронной почты does not соответствует regex, представление возвращает Invalid Email. Поэтому я хотел бы уведомить пользователя об этом в самом modal. Но я действительно не знаю, как это сделать. Кто-то, пожалуйста, помогите.

UPDATE:

Пробовал это на основе ответа karthikr:

<form id="subscribe-email-form" action="/notifications/subscribe/" method="post">
    <div class="modal-body">
    <input type="email" placeholder="email"/>
        <p>This service will notify you by email should any issue arise that affects your service.</p>
    </div>
    <div class="modal-footer">
    <input id="subscribe-email-submit" type="submit" value="SUBMIT" class="btn" />
    </div>
</form>

<script>
    $(function(){
       $('subscribe-email-form').on('submit', function(e){
            e.preventDefault();
            $.ajax({
                url: "/notifications/subscribe/",
                type: "POST",
                data: $("subscribe-email-form").serialize(),
                success: function(data){
                    alert("Successfully submitted.")
                }
            });
       }); 
    });
</script>

Что-то меня смущает. Как насчет события onclick modal button?

Я понял! Я добавил name="Email" в строку <input type="email" placeholder="email"/>

Поле django ищет Email Field. Поэтому в моем представлении django код:

request.POST.get("Email", ''), поэтому указывается имя поля.

Но он возвращает меня к URL-адресу, где я отправляю сообщения. Я хочу, чтобы он отображал предупреждение на той же странице.

ОБНОВЛЕНИЕ 2:

Итак, часть 1 работает. Как в сообщениях работают. Теперь мне нужно показать модальность успеха или неудачи. Вот что я пытаюсь:

Итак, я создал этот модал с помощью textarea:

<div id="subscription-confirm" class="modal hide fade in" aria-hidden="true">
    <div class="modal-header">
        <label id="responsestatus"></label>
    </div>
</div>

И javascript:

<script>
    $(function(){
        $('#subscribe-email-form').on('submit', function(e){
            e.preventDefault();
            $.ajax({
                url: 'notifications/subscribe/',
                type: 'POST',
                data: $('#subscribe-email-form').serialize(),
                success: function(data){
                     $('#responsestatus').val(data);
                     $('#subscription-confirm').modal('show');    
                }
            });
        });
    });
</script>

Итак, модальный появляется. но данные не set в поле label modal.

Ответы

Ответ 1

Вам нужно обработать его через ajax submit.

Что-то вроде этого:

$(function(){
    $('#subscribe-email-form').on('submit', function(e){
        e.preventDefault();
        $.ajax({
            url: url, //this is the submit URL
            type: 'GET', //or POST
            data: $('#subscribe-email-form').serialize(),
            success: function(data){
                 alert('successfully submitted')
            }
        });
    });
});

Лучше всего использовать форму django, а затем отобразить следующий фрагмент:

<form>
    <div class="modal-body">
        <input type="email" placeholder="email"/>
        <p>This service will notify you by email should any issue arise that affects your plivo service.</p>
    </div>
    <div class="modal-footer">
        <input type="submit" value="SUBMIT" class="btn"/>
    </div>
</form>

через контекст - пример: {{form}}.