I have a page using a modal to get the users email and I want to add it to a list of subscribers (which is a Django model). Here is the modal code for that:

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

I tried to look in the Twitter Bootstrap doc but it really is minimal. I want to POST the data to a Django view that's listening forPOST` requests.

This is the bare essential. I am using regex to compare the format of the email before storing the email id. So if the email does not match the regex the view returns an Invalid Email. So I would like to notify the user about that within the modal itself. But I really have no idea as to how to do this. Someone please help.

UPDATE 1

Tried this based on karthikr's answer:

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

There is something that is confusing me. What about the onclick event of the modal button?

I got it! I added name=Email in the line <input type=email placeholder=email/>

The Django field is looking for the Email Field. So in my Django view the code is:

request.POST.get(Email, '')

So specifying the field name helps. But it takes me to the URL where I am posting. I want it to display a alert in the same page.

UPDATE 2

So part 1 is working. As in the posts are working. Now I need to show a modal for the success or failure.

Here's what I am trying. So I created this modal with a textarea:

<div id=subscription-confirm class=modal hide fade in aria-hidden=true>

    <div class=modal-header>

        <label id=responsestatus></label>

    </div>

</div>

And the 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>

So the modal comes up, but the data is not set into the label field of the modal.