title: How to POST the data from a modal form of Bootstrap?
body: <p>I have a page using a <code>modal</code> 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:</p>
  
  <pre><code>&lt;div id="notifications" class="modal hide fade" role="dialog" ara-labelledby="Notification" aria-hidden="true"&gt;
      &lt;div class="modal-header"&gt;
          &lt;button type="button" class="close" data-dismiss="modal" aria-hidden="true"&gt;X&lt;/button&gt;
          &lt;h4&gt;Subscribe to Status Notifications&lt;/h4&gt;
      &lt;/div&gt;
      &lt;form&gt;
          &lt;div class="modal-body"&gt;
              &lt;input type="email" placeholder="email"/&gt;
              &lt;p&gt;This service will notify you by email should any issue arise that affects your plivo service.&lt;/p&gt;
          &lt;/div&gt;
          &lt;div class="modal-footer"&gt;
              &lt;input type="submit" value="SUBMIT" class="btn"/&gt;
          &lt;/div&gt;
      &lt;/form&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I tried to look in the Twitter Bootstrap doc but it really is minimal. I want to <code>POST</code> the data to a <code>Django view that's listening for</code>POST` requests. </p>
  
  <p>This is the bare essential. I am using <code>regex</code> to compare the format of the email before storing the email id. So if the email <code>does not</code> match the <code>regex</code> the view returns an <code>Invalid Email</code>. So I would like to notify the user about that within the <code>modal</code> itself. But I really have no idea as to how to do this. Someone please help.</p>
  
  <hr>
  
  <h2>UPDATE 1</h2>
  
  <p>Tried this based on karthikr's answer:</p>
  
  <pre><code>&lt;form id="subscribe-email-form" action="/notifications/subscribe/" method="post"&gt;
      &lt;div class="modal-body"&gt;
      &lt;input type="email" placeholder="email"/&gt;
          &lt;p&gt;This service will notify you by email should any issue arise that affects your service.&lt;/p&gt;
      &lt;/div&gt;
      &lt;div class="modal-footer"&gt;
      &lt;input id="subscribe-email-submit" type="submit" value="SUBMIT" class="btn" /&gt;
      &lt;/div&gt;
  &lt;/form&gt;
  
  &lt;script&gt;
      $(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.")
                  }
              });
         }); 
      });
  &lt;/script&gt;
  </code></pre>
  
  <p>There is something that is confusing me. What about the <code>onclick</code> event of the <code>modal button</code>?</p>
  
  <p>I got it! I added <code>name="Email"</code> in the line <code>&lt;input type="email" placeholder="email"/&gt;</code></p>
  
  <p>The Django field is looking for the <code>Email Field</code>. So in my Django view the code is:</p>
  
  <pre><code>request.POST.get("Email", '')
  </code></pre>
  
  <p>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.</p>
  
  <hr>
  
  <h2>UPDATE 2</h2>
  
  <p>So part 1 is working. As in the posts are working. Now I need to show a modal for the success or failure.</p>
  
  <p>Here's what I am trying. So I created this modal with a <code>textarea</code>:</p>
  
  <pre><code>&lt;div id="subscription-confirm" class="modal hide fade in" aria-hidden="true"&gt;
      &lt;div class="modal-header"&gt;
          &lt;label id="responsestatus"&gt;&lt;/label&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And the JavaScript:</p>
  
  <pre><code>&lt;script&gt;
      $(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');    
                  }
              });
          });
      });
  &lt;/script&gt;
  </code></pre>
  
  <p>So the modal comes up, but the data is not <code>set</code> into the <code>label</code> field of the <code>modal</code>.</p>