locked
Display Bootstap modal dialog before posting form to action method RRS feed

  • Question

  • User-305496339 posted

    Hi Friends,

    I am using JQuery Ajax and I want to display a Bootstrap (OK CANCEL) Modal dialog box Before the user submits the form for CRUD operations. I have have been perusing some tutorials about using Modal Dialog boxes, but can't seem to find anything that would fit my particular requirement. Any suggestions or references to some article(s) that explains how I should approach this problem would be greatly appreciated. Thanks !!!

    Tuesday, February 19, 2019 2:20 AM

Answers

  • User475983607 posted

    Hi Friends,

    I am using JQuery Ajax and I want to display a Bootstrap (OK CANCEL) Modal dialog box Before the user submits the form for CRUD operations. I have have been perusing some tutorials about using Modal Dialog boxes, but can't seem to find anything that would fit my particular requirement. Any suggestions or references to some article(s) that explains how I should approach this problem would be greatly appreciated. Thanks !!!

    It's pretty simple  1) Open the modal on submit and cancel the submit.  2) Submit the form when the user clicks the designated button.

    Below is a working example.  The jQuery/JavaScript must be below the HTML.  In the future please share what kind of application you are building.

    Html

    <form id="from" method="post">
        <input id="Text1" type="text" name="Text1" value="Hello World" />
        <input id="Submit1" name="Submit" type="submit" value="submit" />
    </form>
    
    <!-- Modal -->
    <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    ...
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                    <button id="Save" type="button" class="btn btn-primary">Save changes</button>
                </div>
            </div>
        </div>
    </div>

    jQuery

        <script>
            var submit = false;
            $('form').submit(function (e) {
                if (!submit) {
                    e.preventDefault();
                }           
                $('#exampleModal').modal('show')
            });
    
            $('#Save').click(function () {
                submit = true;
                $('form').submit();
            });
    
        </script>

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, February 19, 2019 3:01 AM