<p>What you're currently seeing is the correct URL for a <code>GET</code> form submission.</p>

<p>You'll need to update the <code>onsubmit</code> handler to construct the URL you wish to visit, based on the selected option.</p>

<p>Here's how to do that, using the omnipresent jQuery. You could probably do the same in plain JS, but I have no idea which browsers you're targeting:</p>

<pre><code>(function ($) {
    $('#sitemap').on('change', function (event) {
        var $select = $(this);
        var $form = $select.closest('form');
        var url = '/desired/path/to/development' + $select.val();

        window.location.href = url;
    });
}(jQuery));
</code></pre>

<p>Don't forget to remove the current handler from the markup.</p>

CC BY-SA 3.0
2017-03-17T08:19:39.510Z
2017-03-17T08:19:39.510Z
Stephen Lewis
<p>I have a pop up box on a siteplan image that includes a select dropdown to let people select the apartment that they want. However, I can't get the it to go to the url when it's selected. So need some help please.</p>

<p>Currently when you select Plot 18 from the dropdown options it goes to:</p>

<p>websitename/developments/surrey/knowle-hill-park?sitemap=%2Fplot-18</p>

<p>however it needs to go to:</p>

<p>websitename/developments/surrey/knowle-hill-park/available-homes/plot-18</p>

<p>Can someone help show what i'm doing wrong in the form below:</p>

<pre><code>&lt;form action="{{ category.url }}"&gt;
  &lt;div class="form-group"&gt;
    &lt;div class="selectwrap"&gt;
      &lt;select id="sitemap" class="form-control" name="sitemap" onchange="this.form.submit()"&gt;
        &lt;option value=""&gt;Select Plot No&lt;/option&gt;
          {% for entry in craft.entries.section('availablehomes').relatedTo(category).level(2).order('plotPrice desc') %}
          {% if entry.plotType == 'apartment' %}
          &lt;option value="/{{ entry.slug }}"&gt;{{ entry.title }} - {{ entry.floor.label }} - {% if entry.plotAvailability == 'available' %}{{ entry.plotPrice|currency('GBP', true) }}{% else %}{{ entry.plotAvailability.label }}{% endif %}&lt;/option&gt;
          {% endif %}
          {% endfor %}
        &lt;/select&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/form&gt;
</code></pre>

<p><a href="https://i.sstatic.net/iStVh.jpg" rel="nofollow noreferrer"><img src="https://i.sstatic.net/iStVh.jpg" alt="enter image description here"></a></p>

CC BY-SA 3.0
2017-03-16T16:01:54.180Z
Does the same thing happen with the other plots or just plot 18? If it happens to all it might be because you have a `'/` infront of your slug. `<option value="/{{ entry.slug }}">` try removing that so it will be: `<option value="{{ entry.slug }}">`
Justin Dekkers
CC BY-SA 3.0
2017-03-16T17:53:25.997Z
I had it without the / previously but still didn't work
mention79
<form><drop-down>
Select dropdown not going to option url
# Select dropdown not going to option url

(Asked by: username_0 on 2017-03-16)

I have a pop up box on a siteplan image that includes a select dropdown to let people select the apartment that they want. However, I can't get the it to go to the url when it's selected. So need some help please.
Currently when you select Plot 18 from the dropdown options it goes to:
websitename/developments/surrey/knowle-hill-park?sitemap=%2Fplot-18
however it needs to go to:
websitename/developments/surrey/knowle-hill-park/available-homes/plot-18
Can someone help show what i'm doing wrong in the form below:

  
    
      
        Select Plot No
          {% for entry in craft.entries.section('availablehomes').relatedTo(category).level(2).order('plotPrice desc') %}
          {% if entry.plotType == 'apartment' %}
          {{ entry.title }} - {{ entry.floor.label }} - {% if entry.plotAvailability == 'available' %}{{ entry.plotPrice|currency('GBP', true) }}{% else %}{{ entry.plotAvailability.label }}{% endif %}
          {% endif %}
          {% endfor %}

**Tags:** form, drop-down
> **Comments:**
> **username_1**: Does the same thing happen with the other plots or just plot 18? If it happens to all it might be because you have a `'/` infront of your slug. `<option value="/{{ entry.slug }}">` try removing that so it will be: `<option value="{{ entry.slug }}">`  
> **username_0**: I had it without the / previously but still didn't work  

---

## 1 answers

### Answer by username_2 on 2017-03-17. Score: 2 | Accepted answer

What you're currently seeing is the correct URL for a GET form submission.
You'll need to update the onsubmit handler to construct the URL you wish to visit, based on the selected option.
Here's how to do that, using the omnipresent jQuery. You could probably do the same in plain JS, but I have no idea which browsers you're targeting:
(function ($) {
    $('#sitemap').on('change', function (event) {
        var $select = $(this);
        var $form = $select.closest('form');
        var url = '/desired/path/to/development' + $select.val();

        window.location.href = url;
    });
}(jQuery));

Don't forget to remove the current handler from the markup.


---

