HTML Multiple Select value as comma separated string in GET variable

Question

I have set up a multi-select list as follows:

<select id="cuisine-select" name="_sft_post_tag" multiple="multiple" tabindex="-1" class="select2-hidden-accessible" aria-hidden="true">
    <option value="banting">Banting</option>
    <option value="pasta">Pasta</option>
    <option value="pizza">Pizza</option>
    <option value="seafood">Seafood</option>
    <option value="vegan">Vegan</option>
    <option value="vegetarian">Vegetarian</option>
</select>

This allows the user to select multiple cuisines for their search.

When the form is submitted, the URL sets multiple GET variables of the same name each with one of the selected values, like so:

/restaurant/?_sft_category=saturday&_sft_post_tag=pizza&_sft_post_tag=seafood

I require this to pre-select tag options on the results page.

Where I am currently stuck is the structure of the URL. I require the URL to look as follows:

/restaurant/?_sft_category=saturday&_sft_post_tag=pizza,seafood

In other words, I require one GET variable namely _sft_post_tag and all selected options must appear in a comma separated string.

The Search form is part of a Wordpress plugin called Search & Filter Pro and uses comma separated strings to pre-select options. The search form from the homepage uses the Select2 plugin.

I have tried using name="_sft_post_tag[]" and then imploding the array into a comma separated string like so implode(",", $_GET['_sft_post_tag']).

This also didn't work. At the moment it'll only pre-populate the last value of the _sft_post_tag

you need to stop form submission with JS and prepare URL by JS as you want URL should look like.. then use window.location to redirect as the form submittied ;) — Noman
– Noman, Commented Sep 25, 2016 at 11:11

Pranesh Ravi · Accepted Answer · 2016-09-25 11:35:52Z

This should help!

$('form').on('submit', function(e) {
  e.preventDefault()
  var val = $('#cuisine-select').val().join(',')
  var name = $('#cuisine-select').attr('name')
  $.get('/restaurant', {
      _sft_category: 'saturday',
      [name]: val
    })
    .done(function(data) {
      console.log(data)
    })
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <select id="cuisine-select" name="_sft_post_tag" multiple="multiple" tabindex="-1" class="select2-hidden-accessible" aria-hidden="true">
    <option value="banting">Banting</option>
    <option value="pasta">Pasta</option>
    <option value="pizza">Pizza</option>
    <option value="seafood">Seafood</option>
    <option value="vegan">Vegan</option>
    <option value="vegetarian">Vegetarian</option>
  </select>
  <button type="submit">Submit</button>
</form>

Marcus Christiansen · Accepted Answer · 2016-09-25 16:40:18Z

2

Eventually my answer was as simple as:

$('#form-specials').on('submit', function(e) {
        e.preventDefault();

        var cuisines = $('#cuisine-select').val().join(',');
        var day = $('#day-select').val();

        window.location = 'restaurant?_sft_category=' + day + "&_sft_post_tag=" + cuisines;
    });

answered Sep 25, 2016 at 16:40

Marcus Christiansen

3,2479 gold badges54 silver badges95 bronze badges

Collectives™ on Stack Overflow

HTML Multiple Select value as comma separated string in GET variable

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related