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

django, javascript, jquery, python, twitter-bootstrap

Solution

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}}`.

Problem

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 for`POST` 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`.

Original source

Related problems