Conceal element with PHP and CSS upon filling another field

Currently working on a Dealer locator customization in Wordpress, and I have a specific requirement to adjust certain fields. One of the tasks is to conditionally hide a field based on another field's input.

The situation:

If the user enters data in the Address field but leaves the Address2 field empty, the Address element should be displayed. I managed to achieve this functionality successfully, but now I am facing a challenge with the next step. When the user fills in the Address2 field, it should display address2 and hide the Address field.

The code snippet I am presently using:

function custom_listing_template() {

global $wpsl, $wpsl_settings;

$listing_template = '<li class="my_change_list" data-store-id="<%= id %>">' . "\r\n";

$listing_template .= "\t\t" . '<div class="locator_wrap_left">' . "\r\n";
$listing_template .= "\t\t" . '<div class="locator_title">' . "\r\n";
$listing_template .= "\t\t\t\t" . wpsl_store_header_template( 'listing' ) . "\r\n";
$listing_template .= "\t\t" . '</div>' . "\r\n";
$listing_template .= "\t\t" . '<div class="locator_left">' . "\r\n";
$listing_template .= "\t\t\t" . '<p><%= thumb %>' . "\r\n";

$listing_template .= "\t\t\t\t" . '<span class="wpsl-street street1"><%= address %></span>' . "\r\n";
$listing_template .= "\t\t\t\t" . '<% if (address2) {  %>' . "\r\n";
$listing_template .= "\t\t\t\t" . ' <span class="wpsl-street street2"><%= address2 %></span>' . "\r\n";
$listing_template .= "\t\t\t\t" . '<% } %>' . "\r\n";
$listing_template .= "\t\t\t\t" . '<span>' . wpsl_address_format_placeholders() . '</span>' . "\r\n";
$listing_template .= "\t\t\t\t" . '<span class="wpsl-country"><%= country %></span>' . "\r\n";
$listing_template .= "\t\t\t" . '</p>' . "\r\n";
$listing_template .= "\t\t" . '</div>' . "\r\n";

I attempted the following solution, but unfortunately, it did not resolve the issue!

document.getElementById('street1').style.display = 'none';

UPDATE: Currently exploring options that avoid utilizing JavaScript since the file is predominantly PHP-based.

javascripthtmlcsswordpress

Answer №1

employ

var elements = document.getElementsByClassName('street1');
for(var i=elements.length; element--;) element[i].style.display = 'none';

preferably over 

document.getElementById('street1').style.display = 'none';

since street1 is a class, not an ID, and getElementsByClassName retrieves multiple elements.

Answer №2

street1 is classified as a class element, not an id.

To hide it, use 

document.getElementsByClassName('street1').style.display = 'none';
instead of 
document.getElementById('street1').style.display = 'none';

Remember to iterate through all the elements in order to hide them:

var street1 = document.getElementsByClassName('street1');

for (var x = 0; x < street1.length; x++) {
  street1[x].style.display = 'none';
}
<span class='street1'>element 1</span>
<span class='street1'>element 2</span>
<span class='street1'>element 3</span>
<span class='street1'>element 4</span>

Check out this JSFIDDLE Example.

Answer №3

Here is a demonstration of how two controls can interact with each other: input text in one and the other will appear.

JSFiddle example for reference

To achieve this functionality, you can utilize the placeholder-shown selector. If desired, you can make the placeholder display as a white space to keep it hidden from view.

Below is the code snippet:

HTML:

<input type="text" id="aa" placeholder=" ">
<input type="text" id="bb">

CSS:

#aa:placeholder-shown ~ #bb{
    display:none;
}

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

Navigating through an array for drawing a polyline on Google Maps

