web-dev-qa-db-ja.com

方法POST=ブートストラップのモーダル形式からのデータ？

ユーザーのメールを取得するために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_文書を調べてみましたが、実際には最小限です。 _Django view_をリッスンしている_POST requests_にデータをPOSTしたい。

これが必要不可欠です。メール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>
_

私を混乱させているものがあります。 _modal button_のonclickイベントはどうですか？

わかった！ _name="Email"_行に_<input type="email" placeholder="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のlabelフィールドへのmodalではありません。

javascriptjquerypythondjangotwitter-bootstrap
17
Indradhanush Gupta

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フォームを使用し、次のスニペットをレンダリングすることです。

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

17
karthikr

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 modalから投稿フォームを送信できます。入力送信ボタンのonclick関数を呼び出します

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

フォーム内にモーダルを含めることができます。 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に投稿（またはGET）できます。デフォルトでは配信ページのURLですが、actionの形式を設定することで変更できます。 ajaxを使用する必要はありません。

フォームアクションに関するMozillaドキュメント

0
Jess