when submitting a form, bootstrap modal opens, but when clicking the ok button, it's not working

Bulbul Anwar

I have a form to update mysqli database with php codes. The codes are fine and when I submit the form the database updates and that means it works fine. But I want to receive a confirmation bootstrap modal before submitting the form. For it I used the following codes. Here the modal opens, but when clicking the OK button it's not working.

<button class="btn btn-danger btn-lg" name="submit" value="submit" type="submit" data-condition="salaryinfo" data-toggle="modal-confirm" data-message="Are you sure?" data-title="Hi you!" data-target="#submit-confirm">Submit</button>         

          </form>
          <!-- Modal -->
<div class="modal fade" id="submit-confirm" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
        <h4 class="modal-title"></h4>
      </div>
      <div class="modal-body"></div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary" data-confirm="modal">OK</button>
      </div>
    </div>
  </div>
</div>          


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery-1.12.0.min.js"></script>
<script type="text/javascript" src="js/jquery-ui.min.js"></script>

<!-- For modal -->
<script src="js/confirm-bootstrap.js"></script>
<script type="text/javascript">    
function salaryinfo(){
            return true;
        };

    $(document).ready(function(){
        //modal delete confirm
        $('button[data-toggle="modal-confirm"]').click(function(event) {
            event.preventDefault();
            var self = $(this);
            var message = self.data('message');
            var title = self.data('title');
            var target = $(self.data('target'));
            var condition = self.data('condition');
            if( target.length == 1) {
                target.find('.modal-title').html(title);
                target.find('.modal-body').html(message);
                var showModal = true;
                var fn = window[condition];
                if(typeof fn === 'function') {
                    showModal = fn(condition);
                }
                if( showModal ) {
                    target.on('shown.bs.modal', function(e) {
                        target.find('button[data-confirm="modal"]').click(function(e){
                            e.preventDefault();
                            var parentForm = self.closest('form');
                            console.log(parentForm.html());
                            if( parentForm.length == 1 ) {
                                parentForm.submit();
                            }
                        });
                    });
                    target.modal({ show: true });
                };
            };
        });
    });    
    </script>

Any suggestion for a working modal?

user5563910

You are already submitting the form before the modal opens because your button has the value submit:

<button class="btn btn-danger btn-lg" name="submit" value="submit" type="submit" data-condition="salaryinfo" data-toggle="modal-confirm" data-message="Are you sure?" data-title="Hi you!" data-target="#submit-confirm">Submit</button>

So just make that a normal button with a data toggle to your modal.

And then make the confirm button on your modal, to have the value of submit.

You also need to include your modal within your <form> </form>

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

Bootstrap button not working (not opening when clicking)

bootstrap - button href not working when clicking

How to submit a form from another component when the modal OK button is clicked (bootstrap vue)

Bootstrap Modal Does Not Show Up When Clicking On The Button

bootstrap modal not working as expected on clicking on button

Prevent Clicking Again When Submitting Form in React

Stop form submitting when clicking 'Go' on mobiles

Focus when clicking on the button that opens the input

v-on:click not working on button when clicking it's content in bootstrap-vue

Issue in jquery When clicking on ok button

Button onClick triggering when modal opens

Close form when clicking on button

Prevent other modal from opening when clicked on a button inside a tr td where clicking on tr opens another modal

Using datatables prevent other modal from opening when clicked on a button inside a tr td where clicking on tr opens another modal

Close modal when clicking on overlay or close button?

Open an ionic modal when clicking a button with AngularJS

AngularJS with Bootstrap: Suppress redirect when clicking a modal

Trying to change attribute on button that launched a modal, when clicking a button in the modal

getting TypeError in console when clicking the ok and cancel buttons in modal.

Final form reactjs button not disabled when submitting

event.preventDefault(); not working when submitting form

Loading Indicator is not working when submitting the form in reactjs

Bootstrap modal submitting my form

My Django form is not rendering when I use Bootstrap's modal

How to clear all input fields in bootstrap modal when clicking data-dismiss button?

disable textbox when drawer opens up by clicking a button

Reset Bootstrap modal when clicking outside modal window

Bootstrap Vue Modal ok button

Blazor EditForm Submit handler not called when the form is in a bootstrap modal end the submit button is the modal dismissal command