Bootstrap Modal before form Submit

Question

I m new to Modals  I have a Form and when the user clicks submit  It will show a Modal confirming if the user wants to submit  the modal also contains the user input from the form fields  I searched all over the internet but can t find the right one on my needs  And all I see is that they tag the click event to open modal on a  a link  i have a input type submit  Can you give examples or ideas  Thanks  Here s my sample form    lt form role  form  id  formfield  action  inc Controller OperatorController php  method  post   enctype  multipart form-data  onsubmit  return validateForm     gt   lt input type  hidden  name  action  value  add form    gt            lt div class  form-group  gt            lt label gt Last Name lt  label gt  lt span class  label label-danger  gt  required lt  span gt            lt input class  form-control  placeholder  Enter Last Name  name  lastname  id  lastname  gt          lt  div gt            lt div class  form-group  gt             lt label gt First Name lt  label gt  lt span class  label label-danger  gt  required lt  span gt             lt input class  form-control  placeholder  Enter First Name  name  firstname  id  firstname  gt          lt  div gt      lt input type  submit  name  btn  value  Submit  id  submitBtn  class  btn btn-default  data-confirm  Are you sure you want to delete    gt     lt input type  button  name  btn  value  Reset  onclick  window location  fillup php   class  btn btn-default  data-modal-type  confirm   gt   lt  form gt

User · Answer

You can use browser default prompt window  Instead of basic  lt input type  submit         gt  try    lt button onClick  if confirm   are you sure        this form submit      gt Save lt  button gt

User · Answer

So if I get it right  on click of a button  you want to open up a modal that lists the values entered by the users followed by submitting it   For this  you first change your input type  submit  to input type  button  and add data-toggle  modal  data-target   confirm-submit  so that the modal gets triggered when you click on it    lt input type  button  name  btn  value  Submit  id  submitBtn  data-toggle  modal  data-target   confirm-submit  class  btn btn-default    gt    Next  the modal dialog    lt div class  modal fade  id  confirm-submit  tabindex  -1  role  dialog  aria-labelledby  myModalLabel  aria-hidden  true  gt       lt div class  modal-dialog  gt           lt div class  modal-content  gt               lt div class  modal-header  gt                  Confirm Submit              lt  div gt               lt div class  modal-body  gt                  Are you sure you want to submit the following details                    lt  -- We display the details entered by the user here -- gt                   lt table class  table  gt                       lt tr gt                           lt th gt Last Name lt  th gt                           lt td id  lname  gt  lt  td gt                       lt  tr gt                       lt tr gt                           lt th gt First Name lt  th gt                           lt td id  fname  gt  lt  td gt                       lt  tr gt                   lt  table gt                lt  div gt                lt div class  modal-footer  gt                   lt button type  button  class  btn btn-default  data-dismiss  modal  gt Cancel lt  button gt                   lt a href     id  submit  class  btn btn-success success  gt Submit lt  a gt               lt  div gt           lt  div gt       lt  div gt   lt  div gt      Lastly  a little bit of jQuery       submitBtn   click function             when the button in the form  display the entered values in the modal             lname   text     lastname   val              fname   text     firstname   val              submit   click function            when the submit button in the modal is clicked  submit the form        alert  submitting            formfield   submit          You haven t specified what the function validateForm   does  but based on this you should restrict your form from being submitted  Or you can run that function on the form s button  submitBtn click and then load the modal after the validations have been checked   DEMO

User · Answer

It is easy to solve  only create an hidden submit    lt button id  submitCadastro  type  button  gt ENVIAR lt  button gt   lt input type  submit  id  submitCadastroHidden  style  display  none    gt    with jQuery you click the submit       submitCadastro   click function        if     checkDocumentos   prop  checked      false             alert  Aceite os termos e condi    es primeiro                  modalERROR   modal  show         else                formCadastro   submit                submitCadastroHidden   click

User · Answer

I noticed some of the answers were not triggering the HTML5 required attribute  as stuff was being executed on the action of clicking rather than the action of form send  causing to bypass it when the inputs were empty     Have a  lt form id  xform  gt  lt  form gt  with some inputs with the required attribute and place a  lt input type  submit  gt  at the end  A confirmation input where typing  ok  is expected  lt input type  text  name  xconf  value    required gt  Add a modal 1 confirm to your html  to confirm the form of sending    on modal 1 confirm  add the id modal 1 accept to the accept button  Add a second modal 2 errMsg to your html  to display form validation errors    on modal 2 errMsg  add the id modal 2 accept to the accept button   on modal 2 errMsg  add the id m2 Txt to the displayed text holder  The JS to intercept before the form is sent       xform   submit function e       var msg  conf  preventSend       if     xform   attr  data-send      ready            msg  Error      default error msg         preventSend false           conf     name  xconf     val   toLowerCase   replace        g                if conf                    msg  The field is empty                preventSend true           else if conf    ok                msg  You didn t write   ok   correctly                preventSend true                     if preventSend     validation failed  show the error                 m2 Txt   html msg     displayed text on modal 2 errMsg                 modal 2 errMsg   modal  show             else    validation passed  now let s confirm the action                 modal 1 confirm   modal  show                       e preventDefault            return false                9  Also some stuff when clicking the Buttons from the modals       modal 1 accept   click function            modal 1 confirm   modal  hide            xform   attr  data-send    ready   submit             modal 2 accept   click function            modal 2 errMsg   modal  hide          Important Note  So just be careful if you add an extra way to show the modal  as simply clicking the accept button     modal 1 accept   will assume the validation passed and it will add the  ready  attribute    The reasoning for this is that     modal 1 confirm   modal  show    is shown only when it passed the validation  so clicking     modal 1 accept   should be unreachable without first getting the form validated

User · Answer

form button type  submit     on  click   function           this  parents  form   submit

[javascript] Bootstrap Modal before form Submit

Examples related to javascript

Examples related to jquery

Examples related to twitter-bootstrap

[javascript] Bootstrap Modal before form Submit

Examples related to javascript

Examples related to jquery

Examples related to twitter-bootstrap

Examples related to modal-dialog