Get the value from an elementor form select and pass into a loop

Loops & Logic
#1

Does anyone know how to get the value from an elementor form select and pass into a loop?

I am using a template to populate a select dropdown with CPT’s “location” this works, but I

My CPT “location” is storing email addresses in a custom field. The idea is to dynamically set the email action with the emails that are stored in the location that was picked from the select.

#2

This is a bit complicated, and L&L doesn’t really run loops after the page loads, so you’ll definitely need some Javascript to get this working.

I don’t think I can get you a full solution because I don’t have your page in front of me, but I would maybe generate a loop of all your location emails in L&L and pass them to JS using <Set js=variable_name type=string>..</Set>, then try to populate the field with the correct value when the user interacts with the select dropdown. Your template might look something like this:

<label for="locations">Choose a location</label>
<select name="locations" id="myLocationDropdown">
  <option value="none">Select a location</option>
  <Loop type=location>
    <option value="{Field id}"><Field title /></option>
  </Loop>
</select> 

<input name=email type=text id="myEmailField" placeholder="Select a location" disabled />

<Loop type=location>
  <Set js="location_{Field id}" type=string><Field email /></Set>
</Loop>

and your script might look something like this:

// Get a reference to the select field and text input field
var locationDropdown = document.querySelector('#myLocationDropdown');
var myEmailField = document.querySelector('#myEmailField');

// Add an event listener to the select field
locationDropdown.addEventListener('change', function() {
  // Get the selected option's value
  var locationID = this.value;

  // Construct the variable name using the selected location slug
  var variableName = 'location_' + locationID;

  // Get the value of the variable
  var locationValue = eval(variableName);
  
  // Set the value of the text input field
  myEmailField.value = locationValue;
});

Using the eval function is generally not suggested because it executes arbitrary code, which means that it can potentially execute malicious code if input is not properly validated. I couldn’t find a way to make the JS work without it, and in theory our input is always location+ID so it should be fine here.

I can’t promise this is the best way to do it (I haven’t experimented with list, object and array type variables which would probably be better for this application) and my JS knowledge is a bit limited, but this was working on my environment, and I hope you can get it working on your end too! :slight_smile:

#3

Hi @julia

thanks for the reply. I want about this another way which seems to work fine.

<Loop type=location>
<Field title />|<Set name=loc_id><Field id /></Set><Field catering_notification_emails type=location id="{Get loc_id}" /></Loop>

I put the shortcode in the select options and set the value to the emails of the post type.

#4

@julia

Maybe you can help with this… There is a space before the first item. This causes a black option in my select dropdown.

I tried to change my code to this, but then It only renders the first post.

<Loop type=location><Field title />|<Set name=loc_id><Field id /></Set><Field catering_notification_emails type=location id="{Get loc_id}" /></Loop>