Allow button to be clicked once JavaScript

Question

I have some modals on my site. Currently, when you click Confirm, it sends multiple confirmations.

Resend Invite Partial:

<div id="resendInvitePopup" class="popup-basic admin-form mfp-with-anim modalPopup">
<div class="panel">
    <div class="panel-heading">
        <span class="panel-title">
            <i class="fa fa-check"></i>Confirm
        </span>
    </div>
    @* end .panel-heading section *@

    <div class="panel-body p25">
        <div class="section row">
            <div class="col-md-12 text-center">
                <h3>Are you sure you want to <b class="text-success">re-send</b> this invite?</h3>
                <p class="popupInfo fs12">An invite email will be sent to the user on confirmation</p>

                <div class="summaryBox popupSummary formContainer">
                    @Html.Partial("_ResendInviteForm", Model)
                </div>

                </div>
            @* end section *@
        </div>
        @* end section row section *@

    </div>
    @* end .form-body section *@

    <div class="panel-footer">
        <div class="text-center">
            <input type="button" class="btn btn-primary CancelForm" value="Cancel" />
            <input type="submit" class="btn btn-success SubmitForm" value="Send" />
        </div>
    </div>
    @* end .form-footer section *@
</div>
@* end: .panel *@
<button title="Close (Esc)" type="button" class="mfp-close">×</button>

I have linked to a Fiddle as my code is too large: https://dotnetfiddle.net/9tAmio

Answer 1

You can use the jQuery function one to make sure an event is only triggered once.

$('.ConfirmSubmit').one('click', function (e) {
    // Submit form when the user confirms via the modal
    $("#SubmitForm").trigger('click');

});