Dynamic content

get url parameters to customize screen dynamically

by Amy Ruddy

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<div class="container-fluid p-3">
  <div class="jumbotron">
    <h1>Dynamic Content</h1>
    <p>1 - baseURLRed: http://www.path/to/url?<span>campaignID=red</span></p>
    <p>2 - baseURLBlue: http://www.path/to/url?<span>campaignID=%2blue</span></p>
    <p>2 - baseURLGreen: http://www.path/to/url?<span>campaignID=green</span></p>
  
    <div class="form-check form-check-inline">
  <input class="form-check-input" type="radio" name="color_selected" id="red" value="red">
  <label class="form-check-label" for="red">Red</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="radio" name="color_selected" id="blue" value="blue">
  <label class="form-check-label" for="blue">Blue</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="radio" name="color_selected" id="green" value="green">
  <label class="form-check-label" for="green">Green</label>
</div>
    <button id="myButton" class="btn btn-primary d-block mt-3">Get CampaignID</button>
  </div>
</div>

CSS

.container-fluid {
  background-color: red;
}
.jumbotron {
  background-color: white !important;
  max-width: 550px;
  margin: 0 auto;
}

span {
  background-color: yellow;
}

JavaScript

function getUrlParameter(name) {

  name = name.replace(/[\[]/, '\\[').replace(/[\]]/, '\\]');

  var regex = new RegExp('[\\?&]' + name + '=([^&#"]*)');

  var results = regex.exec(decodeURIComponent(location.search));

  return results === null ? '' : decodeURIComponent(results[1].replace(/\+/g, ' '));

}

var dynamicContent = getUrlParameter('CampaignID');

switch (dynamicContent) {

  case 'red': 

    break;

  case 'blue': 

    break;

  case 'green': 

    break;

  default:

} // End Dynamic Content

$('radio').click(function() {

alert('hello');

});