Populate Fields via Drop-down selection

I don’t know of a plugin but if you want to accomplish this, the simplest way is to use Javascript for everything.

I will give you some details below:

1. You can save all the venues along with their respective branch information inside JSON data.
2. Set an event listener on the drop-down control. The function will identify the selected venue and then lookup its details from the JSON data.
3. Display the found informations in a placeholder. (It will be a DIV html tag for example)
4. All necessary formatting of the information will also be done through Javascript.

I hope this will help.

@nomisrenrut > Please can you tell us :

• If the venues are static or dynamic
• If they are dynamic, who will be in charge of updating them ? Is it the administrator or your users.

Depending on that, we can propose you the best solution.

@nomisrenrut > As the data changes very rarely, you don’t need any user interface to change it. The best way to handle your problem is then to use Javascript.

However, note that extracting the data and populating the drop down field may not be enough as you may need to process the selected venue in the back end.

Here, I will give you a Javascript code to solve your problem. You can slightly modify it to suit your needs. That script will read the data and then according to the selected venue, it will display the formatted info for the corresponding branch.

=====
JSON
=====

[
  {
    "name": "Red Rocks Amphitheatre",
    "contact_name": "Amanda Johnson",
    "position": "General Manager",
    "number": "(303) 697-4939",
    "email": "amanda.johnson@redrocksonline.com",
    "website": "https://www.redrocksonline.com/"
  },
  {
    "name": "Madison Square Garden",
    "contact_name": "Michael Rodriguez",
    "position": "Events Coordinator",
    "number": "(212) 465-MSG1 (6741)",
    "email": "michael.rodriguez@msg.com",
    "website": "https://www.msg.com/madison-square-garden"
  }
]

First, you will need to create the JSON data. You will for example store it in your WordPress upload folder : /wp-content/uploads/venues.json

This JSON data will contain all the venues and their respective branch. If one day, you need to update the venues, just change this file.

========
HTML / CSS
========

Here is the HTML code for the drop down and the placeholder for the branch. The solution you will have to choose for applying that code will depend on the way you implement your form. (Form plugin ? Direct change on WordPress templates ? etc.)

<style>
  .hidden {
    display: none;
  }
</style>

<form>
  <select id="venue-ctrl"></select>
  <div id="venue-info" class="hidden">
    <div id="venue__name"></div>
    <div id="venue__contact_name"></div>
    <div id="venue__position"></div>
    <div id="venue__number"></div>
    <div id="venue__email"></div>
    <div id="venue__website"></div>
  </div>
</form>

=========
JAVASCRIPT
=========

(() => {
  /* ****************************************** */
  /*  change the following constants as needed  */
  /* ****************************************** */
  const venueFilename = "/wp-content/uploads/venues.json"; // JSON file name
  const venueCtrlId = 'venue-ctrl'; // ID of the drop-down
  const venueInfoId = 'venue-info'; // ID of the DIV placholder to display the branch info

  const buildLinkElement = (value, link = value) => {
    const el = document.createElement('a');
    el.setAttribute('href', link);
    el.appendChild(new Text(value));
    return el;
  };

  const fieldProcessor = {
    "name": v => new Text(v),
    "contact_name": v => new Text(v),
    "position": v => new Text(v),
    "number": v => new Text(v),
    "email": v => buildLinkElement(v, 'mailto:' + v),
    "website": v => buildLinkElement(v)
  };

  function loadVenue() {
    fetch(venueFilename)
      .then(response => {
        if (!response.ok) {
          throw new Error('Unable to load the venue file');
        }
        return response.json();
      })
      .then(data => {
        initVenue(data);
      })
      .catch(error => {
        alert(error);
      });
  }

  function initVenue(venues) {
    const venueCtrl = document.getElementById(venueCtrlId);
    const venueInfoEl = document.getElementById(venueInfoId);

    /* Populating the drop-down field */
    venueCtrl.innerHTML = '<option value="0">Select a venue</option>';

    venues.forEach((venue, i) => {
      const name = venue.name;
      const venueItemObj = document.createElement('option');
      venueItemObj.setAttribute('value', i + 1);
      venueItemObj.appendChild(new Text(name));
      venueCtrl.appendChild(venueItemObj);
    });

    /* Set event listener on drop-down when selection changes */
    venueCtrl.addEventListener('change', () => {
      const selectedId = venueCtrl.value - 1;

      if (selectedId < 0) {
        venueInfoEl.classList.add('hidden');
        return;
      }

      venueInfoEl.classList.remove('hidden');

      const venue = venues[selectedId];
      const fieldList = [
        'name',
        'contact_name',
        'position',
        'number',
        'email',
        'website'
      ];

      fieldList.forEach(fieldName => {
        const el = document.getElementById("venue__" + fieldName);
        if (el) {
          el.textContent = '';
          if (venue[fieldName]) {
            const fieldValue = venue[fieldName];
            el.appendChild(fieldProcessor[fieldName](fieldValue));
          }
        }
      });

    });
  }

  document.addEventListener('DOMContentLoaded', () => {
    loadVenue();
  });

})();

I hope this will help.

You’re welcome. Have fun 🙂

@nomisrenrut – Here, I have modified the code to handle the tabs you said.

I also saw that in your code you tried to use an additional field named “introduction”, so I had taken that into account when doing the code update. Now the code can handle any tab you want. You just have to create the HTML for the each tab and initialize the javascript code. No need to duplicate that latter.

Concerning the styling, I would suggest that you put your styles in the style.css of you child theme. Don’t forget to load that file in your functions.php otherwise it would not be applied.

You can have a look at below site for more info:
https://www.elegantthemes.com/blog/divi-resources/divi-child-theme#what-you-will-need-to-create-a-divi-child-theme

