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    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    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    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    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  lt input type  email  placeholder  email   gt   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    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    And the JavaScript    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    So the modal comes up  but the data is not set into the label field of the modal

User · Answer

You CAN include a modal within a form   In the Bootstrap documentation it recommends the modal to be a  top level  element  but it still works within a form   You create a form  and then the modal  save  button will be a button of type  submit  to submit the form from within the modal    lt form asp-action  AddUsersToRole  method  POST  class  mb-3  gt        await Html PartialAsync    Views Users  SelectList cshtml   Model Users        lt div class  modal fade  id  role-select-modal  tabindex  -1  role  dialog  aria-labelledby  role-select-modal  aria-hidden  true  gt           lt div class  modal-dialog  role  document  gt               lt div class  modal-content  gt                   lt div class  modal-header  gt                       lt h5 class  modal-title  id  exampleModalLabel  gt Select a Role lt  h5 gt                   lt  div gt                   lt div class  modal-body  gt                                           lt  div gt                   lt div class  modal-footer  gt                       lt button type  submit  class  btn btn-primary  gt Add Users to Role lt  button gt                       lt button type  button  class  btn btn-secondary  data-dismiss  modal  gt Cancel lt  button gt                   lt  div gt               lt  div gt           lt  div gt       lt  div gt    lt  form gt    You can post  or GET  your form data to any URL   By default it is the serving page URL  but you can change it by setting the form action   You do not have to use ajax   Mozilla documentation on form action

User · Answer

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    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    via the context - example     form

User · Answer

I was facing same issue not able to post form without ajax  but found solution   hope it can help and someones time     lt form name  paymentitrform  id  paymentitrform  class  payment                      method  post                      action  abc php  gt             lt input name  email  value    placeholder  email    gt             lt input type  hidden  name  planamount  id  planamount  value  0  gt                                   lt input type  submit  onclick  form submit     value  Continue Payment  class  action                                      name  planform  gt                    lt  form gt    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             document getElementById  paymentitrform   submit

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

Examples related to javascript

Examples related to jquery

Examples related to python

Examples related to django

Examples related to twitter-bootstrap