JSFiddle - React, Tailwind, and code Playground

by mattography

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">
<div class="container">
    <div class="container controls">
        <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 class="col-md-3 portfolio-item">
                        <div class="btn btn-default expand">Show/Hide Results</div>
                    </div>
                </div>
          ...

JavaScript

//HIDES RAW JSON BUTTON UNTIL BOTH DROPDOWNS SELECTED
$("#link").hide();

//LOGIC TO HIDE JSON FEED BUTTON UNTIL BOTH REGION AND DURATION HAVE BEEN SELECTED
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();
});
//GENERATE JSON FEED ANCHOR LINK

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

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();
}