JSFiddle - React, Tailwind, and code Playground

by joshmoto

HTML

<form id="query" method="GET" action="/ville/paris">

  <select name="genre" onchange="this.form.submit()">
    <option value="" disabled selected>Genre</option>
    <option value="woman">Woman</option>
    <option value="man">Man</option>
  </select>

  <select name="type">
    <option value="" disabled selected>type</option>
    <option value="friperie">Second hand</option>
    <option value="ressourcerie">Artisan</option>
  </select>

  <select name="prix">
    <option value="" disabled selected>prix</option>
    <option value="€">€</option>
    <option value="€€">€€</option>
    <option value="€€€">€€€</option>
  </select>
  
  <br />

  <input type="checkbox" id="test1" name="style" value="Streetwear/Sportwear" />
  <label for="test1">Streetwear/Sportwear</label>


  <input type="checkbox" id="test4" name="style" value="Casual/Décontracté" />
  <label for="test4">Casual/Décontracté</label>


  <input type="checkbox" id="test5" name="style" value="Luxe" />
  <label for="test5">Luxe</label>

  <input type="checkbox" id="test6" name="style" value="Classique" />
  <label for="test6">Classique</label>

</form>

JavaScript

// logger
function log(e) {

  // prevent default
  e.preventDefault();
  
   // set empty submission object
  let submission = {};

  // for each of this form submit event target object entries as key/field
  for (const [key, field] of Object.entries(e.target)) {

    // if object entry (field) has a name attribute
    if (field.name) {

      // add name/value to submission object
      submission[field.name] = field.value;

    }

  }
  
  // log the submission
  console.log(submission);
  
}

$('#query').on('change', 'SELECT', function(e){
  //this.form.submit();
});