get linker thing

get-linker-thing.markdown

get linker thing

A Pen by Mark Fay on CodePen.

License.

index.html

<div id="target">
  <div class='row'>
    <div>Text Input</div><input name='textInput'>
  </div>
  <div class='row'>
    <div>Numeric Input</div><input type='number' name='numberInput'>
  </div>
  <div class='row'>
    <div>Checkbox</div><input type='checkbox' name='checkboxInput'>
  </div>
  <div class='row'>
    <div>Select</div>
    <select name='selectInput'>
      <option label='One' value='1'/>
      <option label='Two' value='2' selected='true'/>
      <option label='Three' value='3'/>
    </select>
  </div>
  <div class='row'>
    <div>Radio</div>
    <div class='radio'>
      <input name='radioInput' type='radio' id='radio_no' value='no' checked>
      <label for='radio_no'>No</label>
      <input name='radioInput' type='radio' id='radio_soap' value='soap'>
      <label for='radio_soap'>Soap</label>
      <input name='radioInput' type='radio' id='radio_radio' value='radio'>
      <label for='radio_radio'>Radio</label>
    </div>
  </div>
  <div class='row'>
    <div>Date</div>
    <input type='date' name='dateInput'>
  </div>
</div>
<div style='height: 15px'></div>
<a id='computedUrl' href=''></a>

script.js

document.body.onload = () => {
  const computeString = () => {
    let values = {};
    document.getElementById('target').querySelectorAll('[name]').forEach((element) => {
      switch (element.getAttribute('type')) {
        case 'checkbox':
          values[element.getAttribute('name')] = element.checked;
          break;
        case 'radio':
          if (element.checked === true) {
            values[element.getAttribute('name')] = element.getAttribute('value');
          }
          break;
        default: 
          values[element.getAttribute('name')] = element.value;
          break;
      }
      let urlString = 'https://example.com/get?';
      Object.keys(values).forEach((key,i) => {
        if (i > 0) {
          urlString += '&';
        }
        urlString += encodeURIComponent(key)+'='+encodeURIComponent(values[key]);
      });
      const link = document.getElementById('computedUrl');
      link.setAttribute('href', urlString);
      link.textContent = urlString;
      
    })
  }
  document.getElementById('target').querySelectorAll('[name]').forEach((element) => {
    element.addEventListener('change', (e) => {
      computeString();
    })
  })
}

style.css

* * {
  box-model: border-box;
}
#target {
  width: 500px;
}
.row {
  padding-top: 5px;
  display: flex;
  flex-direction: row;
}

.row > input, .row > select
{
  margin-left: 5px;
  width: 50%;
}

.row > div {
  width: 50%;
  text-align: right;
}