[Resolved] Dropdown selector listing all posts that takes you to that post

[Author]

Posts

[barryG-3]

This really seems like it should be easy, obvious and built-in but I can't find where or how.

I want a dropdown selector in the sidebar on each post. I'm using Views because of the Views Widget. I want it to list all the posts in this CPT. When you choose one, press SUBMIT, you go to that post.

Simple? Not so far....

Setting up a View and creating the Dropdown form was simple. But I can't get it to redirect to the post chosen.

LOOP EDITOR:
[wpv-layout-start]
[wpv-items-found]
<form method="GET" action="[wpv-post-url]">
<select name="city_name">
<!-- wpv-loop-start -->
<wpv-loop>
[wpv-post-body view_template="Loop item in City List"]
</wpv-loop>
<!-- wpv-loop-end -->
[/wpv-items-found]
</select>
<input type="submit" value="Submit">
</form>
[wpv-no-items-found]
[wpml-string context="wpv-views"]No items found[/wpml-string]
[/wpv-no-items-found]
[wpv-layout-end]

LOOP ITEM:
<option value=[wpv-post-url]>[wpv-post-title]</option><br />

No matter what I put in the ACTION value it doesn't work. I think I've tried all possibilities....

How can I do this? Do I need js? Is there another way to do this I don't know about?

THANKS!

What is the link to your site? hidden link

[Beda]

This is not entirely a Problem of Toolset.

If you can make a HTML Select List with clickable Item outside of Toolset, as example, a Hardcoded Select Field with clickable dummy options, then that works as well within a View, and you can make that dynamic by replacing the hardcoded values with the proper ShortCodes.

Your code does not really produce a valid select field with clickable items if put in a native WordPress editor, using Hardcoded values, as needed if not in a loop.
It uses a "value" attribute that is not correctly coded (it should use value="value" instead of value=value).

I crafted an example that you might be able to use as a blue print, even if Toolset Support cannot assist HTML, CSS and JS code (it's required to use Toolset, we do assist more issue with Toolset rather than generic HTML)

<select name="my-custom-select-field" onchange="location = this.value;">
<option value="">Select-City</option>
 <option value="post-slug-one">One</option>
 <option value="post-slug-two">Two</option>
 <option value="further-post-slug">Other</option>
</select>

In a View Loop this translates to:

       <!-- wpv-loop-start -->
          <select name="my-custom-select-field" onchange="location = this.value;">
            <option value="">Choose any</option>
		<wpv-loop>
          <option value="[wpv-post-slug]">[wpv-post-title]</option>
		</wpv-loop>
            </select>
	<!-- wpv-loop-end -->

This will helpt you to craft the Select Field, and then you can insert this in a Sidebar as a Widget using the View's Widget.

[barryG-3]

Thanks for getting back to me. Creating the select dropdown isn't really the problem, that works and I appreciate your advice

The question is: How can I target the "ACTION" so it goes to the post selected when it's submitted?

In other words, how should this be completed:

<form method="GET" action="___________">

THANKS AGAIN

[barryG-3]

UPDATE: I kind of spoke too soon. Using your code with a couple of tweaks works as a jump menu, which may be the way to go. THANKS!

I'd been wanting to have them choose a selection in the dropdown, then have to hit SUBMIT just so they wouldn't accidentally go to a page while they were scrolling and looking. It will be a long list.

[Christian Cox]

I'd been wanting to have them choose a selection in the dropdown, then have to hit SUBMIT just so they wouldn't accidentally go to a page while they were scrolling and looking. It will be a long list.
Sounds like you need to use jQuery to modify the form tag's action attribute instead of triggering the location change. Add a unique ID to the form tag:

<form id="your-unique-form-id" method="GET" action="someurl">

Remove the onchange code from the select field:

<select name="my-custom-select-field">

Enqueue the correct JavaScript in your child theme:

jQuery(document).ready(function(){
  jQuery(document).on('change', '#your-unique-form-id select', function(e){
    jQuery('#your-unique-form-id').attr('action', jQuery(e.target).val());
  });
});

[barryG-3]

PERFECT! Just what I was trying to do.

THANKS!