Calling a method from functions.php on a click of a button

Question

I have been working on a project where I will have to call a method(that accepts user id as an input) from a click of a submit button(Accept button).

I have been trying all the ways but the real challenge I am facing is how to get the user id in the front end and pass it to the method.

My method updates the user meta of that particular user.

Html code:

<div id="modal">
    <div class="modalconent">
         <h3 align=center>GDPR</h3>

        <p>This is a GDPR Pop Up</p><br><br><br>
        <form>
            <input name="accept" type="checkbox" value="Gdpr" required/>I accept the GDPR
            <input type="submit" id="accept-button" value="Accept">
        </form>
    </div>
</div>
<script>
    window.onload = function () {
    document.getElementById('accept-button').onclick = function () {
        document.getElementById('modal').style.display = "none"
    };
};
</script>

At present, my Accept button when clicked is only displaying none. I want to call the method along with display:none;

My PHP code:

function updateHasReadFlag($user) {
  // I added support for using this function either with user ID or user object
  if ( $user && is_int( $user ) ) {
    $user_id = $user;
  } else if ( ! empty( $user->ID ) ) {
    $user_id = $user->ID;
  } else {
    return;
  }
  return update_user_meta( $user_id, 'META_KEY', true );
}

The form code generated :

<form method="post" action="<?php echo esc_url( home_url() ); ?>">
             <input name="accept" type="checkbox" value="Gdpr" required=""> I accept the GDPR
             <input type="submit" id="accept-button" value="Accept">
             <!--?php wp_nonce_field( 'accept-gdpr', 'accept_gdpr_nonce' ); ?-->
        </form>

I do not understand why nonce field is commented. This is exactly what the code got generated, I have not edited anything in the code.

Answer 1

You could use AJAX if you don't want to reload the current page — i.e. upon clicking the "Accept" button, make an AJAX request to update the user metadata, all without leaving the current page.

However, the solution I'm proposing is not using AJAX; instead, we simply submit the form (set its action attribute value) to the homepage and then we use the template_redirect hook to update the metadata (and redirect back to the previous or referring page).

The Steps

1. Change the form tag to:

   <form method="post" action="<?php echo esc_url( home_url() ); ?>">
   

   and add this nonce field:

   <?php wp_nonce_field( 'accept-gdpr', 'accept_gdpr_nonce' ); ?>
   

   so your form now looks like:

   <form method="post" action="<?php echo esc_url( home_url() ); ?>">
       <input name="accept" type="checkbox" value="Gdpr" required /> I accept the GDPR
       <input type="submit" id="accept-button" value="Accept" />
       <?php wp_nonce_field( 'accept-gdpr', 'accept_gdpr_nonce' ); ?>
   </form>
   

2. Add this to the theme functions.php file:

   function accept_gdpr() {
       // Check if the user is authenticated.
       if ( ! is_user_logged_in() ) {
           return;
       }
   
       // Check if we have all necessary data.
       if ( empty( $_POST['accept_gdpr_nonce'] ) || empty( $_POST['accept'] ) ||
           'Gdpr' !== $_POST['accept'] ) {
           return;
       }
   
       // Verify the nonce.
       if ( ! wp_verify_nonce( $_POST['accept_gdpr_nonce'], 'accept-gdpr' ) ) {
           return;
       }
   
       // Update the meta.
       update_user_meta( get_current_user_id(), 'META_KEY', '1' );
   
       // Redirect back to the previous page.
       wp_safe_redirect( wp_get_referer() );
       exit;
   }
   add_action( 'template_redirect', 'accept_gdpr' );
   

   Notes:

   1. The Gdpr as in 'Gdpr' !== $_POST['accept'] is the same as in the <input name="accept" type="checkbox" value="Gdpr" required /> above.

   2. Be sure to replace the META_KEY with the actual meta key.

   3. I believe that the GDPR acceptance is aimed at logged-in users only, so that's why I used is_user_logged_in() and get_current_user_id() in the above code/function.

UPDATE

wp_safe_redirect() didn't work for the OP, so he used wp_redirect().

Answer 2

You will need to use wp_localize_script() also available here.
Short story : it's the WordPress way to call PHP in JS
So you could do something like the following.
FIRST create a js folder at the root of your theme, same level as style.css, if you do not have one yet, then in this js folder create a file call-php.js. You can name it what ever you want, the important thing is that it has to be a .js file
In your functions.php after your function updateHasReadFlag($user) add :

/**
 * Hooking in JS code.
 */
function call_php_in_js() {
    wp_enqueue_script( 'call-php-in-js', get_template_directory_uri() . '/js/call-php.js', array( 'jquery' ), filemtime( get_theme_file_path( '/js/call-php.js' ) ), true );
    $php_to_js = array(
        'my_php_function' => updateHasReadFlag( $user ),
    );
    wp_localize_script( 'call-php-in-js', 'object_name', $php_to_js );
}
add_action( 'wp_enqueue_scripts', 'call_php_in_js' );

SECOND, in the call-php.js file add :

( function( $ ) {
    $( "#accept-button" ).click( function( e ) {
        e.preventDefault();
        $( "#modal" ).hide();
        object_name.my_php_function;
    });
} )( jQuery );

Hope this will solve your issue.
I didn't test it but it should work.
Let me know after testing it.