javascript - modals - modal backdrop

¿Cómo POSTAR los datos de una forma modal de bootstrap?

Question

Tengo una página que utiliza un modal para recibir correos electrónicos de los usuarios y quiero agregarla a una lista de suscriptores (que es un modelo de django). Aquí está el código modal para eso:

<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>

Intenté buscar en el Twitter Bootstrap doc, pero realmente es mínimo. Quiero POST los datos a una django view esté escuchando las POST requests .

Esto es lo esencial. Estoy usando regex para comparar el formato del correo electrónico antes de almacenar la identificación del correo electrónico. Entonces, si el correo electrónico does not coincide con la regex la vista devuelve un Invalid Email . Así que me gustaría notificar al usuario acerca de eso dentro del propio modal . Pero realmente no tengo idea de cómo hacer esto. Alguien por favor ayuda.

ACTUALIZAR:

Intentado esto basado en la respuesta de 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>

Hay algo que me está confundiendo. ¿Qué pasa con el evento onclick del modal button ?

¡Entiendo! Agregué name="Email" en la línea <input type="email" placeholder="email"/>

El campo django está buscando el Email Field . Así que en mi vista django el código es:

request.POST.get("Email", '''') para especificar el nombre del campo ayuda.

Pero me lleva a la url donde estoy publicando. Quiero que muestre una alerta en la misma página.

ACTUALIZACIÓN 2:

Así que la parte 1 está funcionando. Como en los puestos están trabajando. Ahora necesito mostrar un modal para el éxito o el fracaso. Heres lo que estoy tratando:

Así que creé este modal con un textarea :

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

Y el 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>

Así surge el modal. pero los datos no se set en el campo de label del modal .

Answer 1

Estaba enfrentando el mismo problema, no pude publicar el formulario sin ajax. Pero encontré la solución, espero que pueda ayudar y el tiempo de alguien.

<form name="paymentitrform" id="paymentitrform" class="payment"
                    method="post"
                    action="abc.php">
          <input name="email" value="" placeholder="email" />
          <input type="hidden" name="planamount" id="planamount" value="0">
                                <input type="submit" onclick="form_submit() " value="Continue Payment" class="action"
                                    name="planform">

                </form>

Puede enviar el formulario de publicación, desde bootstrap modal usando el código de javascript / jquery que se encuentra a continuación: llame a la función de abajo haciendo clic en el botón de entrada de entrada

    function form_submit() {
        document.getElementById("paymentitrform").submit();
   }  

Answer 2

Necesitas manejarlo a través de ajax submit.

Algo como esto:

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

Una mejor manera sería usar un formulario django y luego generar el siguiente fragmento de código:

<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>

a través del contexto - ejemplo: {{form}} .