How to get ACF Field Value with AJAX - php

Question

little help please, it is WP site,
I have hidden section on page, and when user scroll to it popup shows asking for password, and when user enter password I must compare it with password from ACF field.
I tried several examples getting this done but i cant get anything... I could not find any clear examples of that on stackowerflow, or step by step examples, there are few of them that are not clear to me, I am kinda beginer
EDIT:
function.php
function my_enqueue() {
wp_enqueue_script( 'ajax-script', get_template_directory_uri() . '/js/global.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' );
add_action('wp_ajax_nopriv_get_acf_field_ajax', 'my_action');
add_action('wp_ajax_get_acf_field_ajax', 'my_action');
function my_action() {
$result = get_field('password', 'option');
echo json_encode($result);
// wp_send_json($result);
}
global.js
$.ajax({
type: "post",
dataType: "json",
url: my_ajax_object.ajax_url,
data: { action: 'my_action' },
success: function (data) {
console.log(data);
}
});
i got POST http://my-local-website.com/wp-admin/admin-ajax.php error 400 bad request

Answer 1

You have to register and localize a script file in your theme function.php.
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:
var form_data = new FormData();
form_data.append('action', 'get_acf_field_ajax');
form_data.append('pass', password);
form_data.append('user_id', 141);
jQuery.ajax({
type: "post",
dataType: "json",
url: my_ajax_object.ajax_url,
data: form_data,
success: function(response){
console.log(response.success);
}
});
then you have to write your ajax callback function.
<?php
add_action('wp_ajax_nopriv_get_acf_field_ajax', 'my_action');
add_action('wp_ajax_get_acf_field_ajax', 'my_action');
function my_action() {
$response = array();
$user_id = $_POST['user_id'];
$user_pass = $_POST['pass'];
$acf_pass = get_field('acf_pass', 'user_'. $user_id );
if($user_pass == $acf_pass ){
$response['success'] = true;
}else{
$response['success'] = false;
}
wp_send_json($response);
}
?>
try out this rough code and modify as per your need.

Answer 2

This is how I manage to do it:
JS File:
$('.pwd').on('click', function () {
var pwd = prompt('Please enter your password:', '');
if (pwd != null && pwd != '') {
var password = pwd;
$.ajax({
url: example_ajax_obj.ajaxurl,
data: {
'action': 'example_ajax_request',
'password': password,
},
success: function (data) {
console.log(data);
},
error: function (errorThrown) {
console.log(errorThrown);
}
});
}
return false;
});
function example_ajax_enqueue() {
// Enqueue javascript on the frontend.
wp_enqueue_script(
'example-ajax-script',
get_template_directory_uri() . '/js/global.js',
array( 'jquery' )
);
// The wp_localize_script allows us to output the ajax_url path for our script to use.
wp_localize_script(
'example-ajax-script',
'example_ajax_obj',
array(
'ajaxurl' => admin_url( 'admin-ajax.php' ),
)
);
}
add_action( 'wp_enqueue_scripts', 'example_ajax_enqueue' );
function example_ajax_request() {
$acf_pass = get_field('password', 'option');
// The $_REQUEST contains all the data sent via ajax
if ( isset( $_REQUEST ) ) {
$password = $_REQUEST['password'];
if ( $password == $acf_pass ) {
$password = 'YESSSSSSS';
}else{
$password = 'NOOOOOO';
}
echo $password;
}
die();
}
add_action( 'wp_ajax_example_ajax_request', 'example_ajax_request' );
add_action( 'wp_ajax_nopriv_example_ajax_request', 'example_ajax_request' );