Close Bootstrap modal on form submit

Question

I have a Bootstrap modal dialog which contains a form  The modal dialog contains a submit and a cancel button  Now on submit button click the form is submitted successfully but the modal dialog isn t getting closed  Here is my HTML   lt div class  quot modal fade quot  id  quot StudentModal quot  tabindex  quot -1 quot  role  quot dialog quot  aria-labelledby  quot StudentModalLabel quot  aria-hidden  quot true quot  data-backdrop  quot static quot  gt      lt div class  quot modal-dialog quot  gt         lt div class  quot modal-content quot  gt            lt form action  quot   GetStudent quot  class  quot form-horizontal quot  role  quot form quot  method  quot post quot  id  quot frmStudent quot  gt               lt div class  quot modal-footer quot  gt                  lt div class  quot pull-right quot  gt                     lt button type  quot submit quot  class  quot btn btn-success quot  gt  lt i class  quot glyphicon glyphicon-ok quot  gt  lt  i gt  Save lt  button gt                     lt button type  quot button quot  class  quot btn btn-danger quot  data-dismiss  quot modal quot  gt  lt i class  quot glyphicon glyphicon-remove quot  gt  lt  i gt  Close lt  button gt                  lt  div gt               lt  div gt            lt  form gt         lt  div gt      lt  div gt   Anybody knows how to do this

User · Answer

I had the same problem and finally got it working with this code:

<%=form_with id: :friend_email_form, url: friend_emails_create_path do |f|%>

                      # form fields entered here

<div class="actions">
    <%= f.submit "Send Email", class: 'btn btn-primary', "onclick":"submit_form();", "data-dismiss":"modal"%>
</div>

 <script>
    function submit_form() {
      document.getElementById('friend_email_form').submit();
    }
</script>

The selected answer did not work for me.

User · Answer

if your modal has a cancel button  Otherwise create a hidden close button   You can simulate the click event on this button so that your form is closed  Iin your component add a ViewChild  export class HelloComponent implements OnInit     ViewChild  fileInput   fileInput ElementRef    in your close button add  fileInput   lt button class  btn btn-danger   fileInput id  delete-node  name  button  data-dismiss  modal  type  submit  gt Cancelar lt  button gt    When you want to close the modal programmatically trigger an click event on the close button  this fileInput nativeElement click

User · Answer

i make this code it work fine but once form submit model button not open model again say e preventdefault is not a function    Use below code on any event that fire on submit form                      modal   removeClass  in                        modal   attr  aria-hidden   true                        modal   css  display    none                        modal-backdrop   remove                       body   removeClass  modal-open      you can make this code more short    if any body found solution for e preventdefault  let us know

User · Answer

The listed answers won t work if the results of the AJAX form submit affects the HTML outside the scope of the modal before the modal finishes closing  In my case  the result was a grayed out  fade  screen where I could see the page update  but could not interact with any of the page elements   My solution     document  on  click     send-email-submit-button   function e           send-new-email-modal   modal  hide           document  on  submit     send-email-form   function e       e preventDefault        var querystring     this  serialize          ajax           type   POST           url   sendEmailMessage           data   querystring          success   function response                    send-new-email-modal   on  hidden bs modal   function                          contacts-render-target   html response                             return false        Note  My modal form was inside a parent div that was already rendered via AJAX  thus the need to anchor the event listener to document

User · Answer

Use that Code       button   submit function e        e preventDefault           Coding         IDModal   modal  toggle      or      IDModal   modal  hide        return false

User · Answer

I am using rails and ajax too and I had the same problem  just run this code       modalName   modal  hide      that worked for me but I am trying to also fix it without using jQuery

User · Answer

If you do not want to use jQuery  make the button type a normal button and add a click listener pointing to the function you would like to execute  and send the form in as a parameter  The button would be as follows   lt button  click   quot yourSubmitFunction yourForm  quot   disabled   quot  yourForm valid quot  type  quot button quot  class  quot btn btn-primary quot  data-dismiss  quot modal quot  gt Save changes lt  button gt  Remember to remove   ngSubmit   quot yourSubmitFunction yourForm  quot  from the form div if you use this method

User · Answer

Neither adding data-dismiss  modal  nor using     modal   modal  hide   in javascript worked for me  Sure they closed the modal but the ajax request is not sent either   Instead  I rendered the partial containing the modals again after ajax is successful  I m using ruby on rails   I also had to remove  modal-open  class from the body tag too  This basically resets the modals  I think something similar  with a callback upon successful ajax request to remove and add back the modals should work in other framework too

User · Answer

Use this to submit and close the modal at the same time      form-submit   on  click   function e       e preventDefault            con-close-modal   modal  toggle      or      IDModal   modal  hide            date-form   submit

User · Answer

You can use one of this two options   1  Add data-dismiss to the submit button i e    lt button type  submit  class  btn btn-success  data-dismiss  modal  gt  lt i class  glyphicon glyphicon-ok  gt  lt  i gt  Save lt  button gt    2  Do it in JS like      frmStudent   submit function             StudentModal   modal  hide

User · Answer

give id to submit button   lt button id  btnSave  type  submit  class  btn btn-success  gt  lt i class  glyphicon glyphicon-trash  gt  lt  i gt  Save lt  button gt       btnSave   click function            StudentModal   modal  hide          Also you forgot to close last div    lt  div gt    Hope this helps

User · Answer

Try this code      frmStudent   on  submit   function          StudentModal  on  hide bs modal   function  e        e preventDefault

User · Answer

Add the same attribute as you have on the Close button   data-dismiss  modal    e g    lt button type  submit  class  btn btn-success  data-dismiss  modal  gt  lt i class  glyphicon glyphicon-ok  gt  lt  i gt  Save lt  button gt    You can also use jQuery if you wish       frmStudent   submit function             submission stuff          StudentModal   modal  hide        return false

[javascript] Close Bootstrap modal on form submit

Examples related to javascript

Examples related to html

Examples related to jquery

[javascript] Close Bootstrap modal on form submit

Examples related to javascript

Examples related to html

Examples related to jquery

Examples related to bootstrap-modal