Jump Menu with Go Button

[chrisandy]

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.

[halftrainedharry]

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.

[chrisandy]

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>

[halftrainedharry]

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>
  ...
</select>

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

[chrisandy]

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

[halftrainedharry]

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>
</select>

<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.

<script>
	$(document).ready(function(){
		$(".button").on("click", function(event) {
			event.preventDefault();
			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
		});

	});
</script>

[chrisandy]

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