Registration fields prefilled with URL parameters

Question

I’d like to invite some users via email to register and would like to prefill the user registration fields, such as

A.) username and B.) email.

Unfortunately it is not working and my JS skills suck... Been stuck for hours... Can someone guide me in the right direction? I’ve already tried the following…

In functions.php I’m checking if we’re on Login/Register Page

function is_wplogin(){
    $ABSPATH_MY = str_replace(array('\\','/'), DIRECTORY_SEPARATOR, ABSPATH);
    return ((in_array($ABSPATH_MY.'wp-login.php', get_included_files()) || in_array($ABSPATH_MY.'wp-register.php', get_included_files()) ) || (isset($_GLOBALS['pagenow']) && $GLOBALS['pagenow'] === 'wp-login.php') || $_SERVER['PHP_SELF']== '/wp-login.php');
}

function prefillercheck(){
 if( is_wplogin() ){
     wp_enqueue_script('prefiller', 'https://example.com/prefiller.js',);
     }
}

add_action('login_enqueue_scripts', 'is_wplogin');
add_action('login_enqueue_scripts', 'prefillercheck');

So far so good… The following (“prefiller.js” javascript) also seems to be loading on Login/Register Page. But it is not populating the fields (‘user_login’ and ‘user_email’). :/ Here's the script (prefiller.js):

<script type="text/javascript">
var getUrlParameter = function getUrlParameter(sParam) {
    var sPageURL = decodeURIComponent(window.location.search.substring(1)),
        sURLVariables = sPageURL.split('&'),
        sParameterName,
        i;
    for (i = 0; i < sURLVariables.length; i++) {
        sParameterName = sURLVariables[i].split('=');
        if (sParameterName[0] === sParam) {
            return sParameterName[1] === undefined ? true : sParameterName[1];
        }
    }
};

var VARIABLE = getUrlParameter('PARAMETER');

if (VARIABLE != null) {
     document.getElementById('INPUT-FIELD-ID').value = VARIABLE;
}

Source: Approach idea https://www.youtube.com/watch?v=2nUOQl4E9HY

Code source (js script): https://wplearninglab.com/contact-form-7-get-value-from-url/

Code source (Check is_wplogin): https://wordpress.stackexchange.com/a/237285

Since it wasn't working I tried to run the following script instead of the prefiller.js. Without luck...

<script type="text/javascript">

var query = window.location.search.substring(1);

//alert(query);

var paramList = query.split('&');

for (var i=0; i < paramList.length; i++)
{
    var param = paramList[i].split('=');

    //alert (param[0] + ' - ' + param[1]);

    //change this to name of your URL variable
    if(param[0] == 'email')
    {
        //change this to ID of target element
        var element = document.getElementById('user_email');

        if (element)
        {
            for (var j=0; j < element.options.length; j++)
            {
                //alert('option ' + j + "; " + element.options[j].text);

                if (element.options[j].text == decodeURIComponent(param[1])
                {
                    //alert(element.options[j].text);

                    element.options[j].selected = true;

                    break;
                }
            }
        }
    }
}

</script>

Source: https://github.com/prioritythinking/parse-url-parameters-javascript/blob/master/JavaScript-URL-Variables-Snippet.html

Can someone tell me what I am missing? :/

Your help is much appreciated! Thank you.

Answer 1

Give this code a try:

var query = window.location.search.substring(1);

var paramList = query.split('&');

for (var i=0; i < paramList.length; i++)
{
    var param = paramList[i].split('=');

    if(param[0] == 'email')
    {
        var element = document.getElementById('user_login');

        if (element)
        {
            element.value = decodeURIComponent(param[1]);
        }
    }
}

I used the browser inspector console to test it out quickly and debug it — there was an error in the syntax (a missing parenthesis) and user_email needed to be user_login. It's a great tool if you aren't familiar with it and can speed up the time it takes to write JS. Also, element.value was the key to changing the field.

Incidentally, you don't need this line:

add_action('login_enqueue_scripts', 'is_wplogin');

... in fact, it doesn't do anything! prefillercheck calls is_wplogin directly.