How to POST the data from a modal form of Bootstrap?

Question

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.

Answer 1

You need to handle it via ajax submit.

Something like this:

$(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')             }         });     }); }); 

A better way would be to use a django form, and then render the following snippet:

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

via the context - example : {{form}}.