How to manipulate an existing placeholder text using JQuery

Recently I faced difficulties with an input type field of a registration form where there is an existing Placeholder text attached with the repeat password field. But there is no way to modify the repeat/confirm password’s placeholder text. So this is inheriting the main password field’s placeholder dynamically.

So after a bit of research, I thought, why don’t I try with the JQuery or JavaScript function to manipulate the repeat password field’s placeholder text.

Though I’m facing the issue in my WordPress site, there are several ways to inject the JQ/JS snippet into the WordPress site. Like as: 

• Choose the default way like enqueue the JS file through the theme/child-theme’s funcitons.php file then write the code on the register JS file. 
• Another one (the easiest way for non-techy)- install a plugin like Custom CSS & JS to inject custom CSS/JS file on the site frontend pages.

So I choose the second option to consume my time.

PROCESS I FOLLOWED TO MAKE IT HAPPEN

• Inspect the associated page where the Registration form is placed to know the actually class/id of the field. So that I can manipulate it’s output.
• Then write this (below) codes on the Custom CSS & JS plugin’s -> Add New JS code editor

jQuery(document).ready(function( $ ){
    // Your code in here
	$('#password_2934_2').removeAttr('placeholder');
	$('#password_2934_2').attr("placeholder", "Confirm your password?");
});

Bingo! Now, the default placeholder text is modified by my custom one. Confirm your password?

Code explanation:  

• First I just remove the default/existing placeholder attribute using removeAttr() function from the registration form and then
• Add again the placeholder attribute with JavaScript .attr() function to render my own message.

This is all for today. See you in my next post.