Friday, November 16, 2012

javascript – Append multiple dropdown values to URL

I\’m trying to do something similar to this:



$(\'#dropdown1\').change(function() {
window.location = $(this).val();
});


I need to build a page with 2 dropdown lists and a textbox, and I need the values for each one to be stored and then appended to the URL when the form is submitted.


The URL needs to look similar to this when all options have been selected:



http://www.domain.co.uk/search-results/?searchOptions=dropdown1=value1|dropdown2=value2|textarea1=value3


I\’ve figured out how to store the values of the dropdowns but I can\’t seem to append it to the url.. Here\’s where I got to:



<script type=\"text/javascript\">
function getValues() {
var priceTo = document.form.priceTo.value;
//alert (priceTo);
}

$(document).ready(function() {
//var zip = $(\'#zip\').val();
var initialURL = \'http://www.domain.co.uk/search-results/?searchOptions=priceto=\'

$(\'#form\').submit(function(e) {
window.location.href = initialURL + priceTo
return false;
});

});
</script>

<body>

<form id=\"form\" name=\"form\">
Price:
<select name=\"priceTo\" id=\"priceTo\" onchange=\"getValues()\">
<option value=\"5000\">Up to £5,000</option>
<option value=\"10000\">Up to £10,000</option>
<option value=\"20000\">Up to £20,000</option>
<option value=\"40000\">Up to £40,000</option>
<option value=\"80000\">Up to £80,000</option>
</select>
<input type=\"submit\" id=\"submit\" value=\"submit\"/>
</form>

</body>


For some reason this goes to:


http://www.domain.co.uk/search-results/?searchOptions=priceto=[object%20HTMLSelectElement]






Rating: 3 out of 5 based on 3 ratings



The post javascript – Append multiple dropdown values to URL appeared first on Javascript ASK.






via Javascript ASK http://javascriptask.phpfogapp.com/javascript-append-multiple-dropdown-values-to-url.html

No comments:

Post a Comment