CODEWITHSUNDEEP
javascriptjqueryforms
kfawcett
kfawcett

Reputation: 83

Need to combine values from multiselect option to form a url with javascript

I am using an application that allows real estate searching on my site. The app came with a very limited search functionality form, so I've taken it and tried to enhance it by way of URL parameters that the IDX solution provider provides. One of these parameters is to make a URL and combine multiple city names in order to search for listings in more than one city at a time. I've added a multi select field to the form, but the problem is that each city has to have a sequential number in between < > symbols.

So the search would end up looking like this and the first city has to be number <0>:

www.yourblog.com/idx/?idx-q-Cities<0>=Irvine&idx-q-Cities<1>=Laguna%20Beach

I need a way tfor the options selected in the multiple select field to be combined to achieve the above result.

Here is what the part of the form with the multi select looks like. 

<form action="http://www.mmysite.com/idx/" method="get"   onsubmit="prepareSearchForm(this)">
<table>
<tr>
<th><label for="idx-q-Cities">Select Your Cities</label></th>   
<td>
<select multiple name="idx-q-Cities"  title="Type or select your cities">
    <option id="idx-q-Cities"  class="idx-q-Cities" value="Abbeville">Abbeville</option><br>
    <option id="idx-q-Cities"  class="idx-q-Cities" value="Abilene">Abilene</option>
</select>
</tr>
</table>
</form>

I had someone helping me try to get this to work, but it was unsuccessful. Here is what they came up with. Maybe it will help. 

<script>
function prepareSearchForm(form){
var count = 0;

$(form).children('.idx-q-Cities').each(function(i,o){
    var cityDOM = document.createElement('select');
    cityDOM.name = "idx-q-Cities<" + count++ + ">";
    cityDOM.value = o.value;
    form.appendChild(cityDOM);
});

return true;
}
</script>

Any ideas on how to correct the above JS or another way to take the multi select options and combine them in order to end up with the URL above?

Upvotes: 0

Views: 1097

Answers (2)

David Thomas
David Thomas

Reputation: 253396

Well, I'll offer you this:

function prepareURL() {
    var vals = $('select option:selected').map(
        function(i){
            return $(this).attr('class') + '<' + i + '>=' + $(this).val();
        }).get().join(';');
    var URL = 'www.yourblog.com/idx/' + vals;
    $('#urloutput').text(URL);
}

$('select').click(

function() {
    prepareURL();
});

JS Fiddle demo.

But I'm not sure if you want the first selected 'get' option to be 0 (whether that's Abeline or Abbeville), or if you want the Abbeville to always be the 0 option and Abeline to always be the 1 option. So I offer you an option based on that possibility too:

function prepareURL() {
    var vals = $('select option:selected').map(
        function(){
            return $(this).attr('class') + '<' + $(this).index('select option') + '>=' + $(this).val();
        }).get().join(';');
    var URL = 'www.yourblog.com/idx/' + vals;
    $('#urloutput').text(URL);
}

$('select').click(

function() {
    prepareURL();
});

JS FIddle demo.

Also, given that this appears to be a GET string, I can't help but feel you should have a ? in the URL somewhere. But I leave that to you to implement, in case you don't want it there, for some reason.

And, as a (final?) addenda, I'd strongly suggest URL-encoding the vals variable before submitting it as a URL:

var URL = 'www.yourblog.com/idx/' + encodeURIComponent(vals);
$('#urloutput').text(URL);

JS Fiddle demo.

Upvotes: 1

Ariel
Ariel

Reputation: 26773

If you are using PHP then change:

<select multiple name="idx-q-Cities" title="Type or select your cities">

To:

<select multiple name="idx-q-Cities[]" title="Type or select your cities">

Your javascript is for sure wrong. Do this on the server end.

Upvotes: 0

Related Questions