如何从模态形式的Bootstrap中发布数据？

Question

我有一个使用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 that's listening forPOST`请求​​。

这是最基本的。我regex用来比较电子邮件的格式，然后再存储电子邮件ID。因此，如果电子邮件does not匹配，regex则视图返回Invalid Email。因此，我想通知用户有关它modal本身的信息。但是我真的不知道该怎么做。有人请帮忙。

更新1

根据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。

Answer 1

您需要通过ajax提交来处理。

像这样：

$(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}}。