ajaxurl not defined on front end

I am trying to create a ajaxform on the front side. I am using the code

    jQuery.ajax(
        {
            type: "post",
            dataType: "json",
            url: ajaxurl,
            data: formData,
            success: function(msg){
                console.log(msg);
            }
        });

for which I am getting error

Uncaught ReferenceError: ajaxurl is not definedworklorAjaxBookForm @ 
?page_id=2:291onclick @ ?page_id=2:202

While using similar code on the admin backend works. What url must I use to process the ajax request?

Solutions

to use ajaxurl directly, in your plugin file add this:

add_action('wp_head', 'myplugin_ajaxurl');

function myplugin_ajaxurl() {

   echo '<script type="text/javascript">
           var ajaxurl = "' . admin_url('admin-ajax.php') . '";
         </script>';
}

you can then use the ajaxurl for ajax request.

In backend there is global ajaxurl variable defined by WordPress itself.

This variable is not created by WP in frontend. It means that if you want to use AJAX calls in frontend, then you have to define such variable by yourself.

Good way to do this is to use wp_localize_script.

Let's assume your AJAX calls are in my-ajax-script.js file, then add wp_localize_script for this JS file like so:

function my_enqueue() {

    wp_enqueue_script( 'ajax-script', get_template_directory_uri() . '/js/my-ajax-script.js', array('jquery') );

    wp_localize_script( 'ajax-script', 'my_ajax_object',
            array( 'ajax_url' => admin_url( 'admin-ajax.php' ) ) );
}
add_action( 'wp_enqueue_scripts', 'my_enqueue' );

After localizing your JS file, you can use my_ajax_object object in your JS file:

jQuery.ajax(
    {
        type: "post",
        dataType: "json",
        url: my_ajax_object.ajax_url,
        data: formData,
        success: function(msg){
            console.log(msg);
        }
    });

The 2021 way is a bit different ;-)

function my_enqueue() {

    wp_enqueue_script( 'ajax-script', get_template_directory_uri() . '/js/my-ajax-script.js', array('jquery') );

    wp_add_inline_script( 'ajax-script', 
        'const myVariables = ' . json_encode( 
                                    array(
                                        'ajaxUrl' => admin_url( 'admin-ajax.php' ),
                                        ) ),
        'before' );

}
add_action( 'wp_enqueue_scripts', 'my_enqueue' );

Source: https://developer.wordpress.org/reference/functions/wp_add_inline_script/#comment-4632

Similar questions

problem ajaxurl - designthemes-core-features
I have a problem with ajaxurl, I would like to know how I could fix this error code js "not defined" by designthemes-core-features. Nota: is the plugin of a theme, this code can be found in the admin.js file inside the JS folder. The code "url: ajaxurl," (says: "ajaxurl is not defined") Would there be any idea? Would you like some more information?...
wordpress ajaxurl to fetch backbone model
I'm learning Backbone.js and trying to build simple theme based on it. I have in functions.php this code to load js: And in app.js this simple code to fetch posts: Server side works (I've tested it with jquery). If think problem is with url statement. Can someone tell me how it should look or if there is a difference between jQuery ajax and Backbon...
Why is my ajaxurl variable showing as undefined?
I'm trying to use the following code to count mp3 plays which is in ajax-counter.js on a wordpress plugin I've used the following to enqueue and localise that script The first console.log successfully displays the ajaxurl, but the console is showing Uncaught ReferenceError: ajaxurl is not defined and even when the HTML5 audio is played the second c...
How to update Wordpress ajaxurl variable to use SSL?
We run a Wordpress 4.0/Buddypress setup and ever since we switched to SSL all ajax functions are not working because the ajaxurl variable is still reading "http". This code is added to wp_head automatically so we're not really sure how to update it. We just need to switch http to https. Does anyone know how we can do this? We get this error each ti...
Ajaxurl return 0
Im making a wordpress plugin which allows the admin delete a particular row in the database by clicking a button Initially I was calling ajax like this and using this PHP code Which was working fine, returning the id as well as deleting it from the database. But when I submitted my plugin Wordpress said calling wp-load.php is big no no. Which I und...
Wordpress admin plugin AJAX call (ajaxurl) keeps returning 0
I have been busting my balls for the last week on the issue below. Ofcourse I did search and come across posts of people describing similar issues but none of the answers and solutions discussed seem to solve my problem. I want my Wordpress plugin to make use of the build-in Wordpress functionalities but my functions keep returning value: 0 in the ...

Also ask

We use cookies to deliver the best possible experience on our website. By continuing to use this site, accepting or closing this box, you consent to our use of cookies. To learn more, visit our privacy policy.