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

Manipulate CSS Properties with Javascript Based on Dropdown Selection

I am currently working on implementing a feature that involves changing the CSS property visibility: of an <input> element using a JavaScript function triggered by user selection in a <select> dropdown. Here's what I have so far in my cod ...

javascriptjqueryhtmlcss

Retrieve the complete HTML content of a webpage, including the values of all input fields

I'm attempting to save the entire webpage as an HTML file, including all previously entered values in input fields. I have already tried this method: $("#content").html(); However, it does not retain the values entered into input fields. $("#conten ...

javascriptjqueryhtml

Grab a parameter from the URL and insert it into an element before smoothly scrolling down to that

On a button, I have a URL that looks like this: www.mywebsite.com/infopage?scrollTo=section-header&#tab3 After clicking the button, it takes me to the URL above and opens up the tab labeled tab3, just as expected. However, I would like it to direct m ...

javascripthtmltypescript

The functionality of Small Caps is not supported by Twitter Bootstrap when using Chrome browser

I am working with a very basic markup <h1> <a href="#"> My Title </a> </h1> and I have this CSS applied h1 { font-variant: small-caps; } You can see the result on this jsfiddle link. The problem arises when u ...

csstwitter-bootstrap

What is the best way to create a border for the active class nav-item in Bootstrap 4?

I am facing an issue with changing styles in the nav-item. I have created a separate style sheet and added the necessary code to make the changes. Surprisingly, the changes are reflecting well in Internet Explorer but not in Firefox. Can anyone guide me on ...

cssbootstrap-4

Using "overflow-x: hidden" is ineffective on mobile devices

I'm facing an issue where the CSS property overflow-x: hidden is not working on mobile devices. Here is a snippet of my HTML code: <div class="topbar"> <div class="navbar-brand float-left"> <a href="#"><img src="asset ...

cssbootstrap-4overflow

Unable to import global CSS in React; however, local components are working fine

My React application is having trouble loading global CSS styles. While local components are able to access their own styled-components, the global CSS styles are not being applied across all components. I have tried various import paths and different file ...

cssreactjs

Unusual Actions from the Text Field

Please take a look at this link <div id="textarea_wrapper"> <textarea>How and where is my width derived from?</textarea> </div> #textarea_wrapper{ height: 250px; border:thick solid green; } textarea{ background-color: #930; ...

csshtml

dirpagination fails to display all rows in the dataset

I've been working on creating tables with 3 divs, as shown in the link below:- https://github.com/anirbanmishra/congress.php/blob/master/web_test Additionally, I have a javascript file available here:- https://github.com/anirbanmishra/congress.php/bl ...

javascripthtmlangularjsangularjs-ng-repeatdirpagination

Achieving the perfect overlay and centered image effect using CSS

I am attempting to design a banner consisting of 3 images, each with dimensions of 900x420, similar to the image shown below. I am looking for advice on how to align these images such that they are horizontally centered. Any suggestions would be greatly ap ...

htmlcsstwitter-bootstrap-3

What is the best way to ensure that an element remains active even after a page refresh?

I have been using this code to activate the current element, which I came across on a website called "w3schools.com". However, whenever I refresh the page, the currently active element disappears. Is there a way to ensure that the active element remains hi ...

javascripthtmlcss

In IE9, users can select background elements by clicking on specifically positioned links

Trying to turn an li element into a clickable link by overlaying it with an a element set to 100% height and width. While this solution works in Chrome and FF, IE9 is causing issues as other elements behind the link remain selectable, rendering the link un ...

cssinternet-explorer-9

update url to redirect hashbang with history.js

Upon further investigation, I have observed that history.js has the ability to automatically transform http://www.site.com/some/path#/other/path into http://www.site.com/other/path when used with a html5 enabled browser. While this feature is useful, ...

javascripthtmlbrowserhistory.js

How can I preloaded self-hosted fonts in Next.js without receiving a console warning for not using the resource within a few seconds?

I am working on a project in Next.js and I want to preload my self-hosted fonts. In my code, I have the following setup: Inside my _app.js file: <Head> <link rel="preload" href="/fonts/leira/Leira-Lite.t ...

htmlcssfontsnext.jspreload

What is the method for including HTML special characters in d3.js?

I am attempting to incorporate the degree symbol in my HTML code using ° const degreeNum = d3 .select(`#windBox${order}`) .append("text") .attr("x", 250) .attr("y", 130) .style("font", "bold 50px sans-serif") ...

javascripthtmld3.js

What is the way to change the background color using HTML5 getItem?

Here is the code I am currently using: $(this).css('backgroundcolor', localStorage.getItem('bgColorr') + " !important;"); When I execute this: alert( localStorage.getItem('bgColorr') + " !important;"); I receive the correc ...

jquerycsshtmllocal-storage

Has the querystring hack become outdated?

For a long time, I have been adding a query string to my CSS link whenever I made changes that needed to be reflected on client machines: <link href="/Resources/styles/styles.css?v=1" rel="stylesheet" /> Lately, I've noticed that Chrome seems ...

htmlcssgoogle-chromebrowser

trouble seeing images with an array input and ngFor in Angular

I am encountering issues while attempting to exhibit an array of images by their source link using ngFor. It seems like there are errors hindering the functionality! Below is the image HTML code located within my card component: <div class="Session-Pa ...

javascripthtmlarraysangular

Loading screen displayed while transitioning between routes within Angular

I have been struggling to implement a loading spinner in my project. How can I display a loading screen when changing routes in Angular? Here is the HTML code snippet: <div *ngIf="showLoadingIndicator" class="spinner"></div> ...

cssangulartypescript

Discovering whether an image contains a caption with the help of JavaScript

There are various websites that display captions on images in paragraphs, h1 tags, or contained within a div along with the image. I am interested in learning how to determine if an image has an associated caption using JavaScript, especially when the cap ...

javascripthtmlcss