Conceal information within a label

I am encountering an issue with a wordpress plugin and I am attempting to conceal (or alternatively, replace which would be fantastic) the terms "DD", "MM" and "YYYY" in the provided code:

<div class="smFormInlineFormCont">
    <div class="smInlineForm smInlineFormDate">
        <span>
        <label><input name="smFieldData[wpformfield5627][date][dd]" id="smform-field-yyyy2452" 
            value=""
            class="smFieldDD smform-control smform-field-sizelarge "
            type="number"  date-type="date"  min="1" max="31" /> DD</label></span>

        <span><label><input name="smFieldData[wpformfield5627][date][mm]" id="smform-field-mm2452" 
            value=""
            class="smFieldMM smform-control smform-field-sizelarge "
            type="number"  date-type="date"  min="1" max="12" /> MM</label></span>

        <span><label><input name="smFieldData[wpformfield5627][date][yyyy]" id="smform-field-yyyy2452" 
            value=""
            class="smFieldDD smform-control smform-field-sizelarge "
            type="number"  date-type="date" min="1" max="9999" /> YYYY</label></span>
    </div>

The issue is that I am creating a website in French so I would prefer to use JJ, MM, AAAA instead or remove entirely the letters causing inconvenience.

Thank you for your assistance :)

htmlcss

Answer №1

To change text content using javascript or jquery:

$(document).ready(function(){
   $('label').each(function(){
     var txt = $(this).text().replace("YYYY", "AAAA").replace("DD", "JJ");
     var inp = $(this).find('input');
     $(this).html('');
     $(this).append(inp);
     $(this).append(txt);
   });
 });
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>

<div class="smFormInlineFormCont">
    <div class="smInlineForm smInlineFormDate">
        <span>
        <label><input name="smFieldData[wpformfield5627][date][dd]" id="smform-field-yyyy2452" 
            value=""
            class="smFieldDD smform-control smform-field-sizelarge "
            type="number"  date-type="date"  min="1" max="31" /> DD</label></span>

        <span><label><input name="smFieldData[wpformfield5627][date][mm]" id="smform-field-mm2452" 
            value=""
            class="smFieldMM smform-control smform-field-sizelarge "
            type="number"  date-type="date"  min="1" max="12" /> MM</label></span>

        <span><label><input name="smFieldData[wpformfield5627][date][yyyy]" id="smform-field-yyyy2452" 
            value=""
            class="smFieldDD smform-control smform-field-sizelarge "
            type="number"  date-type="date" min="1" max="9999" /> YYYY</label></span>
    </div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

excess margin running along the left side of each page

When visiting http://tadris3.ir/, one may notice a peculiar space on the left side of all pages. Can anyone assist in resolving this bothersome issue? ...

jqueryhtmlcssuser-interface

Customizing meter-bar for Mozilla and Safari

I've implemented the following CSS on my meter bars but for some reason, the styling isn't showing up correctly in Safari (refer to the screenshots below). I'm relatively new to CSS and simply copied the code provided. Based on the comments, ...

htmlcsssafarimozillameter

How can we prevent the modal from extending beyond the boundaries of the phone screen when zoomed in

I am currently developing a web application that features a large content page, specifically a map which should display detailed information upon zooming in similar to Google Maps. The interactive elements on my map are clickable, triggering a modal popup ...

javascriptcssangularjstwitter-bootstrapbootstrap-modal

Two neighboring sections containing dynamic elements. One section automatically adjusts its size to fit the content, while the other allows

I need to display 2 adjacent boxes with dynamic content rendered using Angular. The Container should have the same height as Box1. The height of Box2 may vary due to its dynamic nature, but it should never be taller than Box1. If it does become higher, a s ...

htmlcssdynamicheight

What is the process to create a sticky Material UI grid element?

Currently, I am in the process of developing the front-end for a shopping cart. To organize the content, I have split the container into two columns using Grid container and Grid item. In each column, various components are placed - the left side containin ...

cssreactjsmaterial-ui

Another class is overriding the border of the text-box

I'm facing a challenge in customizing the material ui css. Specifically, I want to set the border color of a textbox to red. The issue arises when the bottom border gets overwritten. Upon investigation, I discovered that the culprit is the class MuiIn ...

javascripthtmlcssreactjsmaterial-ui

