Placeholder text for ajax loaded conditional fields in the registration form

Question

i am using the following provided from @maruti-mohanty Link to the post
It is functioning very well the fields have placeholders, but i got conditional fields (ajax loaded) which when they appear dont have the placeholder text in them. Can i add something to the functions.php so that conditional fields also can have the placeholders ?

First you need to create a js file. I created it in my active theme's js folder and named it custom.js

then added the below line in this file.

/**
 * Custom js file.
 */

jQuery(document).ready(function(){
    jQuery('#user_login').attr('placeholder', 'User Name');
    jQuery('#user_email').attr('placeholder', 'User Email');
    jQuery('#user_pass').attr('placeholder', 'User Password');
});

The above adds place holder as User Name, User Email and User Password to the user_login, user_email, and user_pass input field respectively. You can change those as per your requirement.

Now you need to add/enqueue this js file which you can do by adding the below code in your active theme's functions.php

add_action( 'login_enqueue_scripts', 'wpse_login_enqueue_scripts', 10 );
function wpse_login_enqueue_scripts() {
    wp_enqueue_script( 'custom.js', get_template_directory_uri() . '/js/custom.js', array( 'jquery' ), 1.0 );
}

Answer 1

Yes you can add placeholder value after the AJAX is completed and is showing some conditional field.

You can write these code in your custom.js file.

jQuery(document).ajaxComplete(function(){
    jQuery('#user_login').attr('placeholder', 'User Name');
    jQuery('#user_email').attr('placeholder', 'User Email');
    jQuery('#user_pass').attr('placeholder', 'User Password');
});

You can mention the field id and then mention the placeholder text. Basically these set of code will be executed when the ajax has completed and hence it will add the placeholder text to field those are coming from AJAX.