1

I'm writing a WordPress plugin. My plugin has forms that post data to other pages generated by my plugin within the WordPress dashboard. I am trying to create an AJAX function that is triggered when the form is submitted. My AJAX is working just fine - just to test it, I triggered the event when I click on my plugin header, and it works perfectly fine there. However, if I try to trigger the event when I click a submit button (any input type="submit"), it doesn't work. The JavaScript runs just fine, but it can't find the PHP function to run.

Here is my JavaScript:

$('.button').on('click', function (e) {
    var url = testingajax.ajaxurl;

    var data = {
        'action': 'testing_ajax_wtf',
    }

    $.post(url, data, function (response) {
        console.log(response);
    });
});

The PHP function just returns a string (for testing purposes).

This works just fine if I change the first line to:

$('.my-plugin-header').on('click', function (e) {

But if I try to trigger it when a submit button is clicked, or when a form is submitted, the JavaScript runs, but it cannot find the PHP function.

Any idea what is going on here? Does WordPress somehow stop you from running AJAX when you submit forms in the dashboard?

1
  • The plot thickens! If I add e.preventDefault(); to the JavaScript, then it finds the PHP function. But I don't want to prevent the default form submission....
    – Morgan Kay
    May 24, 2015 at 1:04

1 Answer 1

0

Just remove type="submit" from your button and let your jQuery ajax call be triggered first. Once you get the response then you can submit your form as well. Something like this;

function your_action_javascript() { 
?>
<script type="text/javascript" >
    jQuery(document).ready(function($) {

       $('.button').on('click', function () {

            var data = {
                'action': 'your_action'
            };

            // since 2.8 ajaxurl is always defined in the admin header and points to admin-ajax.php
            $.post(ajaxurl, data, function(response) {

                // getting response from your ajax callback function
                alert('Got this from the server: ' + response);

                // submitting form after getting response
                $('#your_form_id').submit();
            });

        });

    });
</script> 
<?php
}
// Hook this function to admin footer
add_action( 'admin_footer', 'your_action_javascript' ); 
3
  • Thanks, Mohammad! Unfortunately, that doesn't help. I have tried $('.button').on('click', function (e), $('#button-id').on('click', function (e), and $('#form-id').on('submit', function (e) and everything else I can think of. No matter how I target that submit button or form, it cannot find the PHP function.
    – Morgan Kay
    May 24, 2015 at 2:17
  • However, your suggestion to do $('#your_form_id').submit(); does help immensely. I still don't know why it can't find the PHP function when clicking a submit button triggers the event, but at least I can prevent the default action and then do the action later. Thanks!
    – Morgan Kay
    May 24, 2015 at 2:41
  • Glad to know that it helped. May 24, 2015 at 7:27

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.