skip to Main Content

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

2

Answers


  1. Chosen as BEST ANSWER

    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' );
    

  2. 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.

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search