2

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:

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

enter image description here

2
  • 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 }}"> – Justin Dekkers Mar 16 '17 at 16:01
  • I had it without the / previously but still didn't work – mention79 Mar 16 '17 at 17:53
2

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.

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.