Set url parameter from hidden element?

Suppose I have a couple of nearly-identical elements like below.

I want to trigger a popup that will fetch the relevant data based on the “popupKey”, which is a hidden span in each key. I’m working from an existing PHP plugin, and it doesn’t really have a good way to pass the “popupKey” into the front-end other than an HTML element.

What can I do to set the popupKey for each .card into the url like url.com?id=12345 so that I can fire a ajax call and display a popup with the popupKey as an input?

<div class="card">
 <span class="popupKey" style="display:none"> 12345 </span>
 <button class="displayPopup"> Closer Look </button>
</div>
<div class="card">
 <span class="popupKey" style="display:none"> 67890 </span>
 <button class="displayPopup"> Closer Look </button>
</div>

Hi,

I’m afraid I don’t really understand the question:

Could you possibly rephrase? I’m understanding that you want to use JavaScript to manipulate some HTML on the page (as the PHP plugin doesn’t have a good way to do this). If that’s correct maybe post a snippet of what the HTML should look like once the JS has run.

I think this does what is required . . . .

1 Like

Just a thought but rather than an empty useless span could a data attribute be added to hold the data (after all that’s what they were meant for)?

Using the code from @Archibald above it would look like this.

<div class="card">
  <button data-popup="12345" class="displayPopup">Closer Look</button>
</div>
<div class="card">
  <button data-popup="67890" class="displayPopup">Closer Look</button>
</div>
const popups = document.querySelectorAll(".displayPopup");
popups.forEach((x) => {
  x.addEventListener("click", ajax);
});

function ajax(evt) {
  let url = "url.com?id=" + evt.target.dataset.popup;
  console.log(url);
  // ajax read here using url
}
1 Like

Not feasibly. The element is generated from a function inside a Wordpress plugin. Any modification wouldn’t be update-safe.

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.