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

Question

我有一个页面使用a 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用来比较电子邮件的格式,然后再存储电子邮件ID.因此,如果电子邮件does not匹配,regex则视图返回Invalid Email.所以我想在用户内部通知用户modal.但我真的不知道如何做到这一点.有人请帮忙.

更新:

根据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", '') 所以指定字段名称有帮助.

但它需要我到我发布的网址.我希望它在同一页面中显示警报.

更新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}}.

Answer 2

我面临着同样的问题，如果没有ajax，就无法发布表单。但是找到了解决方案，希望它可以帮助和别人的时间。

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

您可以使用下面的javascript / jquery代码从引导程序模式提交帖子表格：在输入提交按钮的onclick上调用以下函数

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