ajaxurl not defined on frontend in wordpress

Jacob

I am building a custom sign-in form on the frontend. The form is very simple and just collecting the username and password and the login button handled by javascript. This is what I have used to send ajax request.

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

The console display the following error on submit.

Uncaught ReferenceError: ajaxurl is not defined

James

The ajaxurl is a global variable and it is only defined in the backend that is why you are getting the ajaxurl not defined error.

You need to define the ajaxurl for the frontend. This is how you could define the ajaxurl in frontend. Open the functions.php file and paste the below codes at the end of the page.

add_action('wp_head', 'wp97797_define_ajaxurl');

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

morgan

You can use the wp_localize_script() for the frontend when registering the javascript for the frontend. Take a look to the below example.

Open the functions.php file and paste the following codes.

function wp77934_enqueue_scripts() {
    wp_enqueue_script( 'ajax-script', get_template_directory_uri() . '/js/signin-script.js', array('jquery') );
    wp_localize_script( 
	'ajax-script', 
	'OBJ',
	array( 'ajax_url' => admin_url( 'admin-ajax.php' ) ) 
    );
}
add_action( 'wp_enqueue_scripts', 'wp77934_enqueue_scripts' );

Now use the OBJ global object in your javascript file.

// signin-script.js file
jQuery.ajax({
    type: "POST",
    dataType: "json",
    url: OBJ.ajaxurl,
    data: formData,
    success: function(response){
	console.log(response);
    }
});