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，这些人正在监听POST requests。

这是必不可少的。在存储电子邮件ID之前，我使用regex来比较电子邮件的格式。因此，如果电子邮件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的{{1}}事件呢？

我明白了！我在行modal button

中添加了name="Email"

django字段正在寻找<input type="email" placeholder="email"/>。所以在我的django视图中代码是：

Email Field因此指定字段名称有帮助。

但它带我到我发帖的网址。我希望它在同一页面中显示警报。

更新2：

所以第1部分正在发挥作用。如在帖子正在工作。现在我需要显示成功或失败的模态。以下是我的尝试：

所以我用request.POST.get("Email", '')创建了这个模态：

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>的{{1}}字段中的数据不是set。

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代码从bootstrap模式提交帖子表单：调用以下功能点击输入提交按钮

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

Answer 3

您可以在表格中包含模态。在Bootstrap文档中，它建议将模式作为“顶层”元素，但仍可在表单中使用。

您创建一个表单，然后模式“保存”按钮将成为类型为“提交”的按钮，以从模式内部提交表单。

<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

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

3 个答案: