如何從 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 for POST`請求。

這是最基本的。 在存儲電子郵件 ID 之前，我使用regex來比較電子郵件的格式。 因此，如果電子郵件與regex 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>

有件事讓我感到困惑。 modal button的onclick事件怎么樣？

我知道了！ 我在<input type="email" placeholder="email"/>行中添加了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到modal的label字段中。

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 代碼從引導模式提交帖子表單：在輸入提交按鈕的單擊上調用以下函數

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

Answer 3

您可以在表單中包含一個模態。 在 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 文檔