How to fix form submission error, form is using ASP.NET Core 3.1 and jQuery

TomC
October 11, 2022
166 views
2 votes
3 Answers

I keep running into issues and I’m hoping the community can help me. I have a web application that was built a year or two ago using ASP.NET Core 3.1 with Razor Pages, and code behind (C#) files. The site is also using jQuery.

The form I’m having issues with is a "delete item" form. It’s important that users confirm the item(s) they want to delete before they delete them from the database. On the front-end, we have DeleteItem.cshtml which is has the following code:

...

    <form id="delete-form">
        <label for="confirm-button">Step 1:  Confirm</label>
        <br />
        <button id="confirm-button"
                class="btn btn-primary"
                data-toggle="modal"
                data-target="#exampleModal">
            Yes, I am sure I want to delete these questions.
        </button>
        <br />
        <br />
        <label for="submit-button">Step 2:  Delete</label>
        <br />
        <div style="position:relative">
            <div id="submit-div"
                 style="position: absolute; left: 0; top: 0; width: 25%; height: 100%; z-index: 1000;"></div>
            <button id="submit-button" class="btn btn-primary" disabled="true">Delete</button>
        </div>
    </form>
</main>

<!-- 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">Confirmation</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                Thank you for confirming you want to delete the question or questions listed.  Please close this confirmation box, and select the delete button.
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

@section Scripts {
    <script>
        $(document).ready(function () {

            $('#delete-form').on('submit', function (e) {
                e.preventDefault();
            });

            $('#confirm-button').click(function () {
                $('#submit-button').prop('disabled', false);
            });

            $('#submit-div').click(function () { submitForm(); });

            $('#submit-button').click(function () { submitForm(); });

            function submitForm() {
                console.log('in submitForm() function');
                if ($('#submit-button').is(':disabled'))
                    alert('Please select the confirmation button before selecting the delete button.');
                else
                    deleteButtonPush();
            }

            function deleteButtonPush() {
                console.log('in deleteButtonPush() function');
                if ($('#submit-button').is(':disabled')) {
                    alert('Please selete the confirmation button first.');
                }
                else {
                    $('#submit-button').prop('disabled', true);
                    $('#submit-button').append(' <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>');
                    $('#delete-form').prop('method', 'post');
                    $('#delete-form').prop('action', '[email protected]');
                    $('#delete-form').submit();
                }
            }
        });
    </script>
}

Why isn’t the form being submitted, after clicking the confirmation button, and the delete button? I can see the delete button is disabled, and the spinner is added, after the submit-button button is clicked. However, the post isn’t happening. How can this be fixed so post/submit will occur when the submit-button is clicked? Thanks, Everyone.

Tags: asp.net-core c#html jquery razor

Answers

Chosen as BEST ANSWER

Everyone. Thank you for your feedback. With your help, the confirmation and delete buttons are working correctly now. I decided to use an AJAX request in order to solve the need to post/submit to the server. It's not finished yet, but here is an answer:

...

<form id="delete-form">

        <h2>Questions to be Deleted</h2>

        <p>Step 1:  Select one or more questions</p>

        @if (Model.Questions != null && Model.Questions.Count > 0)
        {
            <table class="table" summary="select one or more questions to be deleted">

              @* output table of questions w/ checkboxes to select or "unselect" each question *@

            </table>
        }

        <h2>Confirm and Delete</h2>

        <p>
            Please confirm you are sure you want to delete the question(s), reading passages, and/or science tabs,
            for the question(s) listed above.
        </p>

        <input type="hidden" name="ID" value="@Model.Item.ItemTableID" />
        <label for="confirm-button">Step 2:  Confirm</label>
        <br />
        <button type="button"
                id="confirm-button"
                class="btn btn-primary"
                data-toggle="modal"
                data-target="#exampleModal">
            Yes, I am sure I want to delete these questions.
        </button>
        <br />
        <br />
        <label for="submit-button">Step 3:  Delete</label>
        <br />
        <div style="position:relative">
            <div id="submit-div"
                 style="position: absolute; left: 0; top: 0; width: 25%; height: 100%; z-index: 1000;"></div>
            <button type="button" id="submit-button" class="btn btn-primary" disabled>Delete</button>
        </div>
        @Html.AntiForgeryToken()
    </form>
</main>

<!-- 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">Confirmation</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                Thank you for confirming you want to delete the question or questions listed.  Please close this confirmation box, and select the delete button.
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

@section Scripts {
    <script>
        $(document).ready(function () {

            $('#delete-form').on('submit', function (e) {
                if ($('#submit-button').is(':disabled')) {
                    showDeleteError();
                    e.preventDefault();
                }
                else
                    deleteButtonPush();
            });

            $('#confirm-button').click(function (e) {
                $('#submit-button').prop('disabled', false);
                e.preventDefault();
            });

            $('#submit-div').click(function () { submitForm(); });

            $('#submit-button').click(function () { submitForm(); });

            function submitForm() {
                console.log('in submitForm() function');
                if ($('#submit-button').is(':disabled'))
                    showDeleteError();
                else
                    deleteButtonPush();
            }

            function deleteButtonPush() {
                console.log('in deleteButtonPush() function');
                if ($('#submit-button').is(':disabled'))
                    showDeleteError();
                else {
                    $('#submit-button').prop('disabled', true);
                    $('#submit-button').append(' <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>');

                    let data = $('#delete-form').serialize();

                    $.ajax({
                        type: "POST",
                        data: data,
                        url: "ProcessDeletetion?handler=Delete",
                        beforeSend: function (xhr) {
                            xhr.setRequestHeader("XSRF-TOKEN",
                                $('input:hidden[name="__RequestVerificationToken"]').val());
                        },
                        success: function () {
                            console.log('ok')
                        },
                        error: function () {
                            console.log('error');
                        }
                    });
                }
            }

            function showDeleteError() {
                alert('Please select the confirmation button before selecting the delete button.');
            }
        });
    </script>
}

(Edit)

- BaoNguyen
- October 11, 2022 at 7:00 am
- 0 votes
0
Remove the e.preventDefault() inside the on('submit') callback. Or if you want to check for other conditions, you can call the $('#delete-form').submit().

The problem with your code is after you calling the submit method on the form, then inside the submit callback, you cancel the default submit behaviors. For more information, you can read this Event.preventDefault()
```
    // For example, you can read this code
    $(document).ready(function() {

      $('#delete-form').on('submit', function(e) {
        // Checking condition
        if (someError) {
          // some error happen, don't submit the form
          e.preventDefault();

          // then if you want to submit the form inside this block, use this
          // $("delete-form").submit();
        }
        // other things...
      });
      // ... Other things
    })
```
Login or Signup to reply.

Change your code like below:

<form id="delete-form">
    <label for="confirm-button">Step 1:  Confirm</label>
    <br />
 <!--Add type="button"-->
    <button type="button" id="confirm-button"
            class="btn btn-primary"
            data-toggle="modal"
            data-target="#exampleModal">
        Yes, I am sure I want to delete these questions.
    </button>
    <br />
    <br />
    <label for="submit-button">Step 2:  Delete</label>
    <br />
    <div style="position:relative">
        <div id="submit-div"
             style="position: absolute; left: 0; top: 0; width: 25%; height: 100%; z-index: 1000;"></div>
<!--Add type="button"-->
        <button type="button" id="submit-button" class="btn btn-primary" disabled="true">Delete</button>
    </div>
</form>
</main>

<!-- 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">Confirmation</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                Thank you for confirming you want to delete the question or questions listed.  Please close this confirmation box, and select the delete button.
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

@section Scripts {
    <script>
        $(document).ready(function () {

            //$('#delete-form').on('submit', function (e) {
            //    e.preventDefault();
            //});

            $('#confirm-button').click(function () {
                $('#submit-button').prop('disabled', false);
            });

            $('#submit-div').click(function () { submitForm(); });

            $('#submit-button').click(function () { submitForm(); });

            function submitForm() {
                console.log('in submitForm() function');
                if ($('#submit-button').is(':disabled'))
                    alert('Please select the confirmation button before selecting the delete button.');
                else
                    deleteButtonPush();
            }

            function deleteButtonPush() {
                console.log('in deleteButtonPush() function');
                if ($('#submit-button').is(':disabled')) {
                    alert('Please selete the confirmation button first.');
                }
                else {
                    $('#submit-button').prop('disabled', true);
                    $('#submit-button').append(' <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>');
                    $('#delete-form').prop('method', 'post');
                    $('#delete-form').prop('action', '[email protected]');
                    $('#delete-form').submit();
                }
            }
        });
    </script>
}

Please signup or login to give your own answer.

Click here to cancel reply.