Conceal Profile Field When User Metadata is Empty - WordPress

Question

Conceal Profile Field When User Metadata is Empty - WordPress

Hey everyone, hope you're all having a great evening!

I'm looking to hide a profile field when the user meta is empty.

For instance, in the image provided, I want to conceal the billing_ateco row because the billing_ateco field is blank.

https://i.sstatic.net/JAKYJ.jpg

I'm not sure where to begin with this task. If you have a solution or can point me towards a relevant thread (I couldn't find anything similar in the questions section), it would be greatly appreciated. Thanks in advance for your help!

javascript wordpress

Answer 1

Answer №1

If you're referring to user meta as user input, one way to handle it is by identifying all input elements, checking if their value is empty, and then hiding the parent tr element.

// Locate all <input> elements:
document.querySelectorAll("input").forEach( input =>{
  // Verify if the value is empty:
  if ( input.value.trim() === "" ){
    // Find the nearest <tr> parent of the input and 
    // conceal it:
    input.closest("tr").style.display = "none";
  }
});

<table>
  <tr>
    <td>
      <label for="a">Label A</label>
    </td>
    <td>
      <input id="a" />
    </td>
   </tr>
  <tr>
    <td>
      <label for="b">Label B</label>
    </td>
    <td>
      <input id="b" />
    </td>
   </tr>
  <tr>
    <td>
      <label for="c">Label C</label>
    </td>
    <td>
      <input id="c" value="Value" />
    </td>
   </tr>
</table>

Answer 2

If you're referring to user meta as user input, one way to handle it is by identifying all input elements, checking if their value is empty, and then hiding the parent tr element.

// Locate all <input> elements:
document.querySelectorAll("input").forEach( input =>{
  // Verify if the value is empty:
  if ( input.value.trim() === "" ){
    // Find the nearest <tr> parent of the input and 
    // conceal it:
    input.closest("tr").style.display = "none";
  }
});

<table>
  <tr>
    <td>
      <label for="a">Label A</label>
    </td>
    <td>
      <input id="a" />
    </td>
   </tr>
  <tr>
    <td>
      <label for="b">Label B</label>
    </td>
    <td>
      <input id="b" />
    </td>
   </tr>
  <tr>
    <td>
      <label for="c">Label C</label>
    </td>
    <td>
      <input id="c" value="Value" />
    </td>
   </tr>
</table>

Conceal Profile Field When User Metadata is Empty - WordPress

Answer №1

Similar questions

Various array outcomes are produced by identical JavaScript (SAP UI5) code

The latest alpha version of Angular2 Material Design (alpha.9-3) encountered a "404 not found" error when trying to access @angular

Vuex getters not displaying expected values in computed properties until entire page has finished loading

What is the most effective method for discerning the availability of fresh data?

The asynchronous ajax request is leading to a browser freeze

Just starting out with callback functions (using a callback as an argument)(Javascript)

Explaining the process of defining a function and addressing the situation of inserting "variable parameters/arguments" in case the first parameter/argument is deemed incorrect

Having trouble getting jQuery .click to trigger on a dynamically loaded button?

Incorporate communication between the front-end and backend

CORS blocked the JavaScript Image's request

How to determine the frequency of a specific word in a sentence using Angular 5

What steps should I follow to enable my bot to generate or duplicate a new voice channel?

Issue with disabled button in Angular 2 when using Chrome's autocomplete feature

A ReferenceError was thrown because angular is not defined within the angular-moment.js script

Create a JavaScript array by extracting IDs from an HTML document

Why is there a node_modules folder present in the npm package I authored when using it as a dependency in another module?

Icon for local system displayed on browser tab

What could be causing the repeated calls to a computed function in vuejs?

What is the best way to incorporate async and await into my functions within a Node.js environment?

I'm baffled by the fact that my routes appear to be non-existent. I cannot comprehend the reason behind this issue