Twitter Bootstrap Modal Form Submit

Question

I ve recently been fiddling around with twitter bootstrap  using java jboss  and i ve been attempting to submit a form from a Modal interface  the form contains just a hidden field and nothing else so display etc  is unimportant   The form is external to the modal itself  and I just can t figure out how this would be possible  i ve tried adding the modal itself to the form  attempting to used HTML5 form  form list  and even adding the form to the modal body and using some jquery to force a submit  but nothing appears to work  Below is a sample modal I was attempting to augment to what i needed  the OK button was previously editting to attempt to call jquery functions    lt div class  modal small hide fade  id  myModal  tabindex  -1  role  dialog  aria-labelledby  myModalLabel  aria-hidden  true  gt       lt div class  modal-header  gt           lt button type  button  class  close  data-dismiss  modal  aria-hidden  true  gt    lt  button gt           lt h3 id  myModalLabel  gt Delete Confirmation lt  h3 gt       lt  div gt       lt div class  modal-body  gt           lt p class  error-text  gt Are you sure you want to delete the user  lt  p gt       lt  div gt          lt div class  modal-footer  gt           lt button class  btn btn-danger  data-dismiss  modal  aria-hidden  true  gt Cancel lt  button gt           lt button class  btn btn-success  data-dismiss  modal  gt Ok lt  button gt       lt  div gt   lt  div gt

User · Answer

Simple   lt div class  modal-footer  gt   lt button class  btn  data-dismiss  modal  aria-hidden  true  gt Close lt  button gt   lt button class  btn btn-primary  onclick  event preventDefault   document getElementById  your-form   submit     gt Save changes lt  button gt

User · Answer

This answer is late  but I m posting anyway hoping it will help someone  Like you  I also had difficulty submitting a form that was outside my bootstrap modal  and I didn t want to use ajax because I wanted a whole new page to load  not just part of the current page  After much trial and error here s the jQuery that worked for me     function             body   on  click     odom-submit   function  e              this form  submit                myModal   modal  hide                  To make this work I did this in the modal footer   lt div class  modal-footer  gt       lt button class  btn  data-dismiss  modal  aria-hidden  true  gt Close lt  button gt       lt button class  btn btn-primary odom-submit  gt Save changes lt  button gt   lt  div gt    Notice the addition to class of odom-submit  You can  of course  name it whatever suits your particular situation

User · Answer

Updated 2018  Do you want to close the modal after submit  Whether the form in inside the modal or external to it you should be able to use jQuery ajax to submit the form   Here is an example with the form inside the modal    lt a href   myModal  role  button  class  btn  data-toggle  modal  gt Launch demo modal lt  a gt    lt div id  myModal  class  modal hide fade  tabindex  -1  role  dialog  aria-labelledby  myModalLabel  aria-hidden  true  gt       lt div class  modal-header  gt           lt button type  button  class  close  data-dismiss  modal  aria-hidden  true  gt    lt  button gt               lt h3 id  myModalLabel  gt Modal header lt  h3 gt       lt  div gt       lt div class  modal-body  gt           lt form id  myForm  method  post  gt             lt input type  hidden  value  hello  id  myField  gt               lt button id  myFormSubmit  type  submit  gt Submit lt  button gt           lt  form gt       lt  div gt       lt div class  modal-footer  gt           lt button class  btn  data-dismiss  modal  aria-hidden  true  gt Close lt  button gt           lt button class  btn btn-primary  gt Save changes lt  button gt       lt  div gt   lt  div gt    And the jQuery ajax to get the form fields and submit it        myFormSubmit   click function e         e preventDefault          alert     myField   val                      post  http   path to post                 myForm   serialize              function data  status  xhr                 do something here with response                              Bootstrap 3 example    Bootstrap 4 example

User · Answer

You can also cheat in some way by hidding a submit button on your form and triggering it when you click on your modal button

User · Answer

Old  but maybe useful for readers to have a full example of how use modal   I do like following   working example jsfiddle         button btn btn-success   click function event     event preventDefault       post  getpostcodescript php      form   serialize    function data  status  xhr                   do something here with response          console info data           console info status           console info xhr               done function                do something here if done           alert   saved                 fail function                do something here if there is an error           alert   error                 always function                maybe the good state to close the modal         alert   finished                Set a timeout to hide the element again         setTimeout function                  myModal   hide               3000                 To deal easier with modals  I recommend using eModal  which permit to go faster on base use of bootstrap 3 modals

[jquery] Twitter Bootstrap Modal Form Submit

Examples related to jquery

Examples related to forms

Examples related to twitter-bootstrap

Examples related to submit

[jquery] Twitter Bootstrap Modal Form Submit

Examples related to jquery

Examples related to forms

Examples related to twitter-bootstrap

Examples related to modal-dialog

Examples related to submit