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

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

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:

I tried to look in the Twitter Bootstrap doc but it really is minimal. I want to POST the data to a django view thats 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.
Tried this based on karthikr’s answer:

Related:  Create a Fixed-to-bottom navbar in bootstrap that slides content upwards when toggled

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
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.
So part 1 is working. As in the posts are working. Now I need to show a modal for the success or failure. Heres what I am trying:
So I created this modal with a textarea:

And the javascript:

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


Solution 1:

You need to handle it via ajax submit.

Something like this:

    $('#subscribe-email-form').on('submit', function(e){
            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:

    <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 class="modal-footer">
        <input type="submit" value="SUBMIT" class="btn"/>

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

Solution 2:

I was facing same issue not able to post form without ajax.
but found solution , hope it can help and someones time.

<form name="paymentitrform" id="paymentitrform" class="payment"
          <input name="email" value="" placeholder="email" />
          <input type="hidden" name="planamount" id="planamount" value="0">
                                <input type="submit" onclick="form_submit() " value="Continue Payment" class="action"


You can submit post form, from bootstrap modal using below javascript/jquery code :
call the below function onclick of input submit button

    function form_submit() {


Related:  Add / Remove Tabs Dynamically in Bootstrap - Make created tab active