简体   繁体   中英

Run AJAX function on form submit button after javascript confirm() cancel

I have a form where and AJAX function runs on form submission to make sure that the data in the form doesn't conflict with data in the database. If a conflict is found, the AJAX function pops up a confirm() box. If the user clicks "OK", the form is submitted. If they click "Cancel", the form is not submitted.

Here's where things get problematic. If they click cancel and then adjust the values in the form and submit it again, the AJAX function does not run the next time they hit the form submit button. Is there a way to make the AJAX function run every time they hit submit, even if they have previously cancelled the form submission?

Here is a truncated version of the AJAX function:

$('#publish').one('click', function (e) {
    e.preventDefault();

    var url = shiftajax.ajaxurl;
    var shift = $('#post_ID').val();

    var data = {
        'action': 'wpaesm_check_for_schedule_conflicts_before_publish',
        'shift': shift,
    };

    $.post(url, data, function (response) {
        if( response.action == 'go' ) {
            // submit the form
            $('#post').submit();
        } else {
            // ask user for confirmation
            if (confirm(response.message)) {
                // user clicked OK - submit the form
                $('#post').submit();
            } else {
                // user clicked cancel - do nothing
            }
        }
    });

});

Like I said, this is working just fine, but the AJAX doesn't fire at all if you hit the submit button after hitting the "cancel" button.

For what it is worth, this AJAX function runs when you hit the "Publish" button on a WordPress custom post type.

Dont use one (it will fire ajax submit or button click only once) , use here var IsBusy to check user is not repeatedly pressing the form submit,

Try below code,

var isBusy = false; //first time, busy state is false

$('#publish').on('click', function (e) {


    if(isBusy == true)
        return ; //if Busy just return dont submit
    else
        isBusy= true; //true , tell that ajax is now busy processing a request

    e.preventDefault();

    var url = shiftajax.ajaxurl;
    var shift = $('#post_ID').val();

    var data = {
        'action': 'wpaesm_check_for_schedule_conflicts_before_publish',
        'shift': shift,
    };

    $.post(url, data, function (response) {
        if( response.action == 'go' ) {
            // submit the form
            $('#post').submit();
        } else {
            // ask user for confirmation
            if (confirm(response.message)) {
                // user clicked OK - submit the form
                $('#post').submit();
            } else {
                // user clicked cancel - do nothing
            }
        }
        isBusy = false;
    });

});

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM