How to call php function if javascript condition true

Question

I have create some personal project with wordpress + php + google firebase. I want to execute function if Google firebase OTP verification is success.

Here is the code

function devsol_customer_form() { ?>
<form>
<p class="woocommerce-form-row woocommerce-form-row--wide form-row form-row-wide">  
<label for="number"><?php esc_html_e( 'Mobile Number', 'woocommerce' ); ?>&nbsp;<span class="required">*</span></label>
<input type="tel" class="woocommerce-Input woocommerce-Input--text input-text" name="number" id="number"/>
</p>
<div id="recaptcha-container"></div>
<button class="woocommerce-Button button woocommerce-form-login__submit" type="button" onclick="phoneAuth();">SendCode</button>
</form>
<br/>
<h1>Enter Verification code</h1>
<form>
    <input type="text" id="verificationCode" placeholder="Enter verification code" class="woocommerce-Input woocommerce-Input--text input-text">
    <button class="woocommerce-Button button woocommerce-form-login__submit" type="button" onclick="codeverify();">Verify code</button>
</form>

<!-- The core Firebase JS SDK is always required and must be listed first -->
<script src="https://www.gstatic.com/firebasejs/7.6.1/firebase.js"></script>

<!-- TODO: Add SDKs for Firebase products that you want to use
     https://firebase.google.com/docs/web/setup#config-web-app -->

<script>
    // Your web app's Firebase configuration
    var firebaseConfig = {
    apiKey: "*****",
    authDomain: "*****",
    databaseURL: "*****",
    projectId: "*****",
    storageBucket: "*****",
    messagingSenderId: "*****",
    appId: "*****"
    };
    // Initialize Firebase
    firebase.initializeApp(firebaseConfig);
</script>

<script>
window.onload=function () {
  render();
};
function render() {
    window.recaptchaVerifier=new firebase.auth.RecaptchaVerifier('recaptcha-container');
    recaptchaVerifier.render();
}
function phoneAuth() {
    //get the number
    var number=document.getElementById('number').value;
    //phone number authentication function of firebase
    //it takes two parameter first one is number,,,second one is recaptcha
    firebase.auth().signInWithPhoneNumber(number,window.recaptchaVerifier).then(function (confirmationResult) {
        //s is in lowercase
        window.confirmationResult=confirmationResult;
        coderesult=confirmationResult;
        console.log(coderesult);
        alert("Message sent");
    }).catch(function (error) {
        alert(error.message);
    });
}
function codeverify() {
    var code=document.getElementById('verificationCode').value;
    coderesult.confirm(code).then(function (result) {
        alert("Successfully registered");
        var user=result.user;
        console.log(user);
    }).catch(function (error) {
        alert(error.message);
    });
}    
</script>
<?php }
add_action('woocommerce_after_customer_login_form', 'devsol_customer_form');

I want if user successfully verify the OTP then this function call in my php file. I am using function.php file in my wordpress theme.

function devsol_customer_auth() {
    $user_phone = sanitize_text_field( $_POST['number'] );
    if ( $user = get_user_by( 'login', $user_phone) ) {
        $user_id = $user->ID;
        $user_roles = $user->roles;
        $user_role = array_shift($user_roles);
        if ( $user_role === 'customer') {
            if ( apply_filters( 'woocommerce_registration_auth_new_customer', true, $user_id ) ) {  
                wc_set_customer_auth_cookie( $user_id );
                }   
            }
        }           
}
add_action('init', 'devsol_customer_auth');

Someone please help

Answer 1

You cannot directly call php function from javascript(JS) as JS runs on the client side like on the browser and your php file exists on the webserver. In order to do something like that, you'll need to make request to the php file and pass parameter in the request(could be GET or POST). A simple example of such could be

1. create a separate php file, lets say actions.php, that will be hit by the request.

2. make a request to the file from JS E.g.

   function httpGet(theUrl)
   {
       var xmlHttp = new XMLHttpRequest();
       xmlHttp.open( "GET", theUrl, false ); // false for synchronous request
       xmlHttp.send( null );
       return xmlHttp.responseText;
   }
   httpGet('www.yourSite.com/actions.php?phone=' + userPhoneNumber);
   

This should resolve your problem.