如何从一个模态形式的引导程序POST数据？ [英] How to POST the data from a modal form of bootstrap?

问题描述

我有一个页面使用 modal 来获取用户的电子邮件，我想将其添加到订阅者列表（这是一个django模型）。这是模式代码：

I have a page using a modal to get the users email and I want to add it to a list of subscribers(which is a django model). Here is the modal code for that:

<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 doc但它真的很小。我想要< POST 数据到一个 django视图，它收听 POST请求。

I tried to look in the Twitter Bootstrap doc but it really is minimal. I want to POST the data to a django view thats listening for POST requests.

这是必不可少的。在存储电子邮件ID之前，我使用 regex 来比较电子邮件的格式。所以如果电子邮件不符合正则表达式，则视图返回无效电子邮件。所以我想在 modal 本身内通知用户。但我真的不知道如何做到这一点。有人请帮忙。

This is the bare essential. I am using regex to compare the format of the email before storing the email id. So if the email does not match the regex the view returns an Invalid Email. So I would like to notify the user about that within the modal itself. But I really have no idea as to how to do this. Someone please help.

更新：

根据karthikr的答案，

Tried this based on karthikr's answer:

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

有一些令我困惑的事情。 modal按钮的 onclick 事件如何？

There is something that is confusing me. What about the onclick event of the modal button?

< input type =email占位符=email/> name =Email c>

I got it! I added name="Email" in the line <input type="email" placeholder="email"/>

django字段正在寻找电子邮件字段。所以在我的django视图中，代码是：

The django field is looking for the Email Field. So in my django view the code is :

request.POST.get（Email，''）所以指定字段名称有帮助。

request.POST.get("Email", '') so specifying the field name helps.

但是我需要我到我发布的网址。我希望它在同一页面显示一个提醒。

But it takes me to the url where I am posting. I want it to display a alert in the same page.

更新2：

所以第1部分工作。正如帖子正在工作。现在我需要为成功或失败显示出一种模式。我正在尝试：

So part 1 is working. As in the posts are working. Now I need to show a modal for the success or failure. Heres what I am trying:

所以我创建了一个 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>

所以模态出现。但数据不是设置到标签字段 modal 。

So the modal comes up. but the data is not set into the label field of the modal.

推荐答案

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

You need to handle it via 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表单，然后呈现以下代码段：

A better way would be to use a django form, and then render the following snippet:

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

via the context - example : {{form}}.

这篇关于如何从一个模态形式的引导程序POST数据？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！