"Exploring the best locations for storing CSS, JS, and image files in Spring

Having trouble figuring out where to place my public files. I attempted the solution mentioned in this thread on Stack Overflow but it didn't work for me. I've tried putting my public folder in various locations within the WEB-INF directory, but ...

cssspring-mvc

What is the purpose of the c() function in JavaScript?

I recently stumbled upon some interesting JavaScript code in the source of a web page: function fsb329142055() { var b=new Array(57,50,102,50,52,99,50,53,52,56,102,98,102,98,101,102,101,49,53,61,101,99,110,57,111,78,109,54,114,111,56,48,102,38,1 ...

javascripthtmlforms

A guide on automating the html5 color picker using input type="color" in selenium webdriver

When interacting with an HTML color input element, a color picker window pops up that prevents viewing the DOM. I am looking for a solution to either select a color and close the window or enter a hex code in the popup's text box. Can anyone provide m ...

javascripthtmlseleniumautomation

`Text-overflow ellipsis should function consistently across both Firefox and Chrome browsers`

A design has been created to showcase captions for articles and their respective statuses. The article name box has a fixed width, with text-overflow:ellipsis applied to trim excessively long names. Additionally, a light grey dotted line is added at the en ...

htmlcssgoogle-chromefirefoxellipsis

Modifying properties through JavaScript is not possible

I created an HTML form and I'm trying to change the attributes of a div and a button but for some reason, it's not working <form> <button type='button' id='other'>Sub</button> <select id="prop"> &l ...

javascripthtml

What is the method for ensuring that the delete functionality is displayed within the same row?

In my division, there are options for names and deletion. It is displayed on my website as: 1.jpg delete The HTML code for the division is: <div id="files1" class="files"> <b class='dataname' >1.jpg</b> <span cla ...

javascriptjqueryhtmlcss

"Create a dynamic and user-friendly responsive navbar using Bootstrap with toggle

I need assistance with creating a new project template to convert a WordPress template into a Bootstrap template. Currently, I am working on the navbar and facing issues with responsive design and toggle navigation. On laptop devices, the navbar looks goo ...

htmlcsstwitter-bootstrap

Position the label to the left of the form-switch using Bootstrap

I have been struggling to align the label to the left of my switchbox. Despite searching through stackoverflow and other websites, I haven't been successful in achieving the desired alignment. Here is a trimmed down version of the code for reference: ...

htmlcsscheckboxalignment

Preserve HTML element states upon refreshing the page

On my webpage, I have draggable and resizable DIVs that I want to save the state of so they remain the same after a page refresh. This functionality is seen in features like Facebook chat where open windows remain open even after refreshing the page. Can ...

javascripthtml

Harnessing the power of flexbox for data visualization

Trying to use flexbox to display data from a dataset in my code. Here is the code snippet: <div ng-app="myapp" ng-controller="FirstCtrl"> <div ng-repeat="name in names" class="graph-wrapper"> <div class="aside-1 content"> ...

javascripthtmlcssangularjsflexbox

Developing a user-friendly widget for a website that is not optimized for mobile devices

Here's the backstory: I'm currently in the process of creating a mobile-friendly widget for my clients. Unfortunately, they have web pages that are not optimized for mobile devices, and it doesn't seem like that will change anytime soon. Th ...

javascriptjqueryhtmlcssmobile

Creating a professional HTML/CSS signature for optimal performance in Outlook 2016

For my email signature, I currently have an HTML coded design that includes a 400x415 dashed line with specific color specifications. However, Outlook Express 2016 is unable to display this element properly. Despite using inline CSS, it appears that CSS d ...

htmlcssemailsignatureoutlook-2016

Switch out the HTML content within the JavaScript include

Here is the situation: <script type="text/javascript" src="http://xy.com/something.js"></script> This code snippet in my PHP/HTML file loads the entire something.js file. Inside that file, there are lines containing "document.write..." which ...

phpjavascripthtml

Element on webpage "Expands" When Scrolled into Visibility

After posting a question on Stack Overflow, I noticed discrepancies between the element dimensions reported by Chrome Inspector and Selenium WebDriver. While Chrome Inspector showed w = 979, h = 1961, Selenium returned dimensions of 979 and 1461 respective ...

javascripthtmlseleniumselenium-webdriverwebdriver