Triggering Form Submission in JQuery Delegate

51
February 03, 2019, at 5:30 PM

I have a Bootstrap Modal for confirmation of a button click and want to submit a specific form based on the user response. I have everything working except the actual form submission. Here are the details.

The button is not intended to submit the form in which it lives. The submit button for the form works fine (and doesn't use a Modal confirmation), it is the "normal" update button for the form. The button in question is meant to submit a different form on the same page (this button deletes the record in question and uses a Modal confirmation). Of note is the "data-form" attribute that I am using to pass a selector for the form I want to submit.

<button id="CancelApplication" type="button" class="btn btn-outline-primary btn-sm delete-event" data-form="#ApplicationDelete" data-toggle="modal" data-target="#confirmationModal" data-dismiss="modal" data-confirmation="You are about to cancel your application!" data-confirmation-title="Cancel Application">Cancel Application</button>

Here is the form I want to submit if the user confirms via the Modal:

<form id="ApplicationDelete" asp-action="Delete" asp-antiforgery="true" method="post">
    <input type="hidden" asp-for="CampaignId" />
</form>

Here is the Jquery:

showConfirmation = function (title, message, success, cancel) {
    title = title ? title : 'Are you sure?';
    var modal = $("#confirmationModal");
    modal.find(".modal-title").html(title).end()
        .find(".modal-body").html(message).end()
        .modal({ backdrop: 'static', keyboard: false })
        .on('hidden.bs.modal', function () {
            modal.unbind();
        });
    if (success) {
        modal.one('click', '.modal-footer .btn-primary', success);
    }
    if (cancel) {
        modal.one('click', '.modal-header .close, .modal-footer .btn-default', cancel);
    }
};
$(document).on("click", ".delete-event", function (event) {
    event.preventDefault();
    var self = $(this);
    var success = function () {
        $(self.attr("data-form")).submit();
        //self.closest('form').trigger('submit');
    };
    var cancel = function () {
    };
    if (self.data('confirmation')) {
        var title = self.data('confirmation-title') ? self.data('confirmation-title') : undefined;
        var message = self.data('confirmation');
        showConfirmation(title, message, success, cancel);
    } else {
        success();
    }
});

Again, everything up to the form submission (via the "success" delegate) is working.

When I put a breakpoint right where I define the success delegate and type the single line of code contained therein into the console, it works perfectly (submitting the form in question). Specifically, typing:

$(self.attr("data-form")).submit()

I have verified that $(self.attr("data-form")) does resolve to #ApplicationDelete.

This leads me to believe that I have a scope issue with the reference to the form in the delegate but I don't know enough about JQuery/Javascript to know 1) if that is in fact the case and 2) how to structure the reference so it actually finds the form at run time. I also can't get a breakpoint that hits (in the delegate) at run time so that option seems to be cut off for me.

You may notice the commented out "self.closest...", which I can't use here because I want to submit a form other than the closest, but that code works in another application that is different but similar to this one.

Answer 1

Welp, it wasn't what I thought at all. I changed the class of the buttons in the modal, not realizing that they were being used as selectors in the showConfirmation() method.

As soon as I fixed this, everything worked.

READ ALSO
graphql query to json query

graphql query to json query

Given this GraphQL example, how can I in Javascript do a similar request with JSON?

61
Route.post() requires a callback function but got a [object Undefined] when using passport.js

Route.post() requires a callback function but got a [object Undefined] when using passport.js

I am getting Routepost() requires a callback function but got a [object Undefined] as an error

58
BeautifulSoup parsing HTML into a dictionary where &lt;h&gt; is the key and &lt;p&gt; is the value

BeautifulSoup parsing HTML into a dictionary where <h> is the key and <p> is the value

I am trying to scrape a website, and parse some data from the website into a usable format for analysisThe data the I want to pull out is within a <div> block, so I can easily get to that section of the HTML

42
Printing single quote become weird character in .txt-file

Printing single quote become weird character in .txt-file

I used Selenium to scrape some sentences, and then print the result to atxt-file, but it cannot display ' but instead some weird character:

33