JSFiddle - React, Tailwind, and code Playground

by joshmoto

HTML

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

  <select name="genre">
    <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>

  <br />

  <input type="submit" value="Go" />

</form>

JavaScript

// query form on submit
$('#query').on('submit', function(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) {

      // if field type is
      if (field.type === 'checkbox') {

        // if submission does not have syle property
        if (!submission.hasOwnProperty('style')) {

          // set field name as array
          submission[field.name] = [];

        }

        // if checkbox is checked
        if (field.checked) {

          // add name/value to submission object
          submission[field.name].push(field.value);

        }

      } else {

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

      }

    }

  }
  
  console.log(submission);

  // now let loop through our submission and check for arrays
  for (const [name, value] of Object.entries(submission)) {

    // if submission value is array
    if (Array.isArray(value)) {

      // let convert array to string
      submission[name] = value.join(',');

    }

  }
  
  console.log(submission);

  // convert submission object to url safe params string
  let submission_url_params = jQuery.param(submission);

  // create our submission action url
  let submission_url_action = this.action + '?' + submission_url_params;

  // console log the submission action url
  console.log(submission_url_action);

  // un comment this to actually fire the form submission
  //window.location.href = submission_url_action;

});