23

ユーザーの電子メールを取得するためにを使用するページがあり、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 doc を調べてみましたが、実際には最小限です。POSTデータをDjango view that's listening forPOST リクエストに送りたい。

これが必要不可欠です。regexメールIDを保存する前に、メールの形式を比較するために使用しています。したがって、電子メールが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>

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

わかった！行に追加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。

4

3 に答える 3

22

ajaxsubmitで処理する必要があります。

このようなもの：

$(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}}.

于 2013-07-07T02:22:06.360 に答える