Hello! It is necessary to perform the following task: by clicking on the button open a modal window (bootstrap) and after closing it send the form. Everything seems to be easy, but alas, my code doesn’t work as planned

Opening modal window:

$('#valid_button').click(function (){ setTimeout(function(){ if ($('.field-payments-mpurse').hasClass('has-success') && $('.field-payments-summ').hasClass('has-success')) { $('#capcha_modal').modal('show'); } }, 400); });

Submitting the form after closing:

 $('#capcha_modal').on('hide.bs.modal', function (e) { $('#form_pay').submit(); });

Window code:

 <form id="form_pay" action="payments/create" method="post"> <div id="capcha_modal" class="fade modal" role="dialog" tabindex="-1"> <div class="modal-dialog "> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> Капча </div> <div class="modal-body"> <div class="form-group field-payments-recaptcha"> <label class="control-label" for="payments-recaptcha"></label> <input type="hidden" id="payments-recaptcha" name="Payments[reCaptcha]"> <div class="help-block"></div> </div> </div> </div> </div> </div> <div class="form-group"> <button type="submit" id="valid_button" class="btn btn-success">Вывести</button> </div>

Everything is elementary simple, but for some reason the window opens the second time after closing and the form is sent only after the second closing, nothing more than supernatural forces, what do you think?

  • Why is opening a modal window worth setTimeout ? - mix
  • Necessary to delay before opening - M.Texh
  • OK. Attach html modalki code to make it clearer how your script works. - mix
  • Added html code - M.Texh

1 answer 1

Try inserting this handler instead of your:

 $('#capcha_modal').on('click', '.close', function (e) { $('#form_pay').submit(); });

PS Also close the <form> if it is with you and is not closed in the working version.

UPD

If you are using Bootstrap 3, then the handler for closing a modal looks like this:

 $('#capcha_modal').on('hidden.bs.modal', function (e) { // do something... })

Documentation , answer to a similar question

  • $('#capcha_modal').on('hidden.bs.modal', function (e) { $('#form_pay').submit(); }) This is written in the bootstrap documentation and it works, but it’s not clear why the window opens after closing for the second time - M.Texh
  • @ M.Texh Probably because your code says hide.bs.modal . - mix
  • Fixed, no change - M.Texh
  • @ M.Texh What version of Bootstrap? - mix
  • Bootstrap 3 selector triggered - M.Texh