Jump Menu with Go Button

How can I create a ‘jump menu’ from a list of resources so that when the ‘Go’ button is clicked it pre-populates a contact form field with the chosen Resource title? I don’t seem to have enough understanding of the setPlaceholders snippet to do this or at least enough understanding to tie it in with pdoResoucres or getResources.

Not sure I understand the question.

But if the form is on the same resource as the menu, then maybe you can use a data-attribute for the menu-item and store the pagetitle in it. When the ‘Go’ button is clicked, some js-code reads the value of this data-attribute for the selected menu item and populates the contact form with it.

Sorry I’ll try and explain a little further. On the home page, say I have a list of services generated from either resources or even a static list, styled into a dropdown list. What I’m trying to find is a way to populate one field of a form (on another page) with the chosen selection.

So usually I’d use setPlaceholders for a simple button as below, but in this case I need to pick up the ‘pagetitle’ from the chosen option.

<a class="button" href="[[~180]]?job=[[+pagetitle:urlencode]]" >Apply Now</a>

Sorry, I’m still confused.

What part are you struggling with:

  • Adding the correct value to the get-parameter (“job” in your example) when the button is clicked?
  • Reading this get-parameter from the request and filling out the form field?

If it’s the former, then you probably have to use javascript for that.
Use a data-attribute to store the pagetitle in the dropdown option.

<select name="jobs">
  <option value="job1" data-pagetitle="Pagetitle of Job 1">Job 1</option>

or use the resource-id as the value and then query the pagetitle on the resource with the form.

I suppose I’m struggling with getting the dynamically chosen page title passed to the Apply Now button. Does that make sense?

Here is some example code that uses jQuery. (There are probably more elegant solutions.)

Let’s say you have markup like this

<select id="jobs" name="jobs">
	<option value="job1" data-pagetitle="Pagetitle of Job 1">Job 1</option>
	<option value="job2" data-pagetitle="Pagetitle of Job 2">Job 2</option>

<a class="button" href="[[~180]]">Apply Now</a>

If the button is clicked, the code reads the data-pagetitle attribute from the selected option of the <select> field and adds the value to the url. window.location.href than redirects to that url.

		$(".button").on("click", function(event) {
			var url = $(this).attr('href'); //read href attribute of the button
			var pagetitle = $("#jobs").find(':selected').data('pagetitle'); //read data-pagetitle attribute of selected option
			window.location.href = url + "?job=" + pagetitle; //redirect

1 Like

Thank you Harry - that’s elegant enough for me and I can adapt it to what I need.

This topic was automatically closed 2 days after discussion ended and a solution was marked. New replies are no longer allowed. You can open a new topic by clicking the link icon below the original post or solution and selecting “+ New Topic”.