1

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.

2
  • 1
    Are you trying to update the metadata without reloading the current page? How about simply submitting the form to the same page and update the metadata on page load? – Sally CJ Jul 8 '19 at 15:22
  • Yes I am trying to update metadata. Can you provide me some solution of what you are talking about. It would be great. – Subham Jul 8 '19 at 15:38
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().

0
0

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.

13
  • thanks for the answer. I appreciate it. But somehow this is not working. My function updateHasReadFlag($user) is not getting called. Or may be it is getting called but the update_user_meta( $user_id, 'META_KEY', true ); is somehow not working. Can you look into it. I have also removed <script> </script> from my html code. – Subham Jul 7 '19 at 4:31
  • Asking you just to confirm, My function updateHasReadFlag($user) accepts userID or user Object as a parameter, so it can update that particular user meta data. Are we sending this as a parameter when calling the function updateHasReadFlag($user) – Subham Jul 7 '19 at 4:52
  • could you please replace object_name.my_php_function; by console.log(object_name.my_php_function); and tell me what you see in the console. Just to know, is the #modal getting hide when you click on #accept-button using my answer ? – LebCit Jul 7 '19 at 8:12
  • It is logged as "null" in the console for call-php.js – Subham Jul 7 '19 at 8:38
  • is the #modal getting hide when you click on #accept-button using my answer ? – LebCit Jul 7 '19 at 8:43

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.