Query String Multiple Values

by Kyle Mitofsky

HTML

<form method="GET" id="myForm">
  <label for="cars">Choose a car:</label>
  <select name="cars" id="cars" multiple>
    <option value="audi" selected>Audi</option>
    <option value="saab" selected>Saab</option>
  </select>
  <button type="submit">Submit</button>
</form>

<div id="result">
  <!-- 
    placeholder that should print
    Get request sent to: ?cars=audi&cars=saab 
  -->
</div>

CSS

form > *, p {
  display: block;
  margin: 10px;
  width: 100px;
}

JavaScript

document.getElementById('myForm').addEventListener('submit', function(event) {
  event.preventDefault(); 

  const formData = new FormData(event.target);
  const params = new URLSearchParams(formData);
  const queryString = params.toString(); 

  document.getElementById('result').innerHTML =
    `Get request sent to: <code>?${queryString}</code>`;
});