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

Posted

技术标签:

【中文标题】如何从 Bootstrap 的模态形式发布数据?【英文标题】:How to POST the data from a modal form of Bootstrap? 【发布时间】:2013-07-04 17:04:32 【问题描述】:

我有一个使用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 notregex 匹配,则视图将返回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>

有些事情让我很困惑。 modal buttononclick 事件呢?

我明白了!我在&lt;input type="email" placeholder="email"/&gt; 行中添加了name="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 进入modallabel 字段。

【问题讨论】:

Bootstrap 4 文档说您可以拥有form within a modal,但它没有显示任何有关在表单中使用模式的信息。我希望它做到了!但我想这就是我们在这里的原因。 :D 【参考方案1】:

您可以在表单中包含模式。在 Bootstrap 文档中,它建议将模式作为“***”元素,但它仍然可以在表单中使用。

您创建一个表单,然后模态“保存”按钮将成为 type="submit" 的按钮,用于从模态中提交表单。

<form asp-action="AddUsersToRole" method="POST" class="mb-3">

    @await html.PartialAsync("~/Views/Users/_SelectList.cshtml", Model.Users)

    <div class="modal fade" id="role-select-modal" tabindex="-1" role="dialog" aria-labelledby="role-select-modal" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Select a Role</h5>
                </div>
                <div class="modal-body">
                    ...
                </div>
                <div class="modal-footer">
                    <button type="submit" class="btn btn-primary">Add Users to Role</button>
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                </div>
            </div>
        </div>
    </div>

</form>

您可以将表单数据发布(或获取)到任何 URL。默认情况下,它是服务页面 URL,但您可以通过设置表单 action 来更改它。您不必使用 ajax。

Mozilla documentation on form action

【讨论】:

这似乎是最简单的答案。提交带有模式的表单作为确认步骤。伟大的!诀窍是从触发表单 POST 请求的按钮中排除 data-dismiss="modal"【参考方案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();
     

【讨论】:

【参考方案3】:

您需要通过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表单,然后渲染如下sn-p:

<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

【讨论】:

您是说我需要将代码分离到表单的不同模板中?那我如何使它与模态链接? 嗯.. 你可以用不同的模板来做,但我所说的只是让它成为一个 ajax 提交。它可以在同一个模板中 我做了与你的回答类似的事情。和***.com/questions/9349142/… 帖子正在运行。但是数据没有通过。你能说出原因吗? 因为您没有发送数据。试试data: $('form').serialize() - 也编辑了答案 必填项。我要说的是,您的 URL 更改表明它是一个 GET 请求。你需要的是POST

以上是关于如何从 Bootstrap 的模态形式发布数据?的主要内容,如果未能解决你的问题,请参考以下文章

Bootstrap 模态叠加另一个模态

带有重力形式的 Wordpress 中的 Bootstrap 模态

Bootstrap:如何从模态中删除框阴影?

如何在角度 4 中使用 ng-bootstrap 将数据模态组件传递给父组件

bootstrap模态框怎么传值

如何使用数据库缩略图中的 src 将Class active 添加到 Bootstrap 模态图像?