===========================
JSON: national-venues.json
===========================
[
  {
    "name": "Red Rocks Amphitheatre",
    "contact_name": "Amanda Johnson",
    "position": "General Manager",
    "number": "(303) 697-4939",
    "email": "amanda.johnson@redrocksonline.com",
    "website": "https://www.redrocksonline.com/",
    "introduction": "<p><b>Amanda Johnson</b> orchestrates seamless events that blend the magic of music with the breathtaking surroundings, creating unforgettable experiences for concert-goers.</p>"
  },
  {
    "name": "Madison Square Garden",
    "contact_name": "Michael Rodriguez",
    "position": "Events Coordinator",
    "number": "(212) 465-MSG1 (6741)",
    "email": "michael.rodriguez@msg.com",
    "website": "https://www.msg.com/madison-square-garden",
    "introduction": "<p><b>Michael Rodriguez</b> seamlessly orchestrates events as the dedicated <i>Events Coordinator</i> at the iconic <b>Madison Square Garden</b>, ensuring unforgettable experiences for audiences in the heart of New York City.</p>"
  }
]

The CSS file has to be put inside style.css of your child theme. Feel free to modify it as needed.

=====
CSS
=====
.space {
    margin-bottom: 25px;
}

/* CSS formatting for the branch info */
.venue__name {}
.venue__contact_name  {}
.venue__position {}
.venue__number {}
.venue__email {}
.venue__website {}
.venue__introduction {}

======
HTML
======

<!-- HTML code for National venues -->
<form>
    <select id="nationalVenue-ctrl" class="space"></select>
    <div id="nationalVenue-info"></div>
</form>

<!-- HTML code for regional venues -->
<form>
    <select id="regionalVenue-ctrl" class="space"></select>
    <div id="regionalVenue-info"></div>
</form>

============
Javascript
============

function processJSONVenue({venueFilename, venueCtrlId, venueInfoId, dropDownLabel}) {

  /**
   * This function creates an HTML link from a value.
   * It can be used to generate website, email or tel link
   */
  const buildLink = (value, link = value) => {
    return <a href="${link}">${value}</a>;
  };

  /**
   * The following object comprises properties, each housing
   * a function that produces HTML code responsible for formatting
   * the branch item associated with the property's name.
   */
  const fieldFormat = {
    "name": v => 'Name: ' + v,
    "email": v => buildLink(v, 'mailto:' + v),
    "website": v => buildLink(v),
  };

  let fieldList = [];

  function loadVenue() {
    fetch(venueFilename)
      .then(response => {
        if (!response.ok) {
          throw new Error('Unable to load the venue file');
        }
        return response.json();
      })
      .then(data => {
        fieldList = data[0] ? Object.keys(data[0]) : [];
        initVenue(data);
      })
      .catch(error => {
        alert(error);
      });
  }

  function initVenue(venues) {
    const venueCtrl = document.getElementById(venueCtrlId);
    const venueInfoEl = document.getElementById(venueInfoId);

    /* Populating the drop-down field */
    venueCtrl.innerHTML = <option value="0">${dropDownLabel}</option>;
    venues.forEach((venue, i) => {
      const name = venue.name;
      const venueItemObj = document.createElement('option');
      venueItemObj.setAttribute('value', i + 1);
      venueItemObj.appendChild(new Text(name));
      venueCtrl.appendChild(venueItemObj);
    });

    /* Set event listener on drop-down when selection changes */
    venueCtrl.addEventListener('change', () => {
      const selectedId = venueCtrl.value - 1;
      venueInfoEl.textContent = '';

      if (selectedId < 0) {
        return;
      }

      const venue = venues[selectedId];
      fieldList.forEach(fieldName => {
        if (venue[fieldName]) {
          const fieldValue = venue[fieldName];

          /* formats the field if a formatting function exists */
          const fieldContent = fieldFormat[fieldName] ?
            fieldFormat[fieldName](fieldValue) :
            fieldValue;

          const el = document.createElement('div');
          el.className = "venue__" + fieldName;
          el.innerHTML = fieldContent;
          venueInfoEl.appendChild(el);
        }
      });
    });
  }

  document.addEventListener('DOMContentLoaded', () => {
    loadVenue();
  });
}

/* ****************************************** */
/*  update the following parameters as needed */
/* ****************************************** */
processJSONVenue(
  {
    venueFilename: '/wp-content/uploads/national-venues.json', // JSON file name
    venueCtrlId: 'nationalVenue-ctrl',   // ID of the drop-down
    venueInfoId: 'nationalVenue-info',  // ID of the DIV placeholder to display the branch info
    dropDownLabel: 'Select a National Branch'
  }
);

processJSONVenue(
  {
    venueFilename: '/wp-content/uploads/regional-venues.json', // JSON file name
    venueCtrlId: 'regionalVenue-ctrl',   // ID of the drop-down
    venueInfoId: 'regionalVenue-info',  // ID of the DIV placeholder to display the branch info
    dropDownLabel: 'Select a Regional Branch'
  }
);

I hope this help.

You’re welcome! Happy to help. Enjoy 🙂

I guess it must be a Javascript error. When I look at the code you modified there is something missing. The correct code is:

const buildLink = (value, link = value) => {
  return '<a href="${link}">${value}</a>';
};

There should be a backtick ( ` ) symbol surrounding the <a href ></a> HTML tag.

Please, when you copy the code, replace the quote with a backtick as it seems that there is a bug in the forum editor and the backtick is not displayed.

• This reply was modified 2 years, 1 month ago by mandresi.
• This reply was modified 2 years, 1 month ago by mandresi.
• This reply was modified 2 years, 1 month ago by mandresi.