Can't grab values from drop down on change for URL

debugcn Published at Dev

Matt

I need to be able to grab the values of drop downs on change, and apply them to the URL of the button labeled "Raw JSON". The issue is that the button is only taking those values after submit has been pressed, and the button itself disappears after form submission.

<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>

<a type="button" class="btn btn-default" id="link" value="JSON feed" target="_blank">Raw JSON</a>

Using the following javascript:

//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-here/' + param1var + '/duration/' + param2var;
document.getElementById('link').href = jsonHref;

jsfiddle

abhiklpm

Below code will replace you url with values from select box. I just changed your show hide link logic with grabbing values from select box.

Note: Dont forget to replace "url-here" with your actual full url.

//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;
  if (selectedCount > 1) {
    //GENERATE JSON FEED ANCHOR LINK
    var jsonHref = '/url-here/url/' + $('#region').val() + '/duration/' + $('#duration').val();
    $("#link").attr('href', jsonHref).show()
  } else {
    $("#link").attr('href', "").hide();
  }
});

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<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>
      </div>
    </form>
  </div>
  <div class="col-md-3"> <a type="button" class="btn btn-default" id="link" value="JSON feed" target="_blank">Raw JSON</a>

  </div>

Collected from the Internet

Please contact [email protected] to delete if infringement.