JSFiddle - React, Tailwind, and code Playground

by joshmoto

HTML

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

  <select name="genre">
    <option value="">Select genre...</option>
    <option value="woman">Woman</option>
    <option value="man">Man</option>
  </select>

  <select name="type">
    <option value="">Select type...</option>
    <option value="friperie">Second hand</option>
    <option value="ressourcerie">Artisan</option>
  </select>

  <select name="prix">
    <option value="">Select 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>
  
  <br />

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

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

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

  <br />

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

</form>

SCSS

body {
  font-family: Helvetica, sans-serif;
}

#sample-form {
  margin-bottom: 20px;
}

pre {
  margin: 0 0 8px 0;
  overflow: hidden;
  background: #1a1d21;
  height: auto;
  padding: 15px 15px 0 15px;
  width: auto;
  
  p {
    color: #4f6b86;
    width: inherit;
    white-space: normal;
    margin-top: 0;
    margin-bottom: 15px;
    
    strong {
      color: #e83e8c;
    }
    
  }
  
  code {
    color: #ffffff;
    overflow-y: scroll;
    display: block;
    padding-bottom: 20px;
    cursor: ew-resize;
  }
  
}

JavaScript

// sample form on submit
$('#sample-form').on('submit', function(e) {

  // prevent default
  e.preventDefault();
  
  console.log(e);
  
  exit();

  // 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 checkbox is checked
        if (field.checked) {
        
          // if submission does not have syle property
          if (!submission.hasOwnProperty('style')) {

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

          }

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

        }

      } else if (field.value) {

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

      }

    }

  }

  // 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(',');

    }

  }
  
  // convert submission object to url safe params string
  let submission_url_params = $.param(submission);
  
  // if we have submission params
  if(submission_url_params) {
  
    // success actions
  
    // create our submission action url
 		let submission_url_action = this.action + (submission_url_params ? '?' + submission_url_params : '');
    
    // un-comment this to actually fire the form submission
    console.log(submission_url_action);

  // else no submission params
  } else {
  
    // no submission data actions
  
  }

});