Is there a way to efficiently loop through an array of coordinates in order to set markers and draw a line on Google Maps using the path property? Please see the example below for clarification: const lineSymbol = { path: google.maps.SymbolPath.FORWARD_ ...

javascriptarraysgoogle-mapsgoogle-maps-markerspolyline

Is there a way in PHP to retrieve database values and display them in HTML text boxes when a button is clicked, all without

Is there a way to dynamically fetch values from a database and display them in text boxes without the need to refresh the page? Here is the PHP code snippet I have been working on: <?php include 'Connection.php'; $sql = mysqli_query($conn ...

javascriptphpjqueryhtmlajax

Sort through an array of objects by their respective values within another array of nested objects

I am struggling to filter out positions from the positions array that are already present in the people array. Despite trying different combinations of _.forEach and _.filter, I can't seem to solve it. console.log(position) var test = _.filter(posi ...

javascriptlodash

A guide to testing redux API using Node.js

I'm diving into the world of nodejs and redux as a beginner. I managed to install node v7.10 on my computer. While reading through the Redux documentation, it mentioned that I should be able to test the action, reducer, and store API without a user in ...

javascriptnode.jsredux

The method element.focus() is ineffective on a contentEditable div element that has been rerendered

https://example.com import React, { useEffect, useState } from "react"; import "./styles.css"; const MyCustomComponent = () => { const [text, setText] = useState(""); useEffect(() => { const textarea = documen ...

javascriptreactjsrichtext

Unexpectedly, the child component within the modal in React Native has been resetting to its default state

In my setup, there is a parent component called LeagueSelect and a child component known as TeamSelect. LeagueSelect functions as a React Native modal that can be adjusted accordingly. An interesting observation I've made is that when I open the Lea ...

javascriptreactjsreact-nativeredux

Execute JavaScript function after the reset button has been clicked

Is there a way to execute a function right after the form elements are reset by the <input type="reset"/> button? ...

javascripthtmlonclickreset

The object[] | object[] type does not have a call signature for the methods 'find()' and 'foreach()'

Here are two array variables with the following structure: export interface IShop { name: string, id: number, type: string, } export interface IHotel { name: string, id: number, rooms: number, } The TypeScript code is as shown below ...

javascriptarraysangulartypescripttypes

Increase the Speed of setInterval in JavaScript

I'm currently experimenting with gradually decreasing the interval at which a function is executed within a setInterval method. Below is a simplified example code snippet: var speed = 100; window.setInterval( speed -= 0.01 , speed); I suspect that ...

javascript

Adding complex JSON format to an HTML table involves formatting the data correctly and then using

Utilizing AJAX, I fetched a JSON response and am now looking to map the JSON data into an HTML table structured like this: { "records": [{ "type_id": 000001, "type_desc": "AAAAAA", "type_createby": "Adam" }, { "type ...

javascriptjqueryhtmljsonajax

The Power of AngularJS Directives in Harnessing jQuery DOM Event Bindings

I have developed a new directive and have some doubts about the binding syntax like element.bind("click", function(){}). Every time the link function of the directive is called, it creates a duplicate binding. What is the best Angular approach to handle th ...

javascriptjqueryangularjs

Adjusting Countdown.js functionality

I stumbled upon countdown.js after coming across this helpful resource: My knowledge in JavaScript is limited, and I'm looking to configure the countdown to start exactly a week from today, which would be on February 24, 2014. Is there a way to twea ...

javascriptjavascript-framework

Head and tail tally

I've been working on coding a heads or tails system in JavaScript, but I've hit a roadblock. I am struggling to find a solution. Here is what I have so far: const userInput = prompt("Heads or Tails?"); const arr = [0, 0, 1, 1, 1, 0, 1, 0, 1]; ...

javascriptarraysalertvar

What is the best way to retrieve promiseValue from the response array?

I've run into some challenges while using Promise.all() for the first time with two get-methods. When I check the response in my console log, I can see the data I'm trying to fetch under promiseValue. However, I'm unsure of how to access it. ...

javascriptvue.jspromisegetfetch

What is the best way to navigate a class to the end of the queue?

My table cells have a specific class structure: class="a", and/or class="b": class="a b". This is the CSS: .a { background-color:blue; } .b { background-color:green; } When the classes intersect, the color becomes green. I want to implement a functional ...

jquerycss

Identify and sort JSON objects based on keys with multiple values

My JSON file contains objects structured like this: [ { "name" : "something", "brand": "x", "category" : "cars" }, { "name" : "something2 ...

javascriptjson

Is there a way to automatically populate textbox values using a MySQL query response when the dropdown selection is changed?

How can I make the fields customer_address, customer_city, customer_state, and customer_zip autofill upon changing the selection in the dropdown for customer_name? I've searched everywhere but cannot find a solution. Your assistance would be greatly ...

javascriptjquerymysqlajaxonchange

Accordion transition effect designed by yours truly

After creating an accordion using jquery and css, everything seems to be working fine except for the transition effect when collapsing. The collapse action is too fast, both when opening and closing. I am unable to apply a slower transition effect. Check ...

jqueryhtmlcss

React: When state is updated and a console.log is used, the console displays the previous state instead of the updated

Upon clicking the button, a peculiar sequence unfolds - the console displays 0 and the page refreshes to show 1 function App() { const [count, setCount] = useState(0); const addOne = () => { setCount(count + 1) console.log(count) } ...

javascriptreactjs

The website showcases mobile responsiveness; however, it does not translate to mobile devices

Hello Stockoverflow Community, Recently, I encountered an issue with the responsiveness of my website: The design on desktop appears as: [deleted] However, the mobile version displays as: [deleted] I have already tried clearing my cache, both on Cloudf ...

phphtmlcssresponsive-design