JSFiddle - React, Tailwind, and code Playground

by mattography

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/css/font-awesome.min.css">
<div class="container">
    <form role="form" id="form" class="form-horizontal">
        <div class="form-group">
            <div class="row">
                <div class="col-md-3 portfolio-item">
                     <h5>Region</h5>

                    <select class="form-control" name="region" id="region">
                        <option value="">Select a Region</option>
                        <option value="US">US</option>
                        <option value="UK">UK</option>
                        <option value="XS">XS (Sales Team)</option>
                        <option value="XT">XT (Editorial Test)</option>
                    </select>
                </div>
                <div class="col-md-3 portfolio-item">
                     <h5>Duration</h5>

                    <select class="form-control" name="duration" id="duration">
                        <option value="">Select a Duration</option>
                        <option value="5">5 Minutes</option>
                        <option value="10">10 Minutes</option>
                        <option value="15">15 Minutes</option>
                        <option value="20">20 Minutes</option>
                        <option value="25">25 Minutes</option>
                        <option value="30">30 Minutes</option>
                    </select>
                </div>
                <div class="col-md-3 portfolio-item">
                    <input onclick="this.value='Searching...'" type="submit" class="btn btn-default" id="submit"></input>
                </div>
            </div>
        </div>
    </form>
</div>
<a type="button" class="btn btn-default" id="link" value="JSON feed" target="_blank">Raw JSON</a>

JavaScript

var $selectElements = $('#region, #duration');

$selectElements.change(function (e) {
    var selectedCount = $selectElements.filter(function () {
        if (this.value) {
            return this;
        }
    }).length;
    selectedCount > 1 ? $("#link").show() : $("#link").hide();
});

var param1var = getQueryVariable("region");
var param2var = getQueryVariable("duration");
jsonHref = 'editorialPortal/' + param1var + '/duration/' + param2var;
document.getElementById('link').href = jsonHref;

//GRAB SELECTED OPTIONS TO BUILD QUERY STRING
document.getElementById('region').addEventListener('submit', function (event) {
    event.preventDefault();

    window.location.href = '/editorialPortal' + '?' + this.id + '=' + this.options[this.selectedIndex].value;
});

//SETS SELECTED OPTIONS IN LOCAL STORAGE FOR USE AFTER PAGE REFRESH
$(document).ready(function () {
    $("#region").val(localStorage.Region);
    $("#duration").val(localStorage.Duration);
});

$("#region").change(function () {
    localStorage.Region = $(this).val();
});
$("#duration").change(function () {
    localStorage.Duration = $(this).val();
});

//PULLS QUERY STRING VARIABLES AND POPULATES DROPDOWNS BASED ON VALUES(used if URI is used directly)
var param1var = getQueryVariable("region");
var param2var = getQueryVariable("duration");

function displayresult() {
    document.getElementById("region").value = param1var;
    document.getElementById("duration").value = param2var;
}

function getQueryVariable(variable) {
    var query = window.location.search.substring(1);
    var vars = query.split("&");
    for (var i = 0; i < vars.length; i++) {
        var pair = vars[i].split("=");
        if (pair[0] == variable) {
            return pair[1];
        }
    }
}
window.onload = function () {
    displayresult();
}