mandresi

Great ! You’re welcome. Good luck ??

@bcworkz – I understand your point. Thank you.

ok.

• This reply was modified 9 months, 1 week ago by bcworkz. Reason: email removed

I think this error has nothing to do with the dropdown.

I have already tested the code and it works on my machine. Perhaps it has something to do with how it is implemented with DIVI. I don’t really know what to say as I can’t see what is really happening on your side.

Maybe It may help if you put your website online.

Can you look if there is an error on the developer console when you load your page ? You press F12 and click on the Console Tab. This console shows all Javascript errors.

In fact, it is not a backtick that you just entered. Here is a link about how to do it on a mac

https://discuss.codecademy.com/t/how-do-i-get-a-backtick-on-mac/536139/5

I forgot but there should also be backtick around

venueCtrl.innerHTML = '<option value="0">${dropDownLabel}</option>'

Please replace the single quotes with backtick

• This reply was modified 9 months, 1 week ago by mandresi.

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 9 months, 1 week ago by mandresi.
• This reply was modified 9 months, 1 week ago by mandresi.
• This reply was modified 9 months, 1 week ago by mandresi.

You’re welcome! Happy to help. Enjoy ??

@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": "[email protected]",
    "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": "[email protected]",
    "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. Have fun ??

@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": "[email protected]",
    "website": "https://www.redrocksonline.com/"
  },
  {
    "name": "Madison Square Garden",
    "contact_name": "Michael Rodriguez",
    "position": "Events Coordinator",
    "number": "(212) 465-MSG1 (6741)",
    "email": "[email protected]",
    "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.

Yes. Enjoy ??

Hi,

This time, I have installed and tested your plugin. It’s working now. You can find the updated code below:

<?php
/** Plugin Name: mycustomForm
 * Plugin URI: none
 * Description: Test.
 * Version: 0.1
 * Author: Roelof Wobben
 * Author URI: none
 **/
class mycustomForm {
    public function __construct() {

        // add assests(js,css , etc)
        add_action('wp_enqueue_scripts', array($this, 'load_assets'));

        // add shortcode
        add_shortcode('contact_form', array($this, 'load_shortcode'));

        // add validation
        add_action( 'admin_post_process_contact_form', array($this, 'process_contact_form') );
        add_action( 'admin_post_nopriv_process_contact_form', array($this, 'process_contact_form') );
    }
    public function load_assets() {
        wp_enqueue_style(
            'mycustomForm',
            plugin_dir_url(__FILE__) . '/css/mycustomForm.css',
            array(),
            1,
            'all'
        );
        wp_enqueue_script(
            'mycustomForm',
            plugin_dir_url(__FILE__) . '/js/mycustomForm.js',
            array(),
            1,
            true
        );
    }
    public function load_shortcode($atts) {
        $default = array (
            "subject" => ""
        );
        $a = shortcode_atts($default, $atts);
        ob_start();
        ?>
        <div class="container">
            <form action="/wp-admin/admin-post.php" method="post">
                <input type="hidden" name="action" value="process_contact_form">
                <h1>Contact Form</h1>
                <div class="form-group">
                    <input type="text" value="<?php echo $a['subject'] ?>" />
                    <label for="input" class="control-label">Subject</label></i>
                </div>
                <div class="form-group">
                    <input type="text" />
                    <label for="input" class="control-label">Email</label><i class="bar"></i>
                </div>
                <div class="form-group">
                    <textarea></textarea>
                    <label for="textarea" class="control-label">Message</label><i class="bar"></i>
                </div>
                <div class="button-container">
                    <button type="submit" class="button"><span>Submit</span></button>
                </div>
            </form>
        </div>
        <?php
        return ob_get_clean();
    }
    public function process_contact_form() {
        echo "Form is beiing validated";
        // Verify the nonce
        if ( !isset( $_POST['contact_form_nonce'] ) || !wp_verify_nonce( $_POST['contact_form_nonce'], 'submit_contact_form' ) ) {
            // Nonce verification failed; handle the error
            echo "Something went wrong here";
        }
        // Process the form submission
        // Your form processing code here
    }
}

new mycustomForm();

• This reply was modified 9 months, 2 weeks ago by mandresi.

As I do not have Listing PRO plugin, I can’t analyze their code to find the appropriate way on how I can help you.

Perhaps, should you contact their support in this case.