How to manipulate an existing placeholder text using JQuery

Recently I faced a difficulties with a 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 actually this is inheriting the main password field’s placeholder dynamically.

So after a few researching 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 so there are several way to inject the JQ/JS snippet in 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 times 🙂

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 as you can see 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 on my next post <3 

Default image
MM Aurangajeb
Support Engineer, Blogger. Learning Web Design & Developing, Tech & WordPress Enthusiast, WordPress Lover. Always try to learn new things, new hacks, new techs.

Newsletter Updates

Enter your email address below to subscribe to our newsletter

One comment

  1. […] called Custom CSS & JS or any other Code Snippets injection plugin. You can also inject this JQuery code snippet manually but that requires a little bit technical knowledge so I”m skipping that for a quick […]

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.